hookehuyr

🐞 fix(我的留言): 还原老版本修复页面数据不刷新问题

...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
23 <van-row> 23 <van-row>
24 <van-col> 24 <van-col>
25 <span style="color: #222222;">{{ item.c_action }}<span style="color: #0B3A72;">@{{ item.c_name }}</span>:{{ 25 <span style="color: #222222;">{{ item.c_action }}<span style="color: #0B3A72;">@{{ item.c_name }}</span>:{{
26 - item.note 26 + item.note
27 - }}</span> 27 + }}</span>
28 </van-col> 28 </van-col>
29 </van-row> 29 </van-row>
30 </div> 30 </div>
...@@ -53,24 +53,79 @@ ...@@ -53,24 +53,79 @@
53 <script lang="ts" setup> 53 <script lang="ts" setup>
54 // import { mainStore } from '@/store' 54 // import { mainStore } from '@/store'
55 import { no_image, icon_avatar } from '@/utils/generateIcons.js' 55 import { no_image, icon_avatar } from '@/utils/generateIcons.js'
56 -import { onActivated } from 'vue' 56 +import { ref, onActivated } from 'vue'
57 import { onBeforeRouteLeave } from 'vue-router' 57 import { onBeforeRouteLeave } from 'vue-router'
58 import _ from 'lodash' 58 import _ from 'lodash'
59 import { Toast, Dialog } from 'vant'; 59 import { Toast, Dialog } from 'vant';
60 // import { addPages } from '@/hooks/useKeepAlive' 60 // import { addPages } from '@/hooks/useKeepAlive'
61 import goToVideoDetail from '@/router/methods/videoDetail' 61 import goToVideoDetail from '@/router/methods/videoDetail'
62 -import { delCommentAPI } from '@/api/C/me' 62 +import { myCommentAPI, delCommentAPI } from '@/api/C/me'
63 import { myCommentTimeAPI } from '@/api/C/perf' 63 import { myCommentTimeAPI } from '@/api/C/perf'
64 -import { useMessageList } from '@/composables';
65 -// import { commentListType } from '@/@types/message/interface';
66 -
67 -const { onLoad, scrollList:commentList, loading, finished, finishedTextStatus, emptyStatus, } = useMessageList();
68 64
69 onBeforeRouteLeave(async () => { 65 onBeforeRouteLeave(async () => {
70 // 更新留言阅读情况 66 // 更新留言阅读情况
71 await myCommentTimeAPI({ optr_type: 'my_comment' }); 67 await myCommentTimeAPI({ optr_type: 'my_comment' });
72 }) 68 })
73 69
70 +// 我的留言接口联调
71 +const loading = ref(false);
72 +const finished = ref(false);
73 +interface commentListType {
74 + id: string;
75 + avatar: string;
76 + name: string;
77 + kg_name: string;
78 + comment_time: string;
79 + note: string;
80 + c_action: string;
81 + c_name: string;
82 + cover: string;
83 + prod_id: string;
84 + perf_id: string;
85 + book_id: string;
86 + perf_name: string;
87 + book_name: string;
88 + localism_type: string;
89 + is_new: number;
90 +}
91 +const commentList = ref<commentListType[]>([])
92 +let limit = ref(10);
93 +let offset = ref(0)
94 +
95 +// 因为不能让空图标提前出来的写法
96 +const finishedTextStatus = ref(false);
97 +const emptyStatus = ref(false);
98 +const onLoad = async () => {
99 + const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
100 + //
101 + // _.each(data, item => {
102 + // let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
103 + // item.c_action = arr[0]; // 评论动作
104 + // item.c_name = arr[1]; // 评论姓名
105 + // })
106 + data.forEach((item: { target_name: string | null | undefined; c_action: string; c_name: string; }) => {
107 + let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
108 + item.c_action = arr[0]; // 评论动作
109 + item.c_name = arr[1]; // 评论姓名
110 + });
111 + commentList.value = [...commentList.value, ...data];
112 + // commentList.value = _.uniqBy(commentList.value, 'id');
113 + offset.value = commentList.value.length;
114 + loading.value = false;
115 + // 数据全部加载完成
116 + if (!data.length) {
117 + // 加载状态结束
118 + finished.value = true;
119 + }
120 + // 隐藏loading标识,空列表图标
121 + if (!commentList.value.length) {
122 + finishedTextStatus.value = false;
123 + emptyStatus.value = true;
124 + } else {
125 + emptyStatus.value = false;
126 + }
127 +}
128 +
74 const deleteComment = (id: string) => { // 删除评论 129 const deleteComment = (id: string) => { // 删除评论
75 Dialog.confirm({ 130 Dialog.confirm({
76 title: '温馨提示', 131 title: '温馨提示',
...@@ -109,6 +164,7 @@ onActivated(() => { // keepAlive 重置后执行回调 ...@@ -109,6 +164,7 @@ onActivated(() => { // keepAlive 重置后执行回调
109 color: #999999; 164 color: #999999;
110 padding: 1rem; 165 padding: 1rem;
111 line-height: 1.75; 166 line-height: 1.75;
167 +
112 .reply-wrapper { 168 .reply-wrapper {
113 background: #F7F7F7; 169 background: #F7F7F7;
114 border-radius: 10px; 170 border-radius: 10px;
...@@ -120,6 +176,7 @@ onActivated(() => { // keepAlive 重置后执行回调 ...@@ -120,6 +176,7 @@ onActivated(() => { // keepAlive 重置后执行回调
120 color: #222222; 176 color: #222222;
121 } 177 }
122 } 178 }
179 +
123 .spot { 180 .spot {
124 color: red; 181 color: red;
125 font-size: 2rem; 182 font-size: 2rem;
......