224 lines
7.3 KiB
Vue
224 lines
7.3 KiB
Vue
<script setup>
|
|
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
|
|
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
|
|
import CustomTabBar from '@/components/CustomTabBar.vue'
|
|
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
|
|
import LoginPopup from '@/components/login.vue';
|
|
import { getProducts } from './api.js';
|
|
import { useUserStore } from '@/store/user.js';
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t, locale } = useI18n();
|
|
|
|
const props = defineProps(['status']);
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const userStore = useUserStore();
|
|
|
|
const tabList = ref([]); //tab列表
|
|
const tabsIndex = ref(0); //当前选中的tab索引
|
|
// const modelTypeList = ref([]);
|
|
const tabsLeft = ref(0); //下划线移动的距离
|
|
const finished = ref(false); //数据是否全部加载完成
|
|
const windowWidth = ref(0); //tab元素的宽度
|
|
const orderRows = ref([]); //订单列表
|
|
const showLogin = ref(false); //显示登录
|
|
const triggered = ref(false); //是否下拉刷新状态，true为是
|
|
const loading = ref(false); // 添加loading状态
|
|
const productData = ref();
|
|
const scrollHeight = ref(0); //scroll-view滚动高度
|
|
|
|
const pageView = ref({});
|
|
/**
|
|
* @desc 获取可视内容高度
|
|
*/
|
|
const getContentHeight = (e) => {
|
|
pageView.value = e;
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @desc 跳转至详情页面
|
|
*/
|
|
const toDetailPage = (productId) => {
|
|
uni.navigateTo({
|
|
url: '/pages/product/detail',
|
|
});
|
|
};
|
|
//获取首页数据
|
|
const getProductList = async()=>{
|
|
const res = await getProducts();
|
|
|
|
productData.value=res.data;
|
|
console.log("商品数据",productData.value);
|
|
}
|
|
|
|
|
|
onLoad(()=>{
|
|
// getProductList();
|
|
|
|
});
|
|
|
|
// 模拟数据
|
|
|
|
|
|
/**
|
|
* @desc 处理预订事件
|
|
*/
|
|
const handleBook = (productId) => {
|
|
// 这里可以添加预订逻辑，比如跳转到详情页
|
|
uni.navigateTo({
|
|
url: `/pages/product/detail?id=${productId}`,
|
|
});
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<view class=" bg-[#fff] flex flex-col mx-[30rpx] items-center">
|
|
|
|
<!-- title -->
|
|
<view class="bg-[#fff] flex justify-between items-center w-full">
|
|
<view class="w-full flex items-center gap-[10px]">
|
|
|
|
<text class="text-[#33333] text-[20px] font-bold" >Sweekar Alpha</text>
|
|
<u-icon name="level" color="#fff" class="bg-theme border-round-theme rounded-full"></u-icon>
|
|
</view>
|
|
<view class="w-[80px] border-round-theme border-[2px] rounded-full flex justify-center py-[3px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
|
|
<u-icon name="level"></u-icon>
|
|
<text class="text-[13px]">1205</text>
|
|
</view>
|
|
</view>
|
|
<!-- row2 -->
|
|
<view class="flex justify-between items-center mt-[15px] w-full">
|
|
<!-- 状态 -->
|
|
<view class=" bg-[#fff] border-solid border py-[6px] px-[6px] rounded-full flex items-center gap-[10px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
|
|
<view class="border-bottom-theme rounded-full flex justify-center items-center h-[30px] w-[30px] bg-theme">
|
|
<text class="text-[#fff]">5</text>
|
|
</view>
|
|
<view class="flex flex-col">
|
|
<text class="text-[10px]">STAGE</text>
|
|
<text class="text-[13px] font-bold">CHILDHOOD</text>
|
|
</view>
|
|
</view>
|
|
<!-- 日期 -->
|
|
<view class="border border-solid border-[#cdcdcd] bg-[#fff] py-[2px] px-[4px] gap-[2px] flex items-center text-[10px]">
|
|
<u-icon name="clock" size="10" bold=""></u-icon>
|
|
<text>42</text>
|
|
<text>DAYS</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- EXP -->
|
|
<view class="flex items-center gap-[10px] mt-[20px] w-full ">
|
|
<text class="text-[8px]">EXP</text>
|
|
<view class="w-[100px]">
|
|
<uv-line-progress :percentage="30" height="6" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- MODEL X -->
|
|
<view class="relative border border-solid border-[#cdcdcd] bg-[#FBFAFA] rounded-full h-[220px] w-[220px] mt-[70px] mb-[20px] p-[10px] flex justify-center items-center">
|
|
|
|
<!-- 中心圆圈 -->
|
|
<view class="border-[3px] border-solid border-theme rounded-full h-[160px] bg-[#fff] w-[160px] p-[20px] flex justify-center items-center">
|
|
<view class="flex flex-col justify-center items-center">
|
|
<u-icon name="star" size="80"></u-icon>
|
|
<text>MODEL X</text>
|
|
</view>
|
|
</view>
|
|
<!-- 交流栏 -->
|
|
<view class="absolute top-[-60px] right-[-30px] w-[120px] flex flex-col justify-center items-center px-[10px] border border-solid border-theme bg-[#fff] rounded-t-lg rounded-br-lg h-[70px] border-[2px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)] animate-bounce"
|
|
style="animation: bounce 1.5s infinite;">
|
|
<view class="text-[12px]">
|
|
Master,I missed you! Let's play together!
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uv-divider dashed="true" class="w-full"></uv-divider>
|
|
|
|
<!-- 四宫格 -->
|
|
<view class="w-full p-[20px] flex flex-col gap-[10px]">
|
|
<!-- 第一行 -->
|
|
<view class="w-full flex justify-between items-center gap-[10px]">
|
|
<!-- item -->
|
|
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
|
|
<view class="flex justify-between">
|
|
<text class="text-[12px] font-bold">HYNGER</text>
|
|
<u-icon name="star"></u-icon>
|
|
</view>
|
|
<text class="text-[18px] font-bold">72%</text>
|
|
<view class="w-full">
|
|
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
|
|
<view class="flex justify-between">
|
|
<text class="text-[12px] font-bold">HYNGER</text>
|
|
<u-icon name="star"></u-icon>
|
|
</view>
|
|
<text class="text-[18px] font-bold">72%</text>
|
|
<view class="w-full">
|
|
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 第二行 -->
|
|
<view class="w-full flex justify-between items-center gap-[10px]">
|
|
<!-- item -->
|
|
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
|
|
<view class="flex justify-between">
|
|
<text class="text-[12px] font-bold">HYNGER</text>
|
|
<u-icon name="star"></u-icon>
|
|
</view>
|
|
<text class="text-[18px] font-bold">72%</text>
|
|
<view class="w-full">
|
|
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
|
|
<view class="flex justify-between">
|
|
<text class="text-[12px] font-bold">HYNGER</text>
|
|
<u-icon name="star"></u-icon>
|
|
</view>
|
|
<text class="text-[18px] font-bold">72%</text>
|
|
<view class="w-full">
|
|
<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<CustomTabBar />
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
/* 定义弹跳动画 */
|
|
@keyframes bounce {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
.animate-bounce {
|
|
animation: bounce 1.5s infinite;
|
|
}
|
|
</style>
|