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

hookehuyr
Commit e64eb4cd58ac65ad558dbcc9e15967ca7a27e2f5 e64eb4cd 1 parent dd20f669
Showing 2 changed files with 90 additions and 72 deletions
src/api/C/me.js
src/views/me/videoList.vue
--- a/src/api/C/me.js
View file @e64eb4c
+++ b/src/api/C/me.js
View file @e64eb4c
@@ -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,12 +19,13 @@ 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',
 }
 /**
  * @description: 切换儿童角色
- * @param {*} params 
+ * @param {*} params
- * @returns 
+ * @returns
  */
 export const changePerformerAPI = (params) => fn(fetch.post(Api.CHANGE_PERFORMER, params));
@@ -37,22 +38,22 @@ export const myInfoAPI = (params) => fn(fetch.get(Api.MY_INFO, params));
 /**
  * @description: 角色列表信息
- * @param {*} params 
+ * @param {*} params
- * @returns 
+ * @returns
  */
 export const myPerformerAPI = (params) => fn(fetch.get(Api.MY_PERFORMER, params));
 /**
  * @description: 点赞列表信息
- * @param {*} params 
+ * @param {*} params
- * @returns 
+ * @returns
  */
 export const myLikeAPI = (params) => fn(fetch.get(Api.MY_LIKE, params));
 /**
  * @description: 收藏列表信息
- * @param {*} params 
+ * @param {*} params
- * @returns 
+ * @returns
  */
 export const myFavorAPI = (params) => fn(fetch.get(Api.MY_FAVOR, params));
@@ -60,14 +61,14 @@ export const myFavorAPI = (params) => fn(fetch.get(Api.MY_FAVOR, params));
  * @description: 用户评论列表
  * @param {string} limit
  * @param {string} offset
- * @returns 
+ * @returns
  */
 export const myCommentAPI = (params) => fn(fetch.get(Api.MY_COMMENT, params));
 /**
  * @description: 删除用户评论
  * @param {string} comment_id 评论ID
- * @returns 
+ * @returns
  */
 export const delCommentAPI = (params) => fn(fetch.post(Api.DEL_COMMENT, params));
@@ -75,18 +76,24 @@ export const delCommentAPI = (params) => fn(fetch.post(Api.DEL_COMMENT, params))
  * @description: /@/我的列表
  * @param {string} limit
  * @param {string} offset
- * @returns 
+ * @returns
  */
 export const myAtmeAPI = (params) => fn(fetch.get(Api.MY_ATME, params));
 /**
  * @description: 我的订阅
- * @returns 
+ * @returns
  */
 export const mySubscribeAPI = (params) => fn(fetch.get(Api.MY_SUBSCRIBE, params));
 /**
  * @description: 我的关注
- * @returns 
+ * @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));
--- a/src/views/me/videoList.vue
View file @e64eb4c
+++ b/src/views/me/videoList.vue
View file @e64eb4c
 <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>
+    </van-list>
+    <!-- <template v-for="item in prodList" :key="item" style="height: 3rem">
       <audit-video-card :item="item"></audit-video-card>
-    </template>
+    </template> -->
-    <div style="height: 2rem;"></div>
+    <div style="height: 2rem"></div>
   </div>
-  <van-empty v-if="emptyStatus"
+  <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品" />
-    class="custom-image"
-    :image="no_image"
-    description="暂无作品"
-  />
 </template>
 <script setup>
-import no_image from '@images/que-shuju@2x.png'
+  import no_image from '@images/que-shuju@2x.png';
-import AuditVideoCard from '@/components/AuditVideoCard/index.vue'
+  import AuditVideoCard from '@/components/AuditVideoCard/index.vue';
+  import _ from 'lodash';
-import { ref } from 'vue'
+  import { myProdAPI } from '@/api/C/me.js';
-import axios from '@/utils/axios';
-import { Toast } from 'vant';
-// 处理书籍下作品列表
+  // 处理书籍下作品列表
-const prodList = ref([])
+  const prodList = ref([]);
-// 因为不能让空图标提前出来的写法
+  // 因为不能让空图标提前出来的写法
-const emptyStatus = ref(false);
+  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
-    });
-  }
-})
-.catch(err => {
-  console.error(err); 
-})
-</script>
-<script>
+  const limit = ref(10);
-import mixin from 'common/mixin';
+  const offset = ref(0);
-export default {
+  // 处理书籍下作品列表
-  mixins: [mixin.init],
+  const loading = ref(false);
-  data () {
+  const finished = ref(false);
-    return {
-    }
-  },
-  mounted () {
-  },
+  // 因为不能让空图标提前出来的写法
-  methods: {
+  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;
+      }
+      emptyStatus.value = Object.is(prodList.value.length, 0);
+    }
+  };
 </script>
-<style lang="less" scoped>
+<script>
+  import mixin from 'common/mixin';
+
+  export default {
+    mixins: [mixin.init],
+    data() {
+      return {};
+    },
+    mounted() {},
+    methods: {},
+  };
+</script>
-</style>
+<style lang="less" scoped></style>