hookehuyr

✨ feat(作品页留言列表): 关闭回复列表时,更新回复数量

1 <template> 1 <template>
2 <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '70%' }"> 2 <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '70%' }">
3 <div style="position: relative;"> 3 <div style="position: relative;">
4 - <div class="van-hairline--bottom" style="position: fixed; width: 100%; background-color: white; border-radius: 10px; z-index: 999;"> 4 + <div class="van-hairline--bottom"
5 + style="position: fixed; width: 100%; background-color: white; border-radius: 10px; z-index: 999;">
5 <van-row> 6 <van-row>
6 <van-col span="4" @click="onReload"> 7 <van-col span="4" @click="onReload">
7 <div style="padding: 1rem; text-align: center;"> 8 <div style="padding: 1rem; text-align: center;">
...@@ -9,7 +10,7 @@ ...@@ -9,7 +10,7 @@
9 </div> 10 </div>
10 </van-col> 11 </van-col>
11 <van-col span="16" style="color: #222222; text-align: center; line-height: 3;"> 12 <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
12 - <span>{{ data.total }}条回复</span> 13 + <span>{{ listTotal }}条回复</span>
13 </van-col> 14 </van-col>
14 <van-col span="4" @click="closeBtn"> 15 <van-col span="4" @click="closeBtn">
15 <div style="padding: 1rem;"> 16 <div style="padding: 1rem;">
...@@ -19,7 +20,8 @@ ...@@ -19,7 +20,8 @@
19 </van-row> 20 </van-row>
20 </div> 21 </div>
21 <div style="height: 4rem;"></div> 22 <div style="height: 4rem;"></div>
22 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"> 23 + <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
24 + :immediate-check="false">
23 <template v-for="(item, key) in replyList" :key="key"> 25 <template v-for="(item, key) in replyList" :key="key">
24 <div class="comment-wrapper"> 26 <div class="comment-wrapper">
25 <van-row style="font-size: 0.9rem;"> 27 <van-row style="font-size: 0.9rem;">
...@@ -44,7 +46,8 @@ ...@@ -44,7 +46,8 @@
44 </template> 46 </template>
45 </van-list> 47 </van-list>
46 </div> 48 </div>
47 - <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box> 49 + <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser"
50 + @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
48 </van-popup> 51 </van-popup>
49 52
50 53
...@@ -60,7 +63,7 @@ import axios from '@/utils/axios'; ...@@ -60,7 +63,7 @@ import axios from '@/utils/axios';
60 import _ from 'lodash' 63 import _ from 'lodash'
61 import { Toast } from 'vant'; 64 import { Toast } from 'vant';
62 65
63 -import { ref, reactive, onMounted } from 'vue' 66 +import { ref, reactive, onMounted, watch } from 'vue'
64 // 获取是否实名认证 67 // 获取是否实名认证
65 import { idCard } from '@/composables/useValidIdCard.js' 68 import { idCard } from '@/composables/useValidIdCard.js'
66 const validIdCard = idCard(); 69 const validIdCard = idCard();
...@@ -70,6 +73,8 @@ const props = defineProps({ ...@@ -70,6 +73,8 @@ const props = defineProps({
70 data: Object 73 data: Object
71 }) 74 })
72 75
76 +const emit = defineEmits(['on-close']);
77 +
73 /******** 留言框相关操作 START *******/ 78 /******** 留言框相关操作 START *******/
74 // 回复评论控件 79 // 回复评论控件
75 const showCommentBoxPopup = ref(false); 80 const showCommentBoxPopup = ref(false);
...@@ -142,6 +147,7 @@ onMounted(() => { ...@@ -142,6 +147,7 @@ onMounted(() => {
142 }) 147 })
143 148
144 const show = ref(false); 149 const show = ref(false);
150 +const listTotal = ref(0)
145 const replyList = ref([]) 151 const replyList = ref([])
146 const loading = ref(false) 152 const loading = ref(false)
147 const finished = ref(false) 153 const finished = ref(false)
...@@ -159,6 +165,7 @@ const onLoad = () => { ...@@ -159,6 +165,7 @@ const onLoad = () => {
159 }) 165 })
160 .then(res => { 166 .then(res => {
161 if (res.data.code === 1) { 167 if (res.data.code === 1) {
168 + listTotal.value = res.data.data.total;
162 replyList.value = _.concat(replyList.value, res.data.data.replylist); 169 replyList.value = _.concat(replyList.value, res.data.data.replylist);
163 replyList.value = _.uniqBy(replyList.value, 'id'); 170 replyList.value = _.uniqBy(replyList.value, 'id');
164 offset.value = replyList.value.length; 171 offset.value = replyList.value.length;
...@@ -188,6 +195,18 @@ const onReload = () => { ...@@ -188,6 +195,18 @@ const onReload = () => {
188 const onClose = () => { 195 const onClose = () => {
189 show.value = false; 196 show.value = false;
190 } 197 }
198 +
199 +// 监听弹出框
200 +watch(() => props.showPopup, (v) => {
201 + show.value = v;
202 + onReload()
203 +});
204 +
205 +
206 +const closeBtn = () => {
207 + emit('on-close', { comment_id: props.data.id, total: listTotal.value })
208 + show.value = false;
209 +}
191 </script> 210 </script>
192 211
193 <script> 212 <script>
...@@ -199,18 +218,8 @@ export default { ...@@ -199,18 +218,8 @@ export default {
199 mounted() { 218 mounted() {
200 }, 219 },
201 watch: { 220 watch: {
202 - showPopup(value, pre) {
203 - if (value) {
204 - this.show = value;
205 - this.onReload()
206 - }
207 - }
208 }, 221 },
209 methods: { 222 methods: {
210 - closeBtn() {
211 - this.$emit('on-close', false)
212 - this.show = false;
213 - }
214 } 223 }
215 } 224 }
216 </script> 225 </script>
......
...@@ -248,7 +248,13 @@ const getReplyList = (v) => { ...@@ -248,7 +248,13 @@ const getReplyList = (v) => {
248 commentData.value = v; 248 commentData.value = v;
249 } 249 }
250 const closeCommentList = (v) => { // 查看更多回复 250 const closeCommentList = (v) => { // 查看更多回复
251 - showCommentListPopup.value = v; 251 + showCommentListPopup.value = false;
252 + // 关闭时返回评论列表ID和总数量,用于静态更新回复总数
253 + _.each(commentList.value, comment => {
254 + if (v.comment_id === comment.id) {
255 + comment.total = v.total;
256 + }
257 + })
252 } 258 }
253 /******** 查看回复列表操作 END *******/ 259 /******** 查看回复列表操作 END *******/
254 260
......