129 lines
3.1 KiB
Vue
129 lines
3.1 KiB
Vue
<script setup>
|
||
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
|
||
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
|
||
|
||
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
|
||
import LoginPopup from '@/components/login-popup.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="overflow-hidden" :style="{ height: `${pageView.pageHeight}px` }">
|
||
<Layout :navShowNavBar="false" bgColor="#F7F7F7" @getContentHeight="getContentHeight">
|
||
<template #content>
|
||
<view class="w-full flex flex-col gap-[15px] p-[15px]">
|
||
<view class="flex p-[10px] gap-[15px] border border-round-theme rounded-[10px]" v-for="(product,index) in productData" :key="index">
|
||
<image :src="product.image" class="w-[80px] h-[80px] rounded-[10px]"></image>
|
||
<view class="flex-1 flex flex-col gap-[4px]">
|
||
<text class="text-[15px] text-[#333333] font-bold">{{product.name}}</text>
|
||
<text class="text-[12px] text-[#1D9EF8] font-Medium">{{product.description}}</text>
|
||
|
||
<view class="flex gap-[10px]">
|
||
<text class="text-price">售价：{{product.price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
</Layout>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
:deep(.u-count-down__text) {
|
||
color: #ab002d !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.navigation {
|
||
border-bottom: 1px solid #f2f2f2;
|
||
}
|
||
|
||
.navi-title-center {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.line {
|
||
transition: 0.3s all;
|
||
}
|
||
|
||
.search {
|
||
:deep(.u-search) {
|
||
flex: 1;
|
||
}
|
||
}
|
||
</style>
|