Refactor(评论):1、回复内容应去掉@xxx；2、增加逻辑判断

pagesInn/inn/innInfoDetail.vue

@@ -143,7 +143,7 @@
                   <view class="user-name v12-ml-3">
                     <view class="v12-font-28 v12-dark-text">
                       <text class="v12-dark1-text">{{ "@" +_comment.at.atNickName }}</text>
-                       {{ ' ' + _comment.reply.split(' ')[1] }}
+                       {{ ' ' + _comment.reply }}
                     </view>
                   </view>
                 </view>
@@ -160,17 +160,18 @@
     <view class="comment-input-wrap">
       <view style="width: 100%;">
         <u-textarea
-          @focus="commentInputFocus"
+          v-model="reply"
-          @change="commentInputChange" 
           :prefixIcon="prefixIcon" 
           :maxlength="500"
           :maxheight="200"
-          class="comment-input" 
           :showConfirmBar="false"
-          cursorSpacing="15"
-          v-model="reply"
           :autoHeight="reply.length < 40 ? true : false"
-          placeholder="分享你的观点，让世界听见你的声音...">
+          cursorSpacing="15"
+          placeholder="分享你的观点，让世界听见你的声音..."
+          class="comment-input" 
+          @focus="commentInputFocus"
+          @change="commentInputChange" 
+        >
           
           <template slot="prefix">
             <view class="v12-align-center">
@@ -193,9 +194,8 @@
 </template>
 
 <script>
-import { getHotelNewsDetail, getHotelNewsZan, getCommentList, addComment } from "@/api/inn";
+import { getHotelNewsDetail, getHotelNewsZan, getCommentList, addComment } from "@/api/inn"
 import imgBox from '@/components/imageTypeSet/imagebox.vue'
-
 export default {
   components: {
     imgBox
@@ -210,11 +210,11 @@ export default {
       atUid: '',
       currentComment: {},
       prefixIcon: 'edit-pen'
-    };
+    }
   },
   onLoad(options) {
-    this.id = options.id;
+    this.id = options.id
-    this.init();
+    this.init()
   },
   methods: {
     showMoreComment(comment) {
@@ -223,15 +223,16 @@ export default {
         contentType: "hotelNews",
         rootReplyId: comment.id,
         page: 1,
-        limit: 99999,
+        limit: 99999
       }
       uni.showLoading({
-        mask: true,
+        mask: true
-      });
+      })
       getCommentList(params).then((res) => {
-        uni.hideLoading();
         comment.children = res.data.records
         comment.hasMoreChildren = false
+      }).finally(() => {
+        uni.hideLoading()
       })
     },
     commentInputChange(e) {
@@ -244,15 +245,15 @@ export default {
       const usernameLength = `@${this.currentComment.userNickName} `.length
       if(!e.includes(`@${this.currentComment.userNickName} `) && this.currentComment.userNickName) {
         this.currentComment = {}
-        this.reply = e.slice(usernameLength - 1); // 去除@用户名
+        // 去除@用户名
+        this.reply = e.slice(usernameLength - 1)
       }
     },
     commentInputFocus(e) {
       // this.prefixIcon = ''
     },
     selectComment(comment) {
-      this.currentComment = comment;
+      this.currentComment = comment
-      // this.prefixIcon = ''
       this.reply = '@' + comment.userNickName + ' '
     },
     /**
@@ -265,22 +266,22 @@ export default {
      * 4. 超过7天，显示日期 xxxx年xx月xx日
      */
     formatterTime(time) {
-      const now = new Date();
+      const now = new Date()
-      const date = new Date(time);
+      const date = new Date(time)
-      const diff = now - date;
+      const diff = now - date
-      const diffMin = Math.floor(diff / 1000 / 60);
+      const diffMin = Math.floor(diff / 1000 / 60)
-      const diffHour = Math.floor(diff / 1000 / 60 / 60);
+      const diffHour = Math.floor(diff / 1000 / 60 / 60)
-      const diffDay = Math.floor(diff / 1000 / 60 / 60 / 24);
+      const diffDay = Math.floor(diff / 1000 / 60 / 60 / 24)
       if (diffMin < 1) {
-        return "刚刚";
+        return "刚刚"
       } else if (diffHour < 1) {
-        return diffMin + "分钟前";
+        return diffMin + "分钟前"
       } else if (diffDay < 1) {
-        return diffHour + "小时前";
+        return diffHour + "小时前"
       } else if (diffDay < 7) {
-        return diffDay + "天前";
+        return diffDay + "天前"
       } else {
-        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
+        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
       }
     },
     /**
@@ -294,28 +295,36 @@ export default {
         })
         return
       }
+      if(this.reply.trim() === ('@' + this.currentComment.userNickName)) {
+        // 请输入回复内容
+        uni.showToast({
+          title: '请输入回复内容',
+          icon: 'none'
+        })
+        return
+      }
       uni.showLoading({
-        mask: true,
+        mask: true
-      });
+      })
       const params = {
         contentId: this.id,
         contentType: 'hotelNews',
         parentReplyId: this.currentComment.parentId || this.currentComment.id,
-        reply: this.reply,
+        reply: (this.reply.replace('@' + this.currentComment.userNickName, '')).trim(),
-        atUid: this.currentComment.uid || null,
+        atUid: this.currentComment.uid || null
       }
       addComment(params).then((res) => {
-        console.log(res);
-        uni.hideLoading();
         this.init()
         this.reply = ''
         this.currentComment = {}
         this.item.replyCount === null ? this.item.replyCount = 1 : this.item.replyCount++
+      }).finally(() => {
+        uni.hideLoading()
       })
     },
     init() {
-      getHotelNewsDetail(this.id).then(({ data }) => (this.item = data));
+      getHotelNewsDetail(this.id).then(({ data }) => (this.item = data))
-      this.getComment();
+      this.getComment()
     },
     // contentId int 评论的目标内容ID，必传
     // contentType string 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
@@ -327,28 +336,26 @@ export default {
         contentId: this.id,
         contentType: "hotelNews",
         page: 1,
-        limit: 99999,
+        limit: 99999
       }
       getCommentList(params).then((res) => {
-        console.log(res);
         this.comments = res.data.records
+      }).finally(() => {
+        uni.hideLoading()
       })
     },
     likeInfo() {
       uni.showLoading({
-        mask: true,
+        mask: true
-      });
+      })
-      getHotelNewsZan(this.id)
+      getHotelNewsZan(this.id).then((res) => {
-        .then((res) => {
+        getHotelNewsDetail(this.id).then(({ data }) => (this.item = data))
-          uni.hideLoading();
+      }).finally(() => {
-          getHotelNewsDetail(this.id).then(({ data }) => (this.item = data));
+        uni.hideLoading()
-        })
+      })
-        .catch((err) => {
+    }
-          uni.hideLoading();
+  }
-        });
+}
-    },
-  },
-};
 </script>
 
 <style lang="less">

pkg_common/views/message.vue

@@ -34,16 +34,12 @@
               {{ comment.parentReply }}
             </view>
             <view class="v12-font-28 v12-dark2-text"  @click="toInfo(comment)">
-              <text class="v12-dark1-text">{{ "@" +comment.senderUserNickname }}</text>
+              <text class="v12-dark1-text">{{ "@" + comment.senderUserNickname }}</text>
-              {{ ' ' + comment.reply.split(' ')[1] }}
+              {{ ' ' + comment.reply }}
             </view>
             <view class="v12-mt-3">
-              <u-button 
+              <u-button
-                plain 
-                icon="chat" 
-                shape="circle" 
                 size="normal"
-                @click.stop="showSendBtn(comment)"
                 :customStyle="{
                   backgroundColor: '#eee',
                   width: '160rpx',
@@ -52,8 +48,12 @@
                   color: '#777',
                   margin: 0
                 }"
+                plain 
+                icon="chat" 
+                shape="circle" 
                 iconColor="#777"
-                >回复</u-button>
+                @click.stop="showSendBtn(comment)"
+              >回复</u-button>
             </view>
           </view>
         </view>
@@ -63,23 +63,24 @@
     <view v-if="showBtn" class="v12-align-center v12-justify-center v12-pa-3 v12-white sticky-bottom">
       <view style="width: 100%">
         <u-textarea
+          id="input"
           v-model="content"
           :maxlength="500"
-          @blur="onBlur"
-          @focus="commentInputFocus"
-          @change="commentInputChange"
           :maxheight="200"
           :autoHeight="content.length < 40 ? true : false"
           :showConfirmBar="false"
           :focus="autoFocus"
-          id="input"
           :cursor="cursorIndex"
-          cursorSpacing="85"
           :customStyle="{
             backgroundColor: '#f7f7f7',
             border: '1px solid #f7f7f7',
             borderRadius: '20rpx'
-          }">
+          }"
+          cursorSpacing="85"
+          @blur="onBlur"
+          @focus="commentInputFocus"
+          @change="commentInputChange"
+        >
           <template slot="prefix">
             <view class="v12-align-center">
               <u-icon :name="'edit-pen'"></u-icon>
@@ -93,7 +94,7 @@
           </template>
         </u-textarea>
       </view>
-      <view class="v12-primary v12-white-text send-btn" @click="replyMessage">
+      <view class="v12-primary v12-white-text send-btn" @click="replyMessageHandle">
         发送
       </view>
     </view>
@@ -105,6 +106,7 @@ import { getMessageList, replyMessage } from '@/api/rooms'
 export default {
   data() {
     return {
+      // 消息列表
       list: [
         // parentReply string 被回复的原始评论
         // reply string 回复评论内容
@@ -126,17 +128,21 @@ export default {
         //   senderUserNickname: '张三',
         //   senderTime: '2022-01-01 00:00:00',
         // }
-      ], // 消息列表
+      ],
-      autoFocus: false, // 是否自动聚焦
+      // 是否自动聚焦
-      webUrl: this.$VUE_APP_RESOURCES_URL, // 资源路径
+      autoFocus: false,
-      showBtn: false, // 是否显示发送按钮
+      // 资源路径
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      // 是否显示发送按钮
+      showBtn: false,
       content: '',
       currentComment: {},
-      cursorIndex: 0 // 光标位置
+      // 光标位置
+      cursorIndex: 0
     }
   },
   onShow() {
-    this.fetchList() // 查询消息列表
+    this.fetchList()
   },
   methods: {
     toInfo(comment) {
@@ -160,12 +166,12 @@ export default {
         this.currentComment = {}
         return
       }
-      
       // 若删除@用户名，将@用户名整个删除
       const usernameLength = `@${this.currentComment.senderUserNickname} `.length
       if(!e.includes(`@${this.currentComment.senderUserNickname} `) && this.currentComment.senderUserNickname) {
         this.currentComment = {}
-        this.content = e.slice(usernameLength - 1); // 去除@用户名
+        // 去除@用户名
+        this.content = e.slice(usernameLength - 1)
       }
     },
     commentInputFocus(e) {
@@ -175,34 +181,36 @@ export default {
      * 发送消息
      */
     showSendBtn(item) {
-      console.log(item);
+      // 显示发送按钮
-      
+      this.showBtn = true
-      this.showBtn = true // 显示发送按钮
+      // 延迟100ms，否则无法聚焦
-      setTimeout(() => { // 延迟100ms，否则无法聚焦
+      setTimeout(() => {
-        this.autoFocus = true // 自动聚焦
+        // 自动聚焦
+        this.autoFocus = true
         this.currentComment = item
         this.content = '@' + item.senderUserNickname + ' '
-        this.cursorIndex = this.content.length // 光标位置
+        this.cursorIndex = this.content.length
       }, 100)
-      
     },
     /**
      * 失焦
      */
     onBlur() {
-      this.showBtn = false // 隐藏发送按钮
+      // 隐藏发送按钮
-      this.autoFocus = false // 取消自动聚焦
+      this.showBtn = false
+      // 取消自动聚焦
+      this.autoFocus = false
     },
     /**
      * 回复消息
      * @param {*} item 消息数据
      */
-    replyMessage() {
+    replyMessageHandle() {
       if(!this.currentComment.senderUserNickname) {
         // 未选择需要回复的用户，提示
         uni.showToast({
           title: '请选择需要回复的用户',
-          icon: 'none',
+          icon: 'none'
         })
         return
       }
@@ -210,33 +218,38 @@ export default {
         // 请输入回复内容
         uni.showToast({
           title: '请输入回复内容',
-          icon: 'none',
+          icon: 'none'
         })
         return
       }
       // 点击弹出回复框，输入回复内容，点击发送按钮，发送回复消息
       uni.showLoading({
-        mask: true, // 显示透明蒙层，防止触摸穿透，默认：false
+        mask: true
       })
       const params = {
-        contentId: this.currentComment.contentId, // 评论的目标内容ID，必传
+        // 评论的目标内容ID，必传
-        contentType: 'hotelNews', // 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
+        contentId: this.currentComment.contentId,
-        reply: this.content, // 评论内容，必传
+        // 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
-        atUid: this.currentComment.senderUid, // @的用户ID
+        contentType: 'hotelNews',
-        parentReplyId: this.currentComment.parentReplyId // 回复的评论ID
+        // 评论内容，必传
+        reply: this.content.replace('@' + this.currentComment.senderUserNickname, '').trim(),
+        // @的用户ID
+        atUid: this.currentComment.senderUid,
+        // 回复的评论ID
+        parentReplyId: this.currentComment.parentReplyId
       }
       replyMessage(params).then(res => {
-        this.fetchList() // 查询消息列表
+        this.fetchList()    
+      }).finally(() => {
         uni.hideLoading()
       })
-
     },
     /**
      * 查询消息列表
      */
     fetchList() {
       const params = {
-        page: 1, // 页码
+        page: 1,
         limit: 999999
       }
       getMessageList(params).then(res => {