Showing
1 changed file
with
65 additions
and
8 deletions
| ... | @@ -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; | ... | ... |
-
Please register or login to post a comment