需求:渲染文章详情页底部的评论列表,点击“写回答”,打开评论弹窗,发布一级评论,点击一级评论和二级回复都会打开回复评论弹窗,一级评论进行分页,二级回复不分页,点击展开回复会全部展开。
评论列表前端页面
<div class="uni-comment">
<div class="comment-nums">{{ answerAllCount }}条评论</div>
<div v-for="(item, index) in answerList" :key="index">
<div class="uni-comment-list">
<div class="uni-comment-face">
<img :src="item.wxHeadUrl" />
</div>
<div class="uni-comment-body">
<div @click="giveComment(item.answerId, item)">
<div class="uni-comment-top">
<span class="username">{{ item.username }}</span>
<span class="author" v-if="item.userId == userId">{{
item.userId == userId ? "作者" : ""
}}</span>
</div>
<div class="uni-comment-content">{{ item.answerConment }}</div>
</div>
<div class="uni-comment-date">
<span>{{ item.answerTime }}</span>
<div class="thumb" @click="giveThumb(item)">
<img
src="../../assets/img/topic/topic_post_thumb.png"
alt=""
v-if="Number(item.flowerFlag)"
/>
<img
src="../../assets/img/topic/topic_post_nthumb.png"
alt=""
v-else
/>
{{ item.follwerCount }}
</div>
</div>
</div>
</div>
<div
class="fold"
v-for="(ele, idx) of !item.showMoreReply
? item.childAnswers
: [item.childAnswers[0]]"
:key="idx"
>
<div style="display: flex">
<div class="uni-comment-face">
<img :src="ele.wxHeadUrl" />
</div>
<div class="uni-comment-body">
<div @click="giveComment(ele.answerId, item)">
<div class="uni-comment-top">
<span class="username">{{ ele.username }}</span>
<span class="author" v-if="ele.userId == userId">{{
ele.userId == userId ? "作者" : ""
}}</span>
</div>
<div class="uni-comment-content">
回复 <span>{{ ele.replyToAnswerUserName }}</span
>:{{ ele.answerConment }}
</div>
</div>
<div class="uni-comment-date">
<span>{{ ele.answerTime }}</span>
<div class="thumb" @click="giveThumb(ele)">
<img
src="../../assets/img/topic/topic_post_thumb.png"
alt=""
v-if="Number(ele.flowerFlag)"
/>
<img
src="../../assets/img/topic/topic_post_nthumb.png"
alt=""
v-else
/>
{{ ele.follwerCount }}
</div>
</div>
</div>
</div>
<div class="moreReply" v-show="item.showMoreReply">
<div @click="moreReply(item)">
展开{{ item.answerCount }}条回复
</div>
</div>
</div>
</div>
<div class="moreComment" v-if="answerAllCount">
<div @click="moreComment" v-show="showMoreComment">展开更多评论</div>
</div>
</div>
<div class="fold" v-for="(ele, idx) of !item.showMoreReply ? item.childAnswers : [item.childAnswers[0]]" :key="idx" >
这里在v-for中用了三元表达式实现二级回复多于1条时是否展开收起,注意:如果是在小程序里需要分开写,否则uniapp的小程序里会报如下错:
实时插入回复数据
const giveReply = () => {
//发送回复
data.showComment = false;
questionComment({
toAnswerId: toAnswerId,
conment: data.commentContent,
fatherCommentId: route.query.questionId,
}).then((res) => {
getQuestionDetail();
if (toAnswerId) {
//将二级回复插入到子评论的头部,不刷新发请求
data.currentComment.childAnswers.unshift(res.data);
} else {
//一级评论
data.commentPageNum = 1;
getQuestionComments();
}
data.commentContent = ""; //清空之前评论内容
});
}
这里没有toAnswerId的都是点"写回答"发布的评论,其余评论回复都是实时插入数据,由于要求是按时间倒序排列,所以插入到子评论的头部。