✨ feat: 个人首页列表新增分页功能

@@ -4,7 +4,8 @@
       <div class="info">
         <van-row>
           <van-col>
-            <van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
+            <van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar"
+              style="padding-right: 1rem;" />
             <van-image v-else round width="50" height="50" :src="icon_avatar" style="padding-right: 1rem;" />
           </van-col>
           <van-col class="text-wrapper" span="18">
@@ -40,17 +41,23 @@
           <div class="title">发布作品</div>
         </van-col>
         <van-col span="12" offset="6" style="text-align: right; color: #626262;">
-          <div style="padding-top: 0.5rem;">{{ userInfo.prod?.length }}个作品</div>
+          <div style="padding-top: 0.5rem;">{{ userInfo.prod_num }}个作品</div>
         </van-col>
       </van-row>
     </div>
     <div>
-      <template v-for="item in userInfo.prod" :key="item">
+      <!-- <template v-for="item in userInfo.prod" :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 prod" :key="item">
+          <video-card :item="item" />
+        </template>
+      </van-list>
       <div style="height: 8rem;" />
     </div>
-    <div class="donate-bar">
+    <div v-if="donateInfo" class="donate-bar">
       <div class="text">
         <span style="font-size: 0.85rem; color: #999999;">收到小红花&nbsp;</span>
         <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="margin: 0 auto;" />
@@ -92,20 +99,64 @@ const emptyStatus = ref(false);
 const donateInfo = ref({})
 onMounted(async () => {
   // 获取表演者信息
-  const { data } = await perfInfoAPI({ perf_id: $route.query.perf_id });
-  if (!data.prod.length) {
-    emptyStatus.value = true;
-  } else {
+  // const { data } = await perfInfoAPI({ perf_id: $route.query.perf_id });
+  // if (!data.prod.length) {
+  //   emptyStatus.value = true;
+  // } else {
+  //   _.each(data.prod, (item) => {
+  //     item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
+  //   })
+  //   userInfo.value = data;
+  //   emptyStatus.value = false;
+  // }
+  const donateData = await prepareDonateAPI({ perf_id: $route.query.perf_id });
+  donateInfo.value = donateData.data;
+});
+
+/******** ******/
+
+// 绑定页面数据
+// tslint:disable-next-line: variable-name
+const prod = ref([]);
+const limit = ref(30)
+const offset = ref(0)
+
+// 处理书籍下作品列表
+const loading = ref(false);
+const finished = ref(false);
+
+// 因为不能让空图标提前出来的写法
+const finishedTextStatus = ref(false);
+
+/**
+ * 向下滚动查询数据
+ */
+const onLoad = async () => {
+  // 异步更新数据
+  const { data, code } = await perfInfoAPI({ perf_id: $route.query.perf_id, limit: limit.value, offset: offset.value })
+  if (code === 1) {
     _.each(data.prod, (item) => {
       item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
     })
     userInfo.value = data;
-    emptyStatus.value = false;
+    prod.value = _.concat(prod.value, data.prod);
+    prod.value = _.uniqBy(prod.value, 'id');
+    offset.value = prod.value.length;
+    loading.value = false;
+    // 数据全部加载完成
+    if (prod.value.length === data.prod_num) {
+      // 加载状态结束
+      finished.value = true;
+    }
+    // 空数据提示
+    if (!prod.value.length) {
+      finishedTextStatus.value = false;
+    }
+    emptyStatus.value = Object.is(prod.value.length, 0);
   }
-  const donateData = await prepareDonateAPI({ perf_id: $route.query.perf_id });
-  donateInfo.value = donateData.data;
-});
+};
 
+/******** ********/
 // 弹出捐赠弹框模块
 const showDonate = ref(false);
 
@@ -173,6 +224,7 @@ setTimeout(() => {
     // background-image: url('@images/bg@2x.png');
     background-image: url('http://gyzs.onwall.cn/bg%402x.png');
     background-size: cover;
+
     .info {
       padding: 2rem;
       padding-right: 0;
@@ -249,6 +301,7 @@ setTimeout(() => {
     background-color: white;
     padding: 1rem;
     box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
+
     .text {
       display: flex;
       // flex-direction: column;