Feat：礼包卡加载优化

pkg_user/views/giftList.vue

@@ -121,6 +121,9 @@
               </view>
             </view>
           </block>
+          <view v-if="sendList.length > 0" class="load-more">
+            {{ sendLoading ? '加载中...' : (sendHasMore ? '上拉加载更多' : '没有更多了') }}
+          </view>
           <view v-if="sendList.length === 0" class="noCart">
             <view class="pictrue">
               <image :src="webUrl + '/20240102232734472795.png'"/>
@@ -203,6 +206,9 @@
               </view>
             </view>
           </block>
+          <view v-if="receiveList.length > 0" class="load-more">
+            {{ receiveLoading ? '加载中...' : (receiveHasMore ? '上拉加载更多' : '没有更多了') }}
+          </view>
           <view v-if="receiveList.length === 0" class="noCart">
             <view class="pictrue">
               <image :src="webUrl + '/20240102232734472795.png'"/>
@@ -283,6 +289,15 @@ export default {
       giftItem: {},
       orderInfo: {},
       isShowPayPwdPop: false,
+      pageSize: 10,
+      sendPage: 1,
+      receivePage: 1,
+      sendLoading: false,
+      receiveLoading: false,
+      sendHasMore: true,
+      receiveHasMore: true,
+      sendInited: false,
+      receiveInited: false
     }
   },
   computed: mapGetters(["userInfo"]),
@@ -290,7 +305,14 @@ export default {
     giftNotice().then(res => {
       this.giftNotice = res.data
     })
-    this.getGiftCardSendList()
+    this.getGiftCardSendList(true)
+  },
+  onReachBottom() {
+    if (this.cateIndex === 0) {
+      this.getGiftCardSendList()
+      return
+    }
+    this.getGiftCardReceiveList()
   },
   onShareAppMessage() {
     uni.updateShareMenu({ 
@@ -318,7 +340,7 @@ export default {
               id: item.id
             }).then(qRes => {
               if (qRes.success) {
-                this.getGiftCardSendList()
+                this.getGiftCardSendList(true)
               }
             }).finally(() => {
               uni.hideLoading()
@@ -338,7 +360,7 @@ export default {
       //网络请求
       yuePayOrderHandle(this.orderInfo.orderId, "yue", this.from, payPwd).then(res => {
         console.log(res);
-        this.getGiftCardSendList()
+        this.getGiftCardSendList(true)
         this.payPassword = "";
       })
     },
@@ -348,7 +370,7 @@ export default {
     wechatPay(type) {
       payOrderHandle(this.orderInfo.orderId, type, this.from).then(res => {
         console.log(res);
-        this.getGiftCardSendList()
+        this.getGiftCardSendList(true)
       })
     },
     goBuy(order) {
@@ -370,43 +392,102 @@ export default {
     cateItemClickHanlde(item, index) {
       if (this.cateIndex === index || !this.isLoad) return
       this.cateIndex = index
-      if (this.cateIndex === 0) {
-        this.getGiftCardSendList()
+      if (this.cateIndex === 0 && !this.sendInited) {
+        this.getGiftCardSendList(true)
       }
-      if (this.cateIndex === 1) {
-        this.getGiftCardReceiveList()
+      if (this.cateIndex === 1 && !this.receiveInited) {
+        this.getGiftCardReceiveList(true)
       }
     },
-    getGiftCardReceiveList() {
-      this.isLoad = false
+    getListResult(data, page) {
+      const list = Array.isArray(data)
+        ? data
+        : (data && (data.records || data.list || data.data)) || []
+      const pageCount = Number(
+        data && (data.pages || data.totalPage || data.last_page || data.pageCount || 0)
+      )
+      const total = Number(
+        data && (data.total || data.totalCount || data.count || 0)
+      )
+      let hasMore = false
+      if (pageCount > 0) {
+        hasMore = page < pageCount
+      } else if (total > 0) {
+        hasMore = page * this.pageSize < total
+      } else {
+        hasMore = list.length >= this.pageSize
+      }
+      return {
+        list,
+        hasMore
+      }
+    },
+    getGiftCardReceiveList(reset = false) {
+      if (this.receiveLoading) return
+      if (!reset && !this.receiveHasMore) return
+      const page = reset ? 1 : this.receivePage
+      if (reset) {
+        this.receivePage = 1
+        this.receiveHasMore = true
+        this.receiveList = []
+      }
+      if (page === 1 && this.cateIndex === 1) {
+        this.isLoad = false
+      }
+      this.receiveLoading = true
       giftCardReceiveList({
-        page: 1,
-        limit: 999
+        page,
+        limit: this.pageSize
       }).then(res => {
         const { success, data } = res
         if (success) {
-          this.receiveList = data || []
+          const { list, hasMore } = this.getListResult(data, page)
+          this.receiveList = page === 1 ? list : this.receiveList.concat(list)
+          this.receiveHasMore = hasMore
+          this.receivePage = page + 1
+          this.receiveInited = true
         }
       }).catch(err => {
         console.log(err)
       }).finally(() => {
-        this.isLoad = true
+        this.receiveLoading = false
+        if (this.cateIndex === 1) {
+          this.isLoad = true
+        }
       })
     },
-    getGiftCardSendList() {
-      this.isLoad = false
+    getGiftCardSendList(reset = false) {
+      if (this.sendLoading) return
+      if (!reset && !this.sendHasMore) return
+      const page = reset ? 1 : this.sendPage
+      if (reset) {
+        this.sendPage = 1
+        this.sendHasMore = true
+        this.sendList = []
+      }
+      if (page === 1 && this.cateIndex === 0) {
+        this.isLoad = false
+      }
+      this.sendLoading = true
       giftCardSendList({
-        page: 1,
-        limit: 999
+        page,
+        limit: this.pageSize
       }).then(res => {
         const { success, data } = res
         if (success) {
-          this.sendList = data || []
+          const { list, hasMore } = this.getListResult(data, page)
+          this.sendList = page === 1 ? list : this.sendList.concat(list)
+          this.sendHasMore = hasMore
+          this.sendPage = page + 1
+          this.sendInited = true
         }
       }).catch(err => {
         console.log(err)
       }).finally(() => {
-        this.isLoad = true
+        this.sendLoading = false
+        if (this.cateIndex === 0) {
+          this.isLoad = true
+        }
       })
     },
     getStatus(order) {
@@ -655,4 +736,10 @@ export default {
   line-height: 40rpx;
   font-size: 26rpx;
 }
-</style>
+.load-more {
+  padding: 0 0 24rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+}
+</style>