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"
-          @change="commentInputChange" 
+          v-model="reply"
           :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.init();
+    this.id = options.id
+    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.prefixIcon = ''
+      this.currentComment = comment
       this.reply = '@' + comment.userNickName + ' '
     },
     /**
@@ -265,22 +266,22 @@ export default {
      * 4. 超过7天，显示日期 xxxx年xx月xx日
      */
     formatterTime(time) {
-      const now = new Date();
-      const date = new Date(time);
-      const diff = now - date;
-      const diffMin = Math.floor(diff / 1000 / 60);
-      const diffHour = Math.floor(diff / 1000 / 60 / 60);
-      const diffDay = Math.floor(diff / 1000 / 60 / 60 / 24);
+      const now = new Date()
+      const date = new Date(time)
+      const diff = now - date
+      const diffMin = Math.floor(diff / 1000 / 60)
+      const diffHour = Math.floor(diff / 1000 / 60 / 60)
+      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,
-        atUid: this.currentComment.uid || null,
+        reply: (this.reply.replace('@' + this.currentComment.userNickName, '')).trim(),
+        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));
-      this.getComment();
+      getHotelNewsDetail(this.id).then(({ data }) => (this.item = data))
+      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,
-      });
-      getHotelNewsZan(this.id)
-        .then((res) => {
-          uni.hideLoading();
-          getHotelNewsDetail(this.id).then(({ data }) => (this.item = data));
-        })
-        .catch((err) => {
-          uni.hideLoading();
-        });
-    },
-  },
-};
+        mask: true
+      })
+      getHotelNewsZan(this.id).then((res) => {
+        getHotelNewsDetail(this.id).then(({ data }) => (this.item = data))
+      }).finally(() => {
+        uni.hideLoading()
+      })
+    }
+  }
+}
 </script>
 
 <style lang="less">