Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
98776b34 1 parent d8ee70a1

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

Inline Side-by-side
Showing 2 changed files with 116 additions and 40 deletions
...@@ -2,22 +2,24 @@ ...@@ -2,22 +2,24 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-04-28 11:38:10 3 * @Date: 2022-04-28 11:38:10
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-06-10 00:46:57 5 + * @LastEditTime: 2022-09-05 14:18:48
6 * @FilePath: /tswj/src/views/me/collection.vue 6 * @FilePath: /tswj/src/views/me/collection.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
9 <template> 9 <template>
10 <div class="book-video-list"> 10 <div class="book-video-list">
11 - <template v-for="item in prodList" :key="item"> 11 + <!-- <template v-for="item in prodList" :key="item">
12 <video-card :item="item" /> 12 <video-card :item="item" />
13 - </template> 13 + </template> -->
14 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
15 + @load="onLoad">
16 + <template v-for="item in prodList" :key="item">
17 + <video-card :item="item" />
18 + </template>
19 + </van-list>
14 <div style="height: 2rem;" /> 20 <div style="height: 2rem;" />
15 </div> 21 </div>
16 - <van-empty v-if="emptyStatus" 22 + <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无收藏" />
17 - class="custom-image"
18 - :image="no_image"
19 - description="暂无收藏"
20 - />
21 </template> 23 </template>
22 24
23 <script setup> 25 <script setup>
...@@ -42,19 +44,55 @@ const prodList = ref([]) ...@@ -42,19 +44,55 @@ const prodList = ref([])
42 // 因为不能让空图标提前出来的写法 44 // 因为不能让空图标提前出来的写法
43 const emptyStatus = ref(false); 45 const emptyStatus = ref(false);
44 46
45 -onMounted(async () => { 47 +// onMounted(async () => {
46 - // 获取收藏列表 48 +// // 获取收藏列表
47 - const { data } = await myFavorAPI(); 49 +// const { data } = await myFavorAPI();
48 - if (!data.prod.length) { 50 +// if (!data.prod.length) {
49 - emptyStatus.value = true; 51 +// emptyStatus.value = true;
50 - } else { 52 +// } else {
51 - prodList.value = data.prod; 53 +// prodList.value = data.prod;
52 - _.each(prodList.value, (item) => { 54 +// _.each(prodList.value, (item) => {
53 - item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用 55 +// item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
56 +// })
57 +// emptyStatus.value = false;
58 +// }
59 +// });
60 +const limit = ref(100)
61 +const offset = ref(0)
62 +
63 +// 处理书籍下作品列表
64 +const loading = ref(false);
65 +const finished = ref(false);
66 +
67 +// 因为不能让空图标提前出来的写法
68 +const finishedTextStatus = ref(false);
69 +
70 +/**
71 + * 向下滚动查询数据
72 + */
73 +const onLoad = async () => {
74 + // 异步更新数据
75 + const { data, code } = await myFavorAPI({ limit: limit.value, offset: offset.value })
76 + if (code === 1) {
77 + _.each(data.prod, (item) => {
78 + item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
54 }) 79 })
55 - emptyStatus.value = false; 80 + prodList.value = _.concat(prodList.value, data.prod);
81 + prodList.value = _.uniqBy(prodList.value, 'id');
82 + offset.value = prodList.value.length;
83 + loading.value = false;
84 + // 数据全部加载完成
85 + if (prodList.value.length === data.favor_num) {
86 + // 加载状态结束
87 + finished.value = true;
88 + }
89 + // 空数据提示
90 + if (!prodList.value.length) {
91 + finishedTextStatus.value = false;
92 + }
93 + emptyStatus.value = Object.is(prodList.value.length, 0);
56 } 94 }
57 -}); 95 +};
58 </script> 96 </script>
59 97
60 <style lang="less" scoped> 98 <style lang="less" scoped>
......
...@@ -2,22 +2,24 @@ ...@@ -2,22 +2,24 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-06-24 22:12:20 5 + * @LastEditTime: 2022-09-05 14:18:56
6 * @FilePath: /tswj/src/views/me/like.vue 6 * @FilePath: /tswj/src/views/me/like.vue
7 - * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 7 + * @Description:
8 --> 8 -->
9 <template> 9 <template>
10 <div class="book-video-list"> 10 <div class="book-video-list">
11 - <template v-for="item in prodList" :key="item"> 11 + <!-- <template v-for="item in prodList" :key="item">
12 <video-card :item="item" /> 12 <video-card :item="item" />
13 - </template> 13 + </template> -->
14 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
15 + @load="onLoad">
16 + <template v-for="item in prodList" :key="item">
17 + <video-card :item="item" />
18 + </template>
19 + </van-list>
14 <div style="height: 2rem;" /> 20 <div style="height: 2rem;" />
15 </div> 21 </div>
16 - <van-empty v-if="emptyStatus" 22 + <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无点赞" />
17 - class="custom-image"
18 - :image="no_image"
19 - description="暂无点赞"
20 - />
21 </template> 23 </template>
22 24
23 <script setup> 25 <script setup>
...@@ -45,21 +47,57 @@ const prodList = ref([]); ...@@ -45,21 +47,57 @@ const prodList = ref([]);
45 // 因为不能让空图标提前出来的写法 47 // 因为不能让空图标提前出来的写法
46 const emptyStatus = ref(false); 48 const emptyStatus = ref(false);
47 49
48 -onMounted(async () => { 50 +// onMounted(async () => {
49 - // 获取点赞列表 51 +// // 获取点赞列表
50 - const { data } = await myLikeAPI(); 52 +// const { data } = await myLikeAPI();
51 - if (!data.prod.length) { 53 +// if (!data.prod.length) {
52 - emptyStatus.value = true; 54 +// emptyStatus.value = true;
53 - } else { 55 +// } else {
54 - prodList.value = data.prod; 56 +// prodList.value = data.prod;
55 - _.each(prodList.value, (item) => { 57 +// _.each(prodList.value, (item) => {
56 - item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用 58 +// item.type = 'read-only'; // 特殊标识，判断入口 为keepAlive使用
59 +// })
60 +// emptyStatus.value = false;
61 +// }
62 +// });
63 +
64 +const limit = ref(100)
65 +const offset = ref(0)
66 +
67 +// 处理书籍下作品列表
68 +const loading = ref(false);
69 +const finished = ref(false);
70 +
71 +// 因为不能让空图标提前出来的写法
72 +const finishedTextStatus = ref(false);
73 +
74 +/**
75 + * 向下滚动查询数据
76 + */
77 +const onLoad = async () => {
78 + // 异步更新数据
79 + const { data, code } = await myLikeAPI({ limit: limit.value, offset: offset.value })
80 + if (code === 1) {
81 + _.each(data.prod, (item) => {
82 + item.type = 'read-only' // 特殊标识，判断入口 为keepAlive使用
57 }) 83 })
58 - emptyStatus.value = false; 84 + prodList.value = _.concat(prodList.value, data.prod);
85 + prodList.value = _.uniqBy(prodList.value, 'id');
86 + offset.value = prodList.value.length;
87 + loading.value = false;
88 + // 数据全部加载完成
89 + if (prodList.value.length === data.like_num) {
90 + // 加载状态结束
91 + finished.value = true;
92 + }
93 + // 空数据提示
94 + if (!prodList.value.length) {
95 + finishedTextStatus.value = false;
96 + }
97 + emptyStatus.value = Object.is(prodList.value.length, 0);
59 } 98 }
60 -}); 99 +};
61 </script> 100 </script>
62 101
63 <style lang="less" scoped> 102 <style lang="less" scoped>
64 -
65 </style> 103 </style>
......