文章详情页面-评论组件制作

当用户为未登录状态，先进行登录界面跳转操作

一、添加三方插件

1. 插件市场内下载插件uni-popup 下载地址：https://ext.dcloud.net.cn/plugin?id=329 (opens new window)

2. 定义弹出层组件CommentMasker，传递是否打开弹窗标识

    <CommentMasker  :showPopup="showPopup"></CommentMasker>
   

3. 完成内容区域结构样式创建

   <style lang="scss">
   .popup-wrapper {
     background-color: #ffffff;
     .popup-header {
       @include flex();
       font-size: 28rpx;
       color: #666;
       border-bottom: 1px #f5f5f5 solid;
       .popup-header-item {
         height: 100rpx;
         line-height: 100rpx;
         padding: 0 30rpx;
       }
     }
     .popup-content {
       width: 100%;
       padding: 30rpx;
       box-sizing: border-box;
       .popup-content-textarea {
         height: 400rpx;
         width: 100%;
       }
       .popup-content-count {
         @include flex(flex-end);
         font-size: 24rpx;
         color: $c-9;
       }
     }
   }
   </style>
   

二、云函数进行评论内容保存

1. 前端进行数据收集,获取用户id，文章id，评论内容

2. 创建云函数,为article进行评论内容追加

     let commentObj = {
       comment_id: generatedId(5),
       comment_content: content,
       create_time: Date.now(),
       is_reply: false,
       author: {
         author_id: user._id,
         author_name: user.author_name,
         avatar: user.avatar,
         professional: user.professional
       },
       replyArr: []
     }
   
     commentObj = dbCmd.unshift({ commentObj })
     await db.collection('article').doc(articleId).update({
       comments: commentObj
     })
   

   ​ 为comment_id指定随机id值

   function generatedId (num) {
       return Number(Math.random().toString().substr(3, num) + Date.now()).toString(36)
     }
   

3. 返回数据到前端，前端进行弹窗关闭操作

      async _sendCommentData (content) {
         const {msg} = await this.$http.update_comment({ articleId: this.articleData._id, userId: this.userInfo._id ,content})
         uni.showToast({
           title:msg,
         })
         this.showPopup = false;
       }