Przeglądaj źródła

feat(share): enhance share page with mock data support and improved UI

- Updated the share page to display a more informative expiration time for red packets.
- Added a new empty state view to inform users when there are no shareable red packets available.
- Implemented mock data functionality for testing purposes, allowing for easier development and debugging.
- Enhanced the data loading logic to ensure the share list is correctly populated from the API response.
ylong 1 tydzień temu
rodzic
commit
1381c08d2c
1 zmienionych plików z 46 dodań i 5 usunięć
  1. 46 5
      packet/pages/share.vue

+ 46 - 5
packet/pages/share.vue

@@ -10,7 +10,7 @@
                 <!-- Header -->
                 <view class="card-header">
                     <text class="card-title">邀请好友同享最高可得{{ item.shareSumPrice }}元红包</text>
-                    <text class="card-time">{{ item.shareRedBagExpire }}</text>
+                    <text class="card-time">截止时间:{{ item.shareRedBagExpire }}</text>
                 </view>
 
                 <!-- Progress Section -->
@@ -48,6 +48,11 @@
                     <text class="btn-text">立即分享</text>
                 </button>
             </view>
+
+            <view class="empty-wrap" v-if="listLoaded && shareList.length === 0">
+                <u-empty text="暂无可分享的红包" mode="list" margin-top="80"></u-empty>
+                <text class="empty-tip">领取红包并成功发起分享后,会出现在此列表</text>
+            </view>
         </view>
     </view>
 </template>
@@ -56,13 +61,31 @@
 export default {
     data() {
         return {
-            shareList: [] // 分享列表数据
+            shareList: [],
+            listLoaded: false,
+            useMock: false
         }
     },
-    onLoad() {
-        // 获取分享列表
+    onLoad(options) {
+        this.useMock = options && options.mock === '1';
+        if (this.useMock) {
+            this.shareList = [{
+                bianhao: 'preview-mock',
+                shareSumPrice: 10,
+                shareGetNum: 3,
+                shareNum: 10,
+                shareRedBagExpire: '2026-12-31 23:59:59'
+            }];
+            this.listLoaded = true;
+            return;
+        }
         this.getShareList();
     },
+    onShow() {
+        if (!this.useMock) {
+            this.getShareList();
+        }
+    },
     onShareAppMessage(options) {
         console.log(options);
         // 从 options 中获取卡片索引
@@ -82,7 +105,8 @@ export default {
             try {
                 const res = await this.$u.api.getShareRedBagListAjax();
                 if (res.code === 200 || res.code === 0) {
-                    this.shareList = res.data || [];
+                    const data = res.data;
+                    this.shareList = Array.isArray(data) ? data : (data && (data.list || data.rows) || []);
                 } else {
                     uni.showToast({
                         title: res.msg || '获取分享列表失败',
@@ -95,6 +119,8 @@ export default {
                     title: '网络错误',
                     icon: 'none'
                 });
+            } finally {
+                this.listLoaded = true;
             }
         },
         // 计算进度百分比
@@ -168,6 +194,21 @@ export default {
         padding: 60rpx 0;
         margin-top: 350rpx;
 
+        .empty-wrap {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 24rpx;
+            padding: 40rpx 30rpx 60rpx;
+            text-align: center;
+
+            .empty-tip {
+                display: block;
+                margin-top: 16rpx;
+                font-size: 24rpx;
+                color: #666;
+                line-height: 1.6;
+            }
+        }
+
         .card {
             background: #fff;
             border-radius: 24rpx;