用户评论及回复功能

需求：渲染文章详情页底部的评论列表，点击“写回答”，打开评论弹窗，发布一级评论，点击一级评论和二级回复都会打开回复评论弹窗，一级评论进行分页，二级回复不分页，点击展开回复会全部展开。

评论列表前端页面

   <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的都是点"写回答"发布的评论，其余评论回复都是实时插入数据，由于要求是按时间倒序排列，所以插入到子评论的头部。