✨ feat: 我的作品新增分页功能

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-18 22:16:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-24 22:18:36
+ * @LastEditTime: 2022-09-06 11:32:16
  * @FilePath: /tswj/src/api/C/me.js
  * @Description: 我的页面接口操作
  */
@@ -19,6 +19,7 @@ const Api = {
   DEL_COMMENT: '/srv/?a=del_comment',
   MY_SUBSCRIBE: '/srv/?a=my_subscribe',
   MY_FOLLOW: '/srv/?a=my_follow',
+  MY_PROD: '/srv/?a=my_prod',
 }
 
 /**
@@ -90,3 +91,9 @@ export const mySubscribeAPI = (params) => fn(fetch.get(Api.MY_SUBSCRIBE, params)
  * @returns
  */
 export const myFollowAPI = (params) => fn(fetch.get(Api.MY_FOLLOW, params));
+
+/**
+ * @description: 我的作品
+ * @returns
+ */
+export const myProdAPI = (params) => fn(fetch.get(Api.MY_PROD, params));

 <template>
   <div class="book-video-list">
-    <template v-for="item in prodList" :key="item" style="height: 3rem;">
+    <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      :finished-text="finishedTextStatus ? '没有更多了' : ''"
+      @load="onLoad"
+    >
+      <template v-for="item in prodList" :key="item" style="height: 3rem">
         <audit-video-card :item="item"></audit-video-card>
       </template>
-    <div style="height: 2rem;"></div>
+    </van-list>
+    <!-- <template v-for="item in prodList" :key="item" style="height: 3rem">
+      <audit-video-card :item="item"></audit-video-card>
+    </template> -->
+    <div style="height: 2rem"></div>
   </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>
-import no_image from '@images/que-shuju@2x.png'
-import AuditVideoCard from '@/components/AuditVideoCard/index.vue'
+  import no_image from '@images/que-shuju@2x.png';
+  import AuditVideoCard from '@/components/AuditVideoCard/index.vue';
+  import _ from 'lodash';
 
-import { ref } from 'vue'
-import axios from '@/utils/axios';
-import { Toast } from 'vant';
+  import { myProdAPI } from '@/api/C/me.js';
 
-// 处理书籍下作品列表
-const prodList = ref([])
-// 因为不能让空图标提前出来的写法
-const emptyStatus = ref(false);
-axios.get('/srv/?a=my_prod')
-.then(res => {
-  if (res.data.code === 1) {
-    res.data.data.prod.forEach(v => {
-      v.status = v.status.toUpperCase();
-      v.path = 'myVideoList'
-    })
-    prodList.value = res.data.data.prod;
-    if (!res.data.data.prod.length) {
-      emptyStatus.value = true;
-    } else {
-      emptyStatus.value = false;
-    }
-  } else {
-    console.warn(res);
-    if (!res.data.show) return false;
-    Toast({
-      icon: 'close',
-      message: res.data.msg
+  // 处理书籍下作品列表
+  const prodList = ref([]);
+  // 因为不能让空图标提前出来的写法
+  const emptyStatus = ref(false);
+
+  const limit = ref(10);
+  const offset = ref(0);
+
+  // 处理书籍下作品列表
+  const loading = ref(false);
+  const finished = ref(false);
+
+  // 因为不能让空图标提前出来的写法
+  const finishedTextStatus = ref(false);
+
+  /**
+   * 向下滚动查询数据
+   */
+  const onLoad = async () => {
+    // 异步更新数据
+    const { data, code } = await myProdAPI({ limit: limit.value, offset: offset.value });
+    if (code === 1) {
+      _.each(data.prod, (item) => {
+        item.status = item.status.toUpperCase();
+        item.path = 'myVideoList';
       });
+      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.prod_num) {
+        // 加载状态结束
+        finished.value = true;
+      }
+      // 空数据提示
+      if (!prodList.value.length) {
+        finishedTextStatus.value = false;
       }
-})
-.catch(err => {
-  console.error(err); 
-})
+      emptyStatus.value = Object.is(prodList.value.length, 0);
+    }
+  };
 </script>
 
 <script>
-import mixin from 'common/mixin';
+  import mixin from 'common/mixin';
 
-export default {
+  export default {
     mixins: [mixin.init],
-  data () {
-    return {
-    }
-  },
-  mounted () {
-
+    data() {
+      return {};
     },
-  methods: {
-
-  }
-}
+    mounted() {},
+    methods: {},
+  };
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>