✨ feat: 点赞和收藏页新增分页功能

@@ -2,22 +2,24 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-04-28 11:38:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-10 00:46:57
+ * @LastEditTime: 2022-09-05 14:18:48
  * @FilePath: /tswj/src/views/me/collection.vue
  * @Description:
 -->
 <template>
   <div class="book-video-list">
-    <template v-for="item in prodList" :key="item">
+    <!-- <template v-for="item in prodList" :key="item">
       <video-card :item="item" />
-    </template>
+    </template> -->
+    <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
+      @load="onLoad">
+      <template v-for="item in prodList" :key="item">
+        <video-card :item="item" />
+      </template>
+    </van-list>
     <div style="height: 2rem;" />
   </div>
-  <van-empty v-if="emptyStatus"
-    class="custom-image"
-    :image="no_image"
-    description="暂无收藏"
-  />
+  <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无收藏" />
 </template>
 
 <script setup>
@@ -42,19 +44,55 @@ const prodList = ref([])
 // 因为不能让空图标提前出来的写法
 const emptyStatus = ref(false);
 
-onMounted(async () => {
-  // 获取收藏列表
-  const { data } = await myFavorAPI();
-  if (!data.prod.length) {
-    emptyStatus.value = true;
-  } else {
-    prodList.value = data.prod;
-    _.each(prodList.value, (item) => {
-      item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
+// onMounted(async () => {
+//   // 获取收藏列表
+//   const { data } = await myFavorAPI();
+//   if (!data.prod.length) {
+//     emptyStatus.value = true;
+//   } else {
+//     prodList.value = data.prod;
+//     _.each(prodList.value, (item) => {
+//       item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
+//     })
+//     emptyStatus.value = false;
+//   }
+// });
+const limit = ref(100)
+const offset = ref(0)
+
+// 处理书籍下作品列表
+const loading = ref(false);
+const finished = ref(false);
+
+// 因为不能让空图标提前出来的写法
+const finishedTextStatus = ref(false);
+
+/**
+ * 向下滚动查询数据
+ */
+const onLoad = async () => {
+  // 异步更新数据
+  const { data, code } = await myFavorAPI({ limit: limit.value, offset: offset.value })
+  if (code === 1) {
+    _.each(data.prod, (item) => {
+      item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
     })
-    emptyStatus.value = false;
+    prodList.value = _.concat(prodList.value, data.prod);
+    prodList.value = _.uniqBy(prodList.value, 'id');
+    offset.value = prodList.value.length;
+    loading.value = false;
+    // 数据全部加载完成
+    if (prodList.value.length === data.favor_num) {
+      // 加载状态结束
+      finished.value = true;
+    }
+    // 空数据提示
+    if (!prodList.value.length) {
+      finishedTextStatus.value = false;
+    }
+    emptyStatus.value = Object.is(prodList.value.length, 0);
   }
-});
+};
 </script>
 
 <style lang="less" scoped>

@@ -2,22 +2,24 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 23:52:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-24 22:12:20
+ * @LastEditTime: 2022-09-05 14:18:56
  * @FilePath: /tswj/src/views/me/like.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description:
 -->
 <template>
   <div class="book-video-list">
-    <template v-for="item in prodList" :key="item">
+    <!-- <template v-for="item in prodList" :key="item">
       <video-card :item="item" />
-    </template>
+    </template> -->
+    <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
+      @load="onLoad">
+      <template v-for="item in prodList" :key="item">
+        <video-card :item="item" />
+      </template>
+    </van-list>
     <div style="height: 2rem;" />
   </div>
-  <van-empty v-if="emptyStatus"
-    class="custom-image"
-    :image="no_image"
-    description="暂无点赞"
-  />
+  <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无点赞" />
 </template>
 
 <script setup>
@@ -45,21 +47,57 @@ const prodList = ref([]);
 // 因为不能让空图标提前出来的写法
 const emptyStatus = ref(false);
 
-onMounted(async () => {
-  // 获取点赞列表
-  const { data } = await myLikeAPI();
-  if (!data.prod.length) {
-    emptyStatus.value = true;
-  } else {
-    prodList.value = data.prod;
-    _.each(prodList.value, (item) => {
-      item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
+// onMounted(async () => {
+//   // 获取点赞列表
+//   const { data } = await myLikeAPI();
+//   if (!data.prod.length) {
+//     emptyStatus.value = true;
+//   } else {
+//     prodList.value = data.prod;
+//     _.each(prodList.value, (item) => {
+//       item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
+//     })
+//     emptyStatus.value = false;
+//   }
+// });
+
+const limit = ref(100)
+const offset = ref(0)
+
+// 处理书籍下作品列表
+const loading = ref(false);
+const finished = ref(false);
+
+// 因为不能让空图标提前出来的写法
+const finishedTextStatus = ref(false);
+
+/**
+ * 向下滚动查询数据
+ */
+const onLoad = async () => {
+  // 异步更新数据
+  const { data, code } = await myLikeAPI({ limit: limit.value, offset: offset.value })
+  if (code === 1) {
+    _.each(data.prod, (item) => {
+      item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
     })
-    emptyStatus.value = false;
+    prodList.value = _.concat(prodList.value, data.prod);
+    prodList.value = _.uniqBy(prodList.value, 'id');
+    offset.value = prodList.value.length;
+    loading.value = false;
+    // 数据全部加载完成
+    if (prodList.value.length === data.like_num) {
+      // 加载状态结束
+      finished.value = true;
+    }
+    // 空数据提示
+    if (!prodList.value.length) {
+      finishedTextStatus.value = false;
+    }
+    emptyStatus.value = Object.is(prodList.value.length, 0);
   }
-});
+};
 </script>
 
 <style lang="less" scoped>
-
 </style>