评论页面制作

一、页面注册

1. 创建页面
2. page.json中进行页面注册
3. 跳转页面时携带指定的文章ID

二、结构样式编写

1. 使用评论组件

    <view class="comment-content-container" v-for="item in commentList" :key="item.comment_id">
         <CommentBox @commnetReply="commnetReply" :commentData="item"></CommentBox>
       </view>
   

   2. 使用uni-load-more组件，对组件内部初始化属性进行调整操作

       <uni-load-more v-if="commentList.length===0 || commentList.length > 5" :status="loading" :contentText="{	contentdown: '上拉显示更多',
      						contentrefresh: '正在加载...',
      						contentnomore: '没有更多评论了'}"></uni-load-more>
      

   3. 根据条件进行评论列表的追加操作

       async _getCommentList () {
            const list = await this.$http.get_comments({
              articleId: this.articleId,
              page: this.page,
              pageSize: this.pageSize,
            })
            if (list.length === 0) {
              this.loading = 'noMore'
              return
            }
            let oldList = JSON.parse(JSON.stringify(this.commentList))
            oldList.push(...list)
            this.commentList = oldList
          },
      

三、添加评论内容输入组件

 <!-- 评论内容输入组件 -->
    <CommentMasker :showPopup="showPopup" @closePopupMasker="showPopup=$event" @sendCommentData="_sendCommentData">
    </CommentMasker>

四、处理评论发布业务

1. 回复事件函数处理

     /* 处理回复事件函数 */
       commnetReply (data) {
         this.replyData = {
           "comment_id": data.comment.comment_id,
           is_reply: data.isReply
         }
         // 当前为回复内容的时候添加回复的ID
         data.comment.reply_id && (this.replyData.reply_id = data.comment.reply_id)
         this.openMaskerComment()
       },
   

2. 副作用事务处理

       async _sendCommentData (content) {
         const {
           msg
         } = await this.$http.update_comment({
           userId: this.userInfo._id,
           articleId: this.articleId,
           content,
           ...this.replyData   // 扩展当前是否为回复指定评论内容
         })
         uni.showToast({
           title: msg
         })
         // 处理副作用事物
         this.showPopup = false;
         this.replyData = {};
         this.page = 1;
         this.commentList = [];
         this._getCommentList();
       }