初始化项目模板

pages/product/index.vue

@@ -0,0 +1,128 @@
+<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>