hookehuyr

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

<template>
<van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '70%' }">
<div style="position: relative;">
<div class="van-hairline--bottom" style="position: fixed; width: 100%; background-color: white; border-radius: 10px; z-index: 999;">
<div class="van-hairline--bottom"
style="position: fixed; width: 100%; background-color: white; border-radius: 10px; z-index: 999;">
<van-row>
<van-col span="4" @click="onReload">
<div style="padding: 1rem; text-align: center;">
......@@ -9,7 +10,7 @@
</div>
</van-col>
<van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
<span>{{ data.total }}条回复</span>
<span>{{ listTotal }}条回复</span>
</van-col>
<van-col span="4" @click="closeBtn">
<div style="padding: 1rem;">
......@@ -19,7 +20,8 @@
</van-row>
</div>
<div style="height: 4rem;"></div>
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
:immediate-check="false">
<template v-for="(item, key) in replyList" :key="key">
<div class="comment-wrapper">
<van-row style="font-size: 0.9rem;">
......@@ -44,7 +46,8 @@
</template>
</van-list>
</div>
<comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
<comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser"
@on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
</van-popup>
......@@ -60,7 +63,7 @@ import axios from '@/utils/axios';
import _ from 'lodash'
import { Toast } from 'vant';
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, watch } from 'vue'
// 获取是否实名认证
import { idCard } from '@/composables/useValidIdCard.js'
const validIdCard = idCard();
......@@ -70,6 +73,8 @@ const props = defineProps({
data: Object
})
const emit = defineEmits(['on-close']);
/******** 留言框相关操作 START *******/
// 回复评论控件
const showCommentBoxPopup = ref(false);
......@@ -115,22 +120,22 @@ const submitCommentBox = (note) => {
}
}
axios.post(`/srv/?a=${url}`, data)
.then(res => {
if (res.data.code === 1) {
showCommentBoxPopup.value = false;
Toast.success('发布成功')
onReload()
} else {
console.warn(res);
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
})
.then(res => {
if (res.data.code === 1) {
showCommentBoxPopup.value = false;
Toast.success('发布成功')
onReload()
} else {
console.warn(res);
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
})
}
const closeCommentBox = (v) => { // 关闭留言框
......@@ -142,6 +147,7 @@ onMounted(() => {
})
const show = ref(false);
const listTotal = ref(0)
const replyList = ref([])
const loading = ref(false)
const finished = ref(false)
......@@ -159,6 +165,7 @@ const onLoad = () => {
})
.then(res => {
if (res.data.code === 1) {
listTotal.value = res.data.data.total;
replyList.value = _.concat(replyList.value, res.data.data.replylist);
replyList.value = _.uniqBy(replyList.value, 'id');
offset.value = replyList.value.length;
......@@ -188,6 +195,18 @@ const onReload = () => {
const onClose = () => {
show.value = false;
}
// 监听弹出框
watch(() => props.showPopup, (v) => {
show.value = v;
onReload()
});
const closeBtn = () => {
emit('on-close', { comment_id: props.data.id, total: listTotal.value })
show.value = false;
}
</script>
<script>
......@@ -199,18 +218,8 @@ export default {
mounted() {
},
watch: {
showPopup(value, pre) {
if (value) {
this.show = value;
this.onReload()
}
}
},
methods: {
closeBtn() {
this.$emit('on-close', false)
this.show = false;
}
}
}
</script>
......
......@@ -248,7 +248,13 @@ const getReplyList = (v) => {
commentData.value = v;
}
const closeCommentList = (v) => { // 查看更多回复
showCommentListPopup.value = v;
showCommentListPopup.value = false;
// 关闭时返回评论列表ID和总数量,用于静态更新回复总数
_.each(commentList.value, comment => {
if (v.comment_id === comment.id) {
comment.total = v.total;
}
})
}
/******** 查看回复列表操作 END *******/
......