奖品列表分页

game/src/views/ShopView.vue

@@ -51,7 +51,9 @@
       </div>
       <div
         v-if="prizeList && prizeList.length && currentTabIdx === 0"
+        ref="prizeListRef"
         class="prize-list"
+        @scroll="onPrizeListScroll"
       >
         <article
           v-for="prizeItem in prizeList"
@@ -95,7 +97,7 @@
         </article>
       </div>
       <div
-        v-if="prizeList === null"
+        v-if="prizeList?.length === 0 && currentTabIdx === 0"
         class="prize-list"
       >
         <img
@@ -110,7 +112,9 @@
       </div>
       <div
         v-if="recordList && recordList.length && currentTabIdx === 1"
+        ref="recordListRef"
         class="record-list"
+        @scroll="onRecordListScroll"
       >
         <div
           v-for="recordItem in recordList"
@@ -136,7 +140,7 @@
         </div>
       </div>
       <div
-        v-if="recordList === null"
+        v-if="recordList?.length === 0 && currentTabIdx === 1"
         class="record-list"
       >
         <img
@@ -175,12 +179,47 @@ getScore().then((res) => {
 
 const currentTabIdx = ref(0)
 
-// todo: 列表下拉刷新
+/**
+ * 奖品列表
+ */
+const prizeListRef = ref(null)
 const prizeList = ref(null)
-getPrizeList(0, 20).then((res) => {
-  prizeList.value = res.records
-  console.log(prizeList.value)
-})
+const isFetchingMorePrize = ref(false)
+const haveGotAllPrize = ref(false)
+
+function fetchMorePrizeData() {
+  if (haveGotAllPrize.value) {
+    return
+  }
+  if (isFetchingMorePrize.value) {
+    return
+  }
+  isFetchingMorePrize.value = true
+  getPrizeList(prizeList.value?.length / 10 + 1 || 0, 10).then((res) => {
+    if (prizeList.value) {
+      prizeList.value = prizeList.value.concat(res.records)
+    } else {
+      prizeList.value = res.records
+    }
+    console.log(prizeList.value.length, res.total)
+    if (prizeList.value.length >= res.total) {
+      haveGotAllPrize.value = true
+    }
+  }).finally(() => {
+    isFetchingMorePrize.value = false
+  })
+}
+
+fetchMorePrizeData()
+
+function onPrizeListScroll(e) {
+  console.log(prizeListRef.value.scrollHeight)
+  console.log(prizeListRef.value.scrollTop + prizeListRef.value.clientHeight)
+  if (Math.abs(prizeListRef.value.scrollTop + prizeListRef.value.clientHeight - prizeListRef.value.scrollHeight) < 10) {
+    fetchMorePrizeData()
+  }
+}
+
 function onClickPrizeItem(prizeItem) {
   router.push({
     name: 'RedeemForm',
@@ -190,7 +229,6 @@ function onClickPrizeItem(prizeItem) {
   })
 }
 
-// todo: 列表下拉刷新?
 const recordList = ref(null)
 getBonusPointRecord().then((res) => {
   recordList.value = res.filter((item) => {