From d98c40d8a2f0c3f00560e3ae02006d3fefff5f89 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Fri, 25 Jul 2025 13:27:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/guyu/home/goods-list.vue  | 211 +++++++++++++++------------
 components/guyu/home/tabs.vue        |   5 +-
 components/guyu/page/slide-label.vue |   1 +
 3 files changed, 121 insertions(+), 96 deletions(-)

diff --git a/components/guyu/home/goods-list.vue b/components/guyu/home/goods-list.vue
index 35549bc..4b3c87d 100644
--- a/components/guyu/home/goods-list.vue
+++ b/components/guyu/home/goods-list.vue
@@ -6,106 +6,121 @@
             :hide-empty-view="hideEmptyView" :refresher-enabled="false" @contentHeightChanged="contentHeightChanged"
             :auto="false" :auto-clean-list-when-reload="false">
             <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
-            <view class="item" v-for="(item, index) in dataList" :key="index">
-                <view class="item-title">{{ item.title }}</view>
-                <view class="item-detail">{{ item.detail }}</view>
-                <view class="item-line"></view>
+            <view class="grid-container">
+                <view v-for="(item, index) in dataList" :key="index">
+                    <guyu-home-goods-item :goods-item="item" />
+                    <!-- <view class="item-title">{{ item.title }}</view>
+                    <view class="item-detail">{{ item.detail }}</view>
+                    <view class="item-line"></view> -->
+                </view>
             </view>
+
         </z-paging>
     </view>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
-            dataList: [],
-            height: 0,
-            hideEmptyView: true,
-            completeFunc: null
-        }
+<script setup>
+import { ref, watch, nextTick, defineProps, defineExpose } from 'vue';
+
+// 定义props
+const props = defineProps({
+    // 当前组件的index，也就是当前组件是swiper中的第几个
+    tabIndex: {
+        type: Number,
+        default: 0
     },
-    props: {
-        // 当前组件的index，也就是当前组件是swiper中的第几个
-        tabIndex: {
-            type: Number,
-            default: function () {
-                return 0
-            }
-        },
-        // 当前swiper切换到第几个index
-        currentIndex: {
-            type: Number,
-            default: function () {
-                return 0
-            }
-        }
-    },
-    watch: {
-        currentIndex: {
-            handler(newVal) {
-                if (newVal === this.tabIndex) {
-                    // 懒加载，当滑动到当前的item时，才去加载
-                    this.$nextTick(() => {
-                        setTimeout(() => {
-                            this.$refs.paging.reload();
-                        }, 100);
-                    })
-                }
-            },
-            immediate: true
-        }
-    },
-    methods: {
-        queryList(pageNo, pageSize) {
-            // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
-            // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
-            // 模拟请求服务器获取分页数据，请替换成自己的网络请求
-            const params = {
-                pageNo: pageNo,
-                pageSize: pageSize,
-                type: this.tabIndex + 1
-            }
-            let c = [];
-            for (let i = 0; i < 10; i++) {
-                c.push({
-                    title: '测试' + i,
-                    detail: '详情' + i
-                })
-            }
-            this.$refs.paging.complete(c);
-            this.hideEmptyView = false;
-            //请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
-            if (this.completeFunc) {
-                this.completeFunc();
-            }
-        },
-        // 页面通知当前子组件刷新列表
-        reload(completeFunc) {
-            // 先把父组件下拉刷新的回调函数存起来
-            this.completeFunc = completeFunc;
-            // 调用z-paging的reload方法
-            this.$refs.paging.reload();
-        },
-        // 当列表高度改变时，通知页面的swiper同步更改高度
-        contentHeightChanged(height) {
-            const finalHeight = this.dataList.length ? height : 0;
-            // 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
-            const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
-            this.$emit('heightChanged', Math.max(finalHeight, minHeight));
-        },
-        // 页面通知当前子组件加载更多数据
-        doLoadMore() {
-            this.$refs.paging.doLoadMore();
-        },
-        // 页面通知当前子组件清除数据
-        clear() {
-            this.$refs.paging.clear();
-            this.hideEmptyView = true;
-        }
+    // 当前swiper切换到第几个index
+    currentIndex: {
+        type: Number,
+        default: 0
     }
-}
+});
+
+// 定义emit
+const emit = defineEmits(['heightChanged']);
+
+// 响应式数据
+// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
+const dataList = ref([]);
+const height = ref(0);
+const hideEmptyView = ref(true);
+const completeFunc = ref(null);
+const paging = ref(null);
+
+// 监听currentIndex变化
+watch(
+    () => props.currentIndex,
+    (newVal) => {
+        if (newVal === props.tabIndex) {
+            // 懒加载，当滑动到当前的item时，才去加载
+            nextTick(() => {
+                setTimeout(() => {
+                    paging.value.reload();
+                }, 100);
+            });
+        }
+    },
+    { immediate: true }
+);
+
+// 组件方法
+// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
+const queryList = (pageNo, pageSize) => {
+    // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
+    // 模拟请求服务器获取分页数据，请替换成自己的网络请求
+    const params = {
+        pageNo: pageNo,
+        pageSize: pageSize,
+        type: props.tabIndex + 1
+    }
+    let c = [];
+    for (let i = 0; i < 10; i++) {
+        c.push({
+            title: '测试' + i,
+            detail: '详情' + i
+        })
+    }
+    paging.value.complete(c);
+    hideEmptyView.value = false;
+    //请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
+    if (completeFunc.value) {
+        completeFunc.value();
+    }
+};
+
+// 页面通知当前子组件刷新列表
+const reload = (completeFn) => {
+    // 先把父组件下拉刷新的回调函数存起来
+    completeFunc.value = completeFn;
+    // 调用z-paging的reload方法
+    paging.value.reload();
+};
+
+// 当列表高度改变时，通知页面的swiper同步更改高度
+const contentHeightChanged = (height) => {
+    const finalHeight = dataList.value.length ? height : 0;
+    // 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
+    const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
+    emit('heightChanged', Math.max(finalHeight, minHeight));
+};
+
+// 页面通知当前子组件加载更多数据
+const doLoadMore = () => {
+    paging.value.doLoadMore();
+};
+
+// 页面通知当前子组件清除数据
+const clear = () => {
+    paging.value.clear();
+    hideEmptyView.value = true;
+};
+
+// 将方法暴露给父组件
+defineExpose({
+    reload,
+    doLoadMore,
+    clear
+});
 </script>
 
 <style>
@@ -140,4 +155,14 @@ export default {
     width: 100%;
     background-color: #eeeeee;
 }
+
+.grid-container {
+    width: 100%;
+    display: grid;
+    /* 3列等宽 */
+    grid-template-columns: repeat(2, 1fr);
+    /* 间距 */
+    gap: 20rpx;
+    padding: 20rpx 0rpx;
+}
 </style>
diff --git a/components/guyu/home/tabs.vue b/components/guyu/home/tabs.vue
index 251b225..b838621 100644
--- a/components/guyu/home/tabs.vue
+++ b/components/guyu/home/tabs.vue
@@ -2,8 +2,7 @@
     <view class="tabs-container">
         <view class="tabs-wrapper">
             <template v-for="(item, index) in slideLableList" :key="index">
-                <view class="tab-item-wrapper" @click="clickTab(index)"  
-                    :style="{ width: item.width }">
+                <view class="tab-item-wrapper" @click="clickTab(index)" :style="{ width: item.width }">
                     <SlideLabel ref="slideLabels" :defaultColor="item.active ? '#F5D677' : '#fff'">
                         <text class="tab-text myZt-500w">{{ item.name }}</text>
                     </SlideLabel>
@@ -94,7 +93,7 @@ const getLableWidth = (name) => {
     return t + "rpx";
 }
 
-const systemWidth = parseInt(uni.getSystemInfoSync().screenWidth * 0.96);
+const systemWidth = parseInt(uni.getWindowInfo().screenWidth * 0.96);
 const emit = defineEmits(['change']);
 let isClick = false;
 // 点击标签
diff --git a/components/guyu/page/slide-label.vue b/components/guyu/page/slide-label.vue
index def71aa..9b18e36 100644
--- a/components/guyu/page/slide-label.vue
+++ b/components/guyu/page/slide-label.vue
@@ -188,6 +188,7 @@ defineExpose({
 .right-cover {
     height: 100%;
     top: 0;
+    /* border-radius: 25rpx; */
 }
 
 .left-cover {