优化我的红包页面数据展示为分页展示

packages/user/myRedPacket/index.vue

@@ -124,15 +124,31 @@ export default {
             changeIndex: 0,
             redPacketNum: 0,
             redPacketMoney: 0.00,
+            page_num: 1,
+            page_size: 20,
+            loading: false,
+            hasMore: true,
         }
     },
     methods: {
-        async getMyRedPacket(changeIndex) {
+        async getMyRedPacket(changeIndex, isLoadMore = false) {
+            if (this.loading) return;
+            this.loading = true;
+            
             const params = {
                 user_id: uni.getStorageSync('userId'),
                 belong_role: changeIndex == 0 ? '' : changeIndex,
+                page_num: this.page_num,
+                page_size: this.page_size,
             }
             const res = await request(apiArr.redPackageMyred, 'POST', params);
+            
+            if (!res || !res.rows) {
+                this.loading = false;
+                this.hasMore = false;
+                return;
+            }
+            
             let processedList = res.rows
             .filter(item => item.status !== 3)
             .map(item => {
@@ -160,7 +176,26 @@ export default {
                         grouped[adName].packets.push(item);
                     }
                 });
+                
+                if (isLoadMore) {
+                    // 合并分组数据
+                    const existingGroups = { ...this.redPacketList.reduce((acc, group) => {
+                        acc[group.ad_name] = group;
+                        return acc;
+                    }, {}) };
+                    
+                    Object.keys(grouped).forEach(adName => {
+                        if (existingGroups[adName]) {
+                            existingGroups[adName].packets = [...existingGroups[adName].packets, ...grouped[adName].packets];
+                        } else {
+                            existingGroups[adName] = grouped[adName];
+                        }
+                    });
+                    
+                    this.redPacketList = Object.values(existingGroups);
+                } else {
                     this.redPacketList = Object.values(grouped);
+                }
             } else if (this.currentTab == 3) {
                 // 店铺标签：按 merchant_name 分组
                 const grouped = {};
@@ -176,14 +211,42 @@ export default {
                         grouped[merchantName].packets.push(item);
                     }
                 });
+                
+                if (isLoadMore) {
+                    // 合并分组数据
+                    const existingGroups = { ...this.redPacketList.reduce((acc, group) => {
+                        acc[group.merchant_name] = group;
+                        return acc;
+                    }, {}) };
+                    
+                    Object.keys(grouped).forEach(merchantName => {
+                        if (existingGroups[merchantName]) {
+                            existingGroups[merchantName].packets = [...existingGroups[merchantName].packets, ...grouped[merchantName].packets];
+                        } else {
+                            existingGroups[merchantName] = grouped[merchantName];
+                        }
+                    });
+                    
+                    this.redPacketList = Object.values(existingGroups);
+                } else {
                     this.redPacketList = Object.values(grouped);
+                }
+            } else {
+                if (isLoadMore) {
+                    this.redPacketList = [...this.redPacketList, ...processedList];
                 } else {
                     this.redPacketList = processedList;
                 }
+            }
+            
             this.redPacketNum = processedList.filter(item => item.red_package_config).length;
             this.redPacketMoney = processedList.reduce((total, item) =>
                 item.red_package_config ? total + item.red_package_config.money : total, 0.00
             ).toFixed(2);
+            
+            // 检查是否有更多数据
+            this.hasMore = processedList.length === this.page_size;
+            this.loading = false;
         },
         useRedPacket(item) {
             console.log('使用红包:', item);
@@ -208,13 +271,28 @@ export default {
             } else if (index == 3) {
                 this.changeIndex = 1;
             }
+            // 重置分页状态
+            this.page_num = 1;
+            this.loading = false;
+            this.hasMore = true;
+            this.redPacketList = [];
             this.getMyRedPacket(this.changeIndex);
             if (this.tabList[index] == '历史记录') {
                 NavgateTo('/packages/user/history/index');
             }
+        },
+        onReachBottom() {
+            if (this.loading || !this.hasMore) return;
+            this.page_num++;
+            this.getMyRedPacket(this.changeIndex, true);
         }
     },
     onShow() {
+        // 重置分页状态
+        this.page_num = 1;
+        this.loading = false;
+        this.hasMore = true;
+        this.redPacketList = [];
         this.switchTab(0);
         this.getMyRedPacket(0);
     }