暂存

components/guyu/home/goods-list.vue

@@ -6,66 +6,72 @@
             :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="grid-container">
-                <view class="item-title">{{ item.title }}</view>
+                <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 class="item-line"></view> -->
                 </view>
+            </view>
+
         </z-paging>
     </view>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref, watch, nextTick, defineProps, defineExpose } from 'vue';
-    data() {
+
-        return {
+// 定义props
-            // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
+const props = defineProps({
-            dataList: [],
-            height: 0,
-            hideEmptyView: true,
-            completeFunc: null
-        }
-    },
-    props: {
     // 当前组件的index，也就是当前组件是swiper中的第几个
     tabIndex: {
         type: Number,
-            default: function () {
+        default: 0
-                return 0
-            }
     },
     // 当前swiper切换到第几个index
     currentIndex: {
         type: Number,
-            default: function () {
+        default: 0
-                return 0
     }
-        }
+});
-    },
+
-    watch: {
+// 定义emit
-        currentIndex: {
+const emit = defineEmits(['heightChanged']);
-            handler(newVal) {
+
-                if (newVal === this.tabIndex) {
+// 响应式数据
+// 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时，才去加载
-                    this.$nextTick(() => {
+            nextTick(() => {
                 setTimeout(() => {
-                            this.$refs.paging.reload();
+                    paging.value.reload();
                 }, 100);
-                    })
+            });
         }
     },
-            immediate: true
+    { immediate: true }
-        }
+);
-    },
+
-    methods: {
+// 组件方法
-        queryList(pageNo, pageSize) {
+// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
-            // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
+const queryList = (pageNo, pageSize) => {
     // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
     // 模拟请求服务器获取分页数据，请替换成自己的网络请求
     const params = {
         pageNo: pageNo,
         pageSize: pageSize,
-                type: this.tabIndex + 1
+        type: props.tabIndex + 1
     }
     let c = [];
     for (let i = 0; i < 10; i++) {
@@ -74,38 +80,47 @@ export default {
             detail: '详情' + i
         })
     }
-            this.$refs.paging.complete(c);
+    paging.value.complete(c);
-            this.hideEmptyView = false;
+    hideEmptyView.value = false;
     //请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
-            if (this.completeFunc) {
+    if (completeFunc.value) {
-                this.completeFunc();
+        completeFunc.value();
     }
-        },
+};
-        // 页面通知当前子组件刷新列表
+
-        reload(completeFunc) {
+// 页面通知当前子组件刷新列表
+const reload = (completeFn) => {
     // 先把父组件下拉刷新的回调函数存起来
-            this.completeFunc = completeFunc;
+    completeFunc.value = completeFn;
     // 调用z-paging的reload方法
-            this.$refs.paging.reload();
+    paging.value.reload();
-        },
+};
-        // 当列表高度改变时，通知页面的swiper同步更改高度
+
-        contentHeightChanged(height) {
+// 当列表高度改变时，通知页面的swiper同步更改高度
-            const finalHeight = this.dataList.length ? height : 0;
+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);
-            this.$emit('heightChanged', Math.max(finalHeight, minHeight));
+    emit('heightChanged', Math.max(finalHeight, minHeight));
-        },
+};
-        // 页面通知当前子组件加载更多数据
+
-        doLoadMore() {
+// 页面通知当前子组件加载更多数据
-            this.$refs.paging.doLoadMore();
+const doLoadMore = () => {
-        },
+    paging.value.doLoadMore();
-        // 页面通知当前子组件清除数据
+};
-        clear() {
+
-            this.$refs.paging.clear();
+// 页面通知当前子组件清除数据
-            this.hideEmptyView = true;
+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>

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)"  
+                <view class="tab-item-wrapper" @click="clickTab(index)" :style="{ width: item.width }">
-                    :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;
 // 点击标签

components/guyu/page/slide-label.vue

@@ -188,6 +188,7 @@ defineExpose({
 .right-cover {
     height: 100%;
     top: 0;
+    /* border-radius: 25rpx; */
 }
 
 .left-cover {