(二十五)、实现评论功能（5）【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
1，实现二级回复的入库操作
1.1 两个子组件（comment-item和comment-frame）与父组件reply之间的属性传值
comment-item：
props: {item: {type: Object,default () {return {}}}},
comment-frame：
props: {commentObj: {type: Object,default: () => {return { }}},placeholder: {type: String,default: "评论点什么吧~"}},
reply：
<!-- 评论回复组件 一级评论 --><view class="top"><comment-item :item="replyItem"></comment-item></view>
<!-- 输入框回复子组件 --><view><comment-frame placeholder="回复 张三"></comment-frame></view>
1.2 引入封装类tools.js中的getName方法
reply：
import {giveName,giveAvatar} from "../../utils/tools.js"
<!-- 输入框回复子组件 --><view><comment-frame :placeholder="`回复：${giveName(this.replyItem)}`"></comment-frame></view>
定义commentObj并赋值：
commentObj:{article_id:"",comment_type:1,reply_user_id:"",reply_comment_id:""},
onLoad(e) {let replyItem = uni.getStorageSync("replyItem");if (!replyItem) return uni.navigateBack();this.replyItem = replyItem || {}this.commentObj.article_id=this.replyItem.article_id;this.commentObj.reply_user_id=this.replyItem.user_id[0]._id;this.commentObj.reply_comment_id=this.replyItem._id;},
2，筛选二级回复的列表数据渲染
2.1 在detail页面筛选一级评论数据
依据quanzi-comment.schema：
"comment_type": {"bsonType": "int","description": "回复类型： 0 针对文章的回复 1 针对评论的回复"},
加入筛选条件comment_type为0的显示在detail一级评论列表中：
let commentTemp = db.collection("quanzi_comment").where(`article_id == "${this.artid}" && comment_type==0`).orderBy("comment_date desc")
2.2 在reply页面中添加方法 获取二级评论数据
//获取二级评论列表async getComment() {let commentTemp = db.collection("quanzi_comment").where(`article_id == "${this.replyItem.article_id}" && comment_type==1`).orderBy("comment_date desc").limit(20).getTemp();let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp()let res = await db.collection(commentTemp, userTemp).get()console.log(res.result.data)},
2.3 在reply页面渲染数据
定义
childReplyArr:[]
赋值：
this.childReplyArr=res.result.data
渲染：
<!-- 评论回复子组件 二级评论 --><view class="list"><view class="row" v-for="item in childReplyArr"><comment-item :item="item"></comment-item></view></view>
评论后实时刷新：
<comment-frame :commentObj="commentObj" @commentEnv="commentEnv" :placeholder="`回复：${giveName(this.replyItem)}`">
//评论成功后的回调commentEnv() {this.childReplyArr = [];this.getComment();},
二次筛选：
let commentTemp = db.collection("quanzi_comment").where(`article_id == "${this.replyItem.article_id}" && comment_type==1 &&
reply_comment_id == "${this.replyItem._id}"`).orderBy("comment_date desc")
3，goupField分组统计回复求和
jql语法 分组统计groupby
//获取当前文章所有评论的idlet idArr = res.result.data.map(item => {return item._id})//分组统计 筛选：回复评论id在所有id中的数据let replyArr = await db.collection("quanzi_comment").where({reply_comment_id: db.command.in(idArr)}).groupBy('reply_comment_id').groupField('count(*) as totalReply').get();console.log(replyArr)
打印输出结果：
//数组对比res.result.data.forEach(item => {let index = replyArr.result.data.findIndex(find => {return find.reply_comment_id == item._id})console.log(index)if (index > -1) item.totalReply = replyArr.result.data[index].totalReply})
打印输出结果：
渲染回复数量：
<view class="reply-btn">{{item.totalReply}}回复 </view>