Fix：3952 【商城小程序】评论输入框跟随文本长度自适应变化

pagesInn/inn/innInfoDetail.vue

@@ -158,12 +158,15 @@
     </view>
     <view class="comment-input-wrap">
       <view style="width: 100%;">
-        <u-input
+        <u-textarea
           @focus="commentInputFocus"
           @change="commentInputChange" 
           :prefixIcon="prefixIcon" 
           class="comment-input" 
+          :showConfirmBar="false"
+          cursorSpacing="15"
           v-model="reply" 
+          autoHeight
           placeholder="分享你的观点，让世界听见你的声音...">
           
           <template slot="prefix">
@@ -177,7 +180,7 @@
               ></u--text>
             </view>
           </template>
-        </u-input>
+        </u-textarea>
       </view>
       <view class="">
         <view class="send-btn v12-primary v12-white-text" @click="sendComment">发送</view>
@@ -234,10 +237,11 @@ export default {
         this.currentComment = {}
         return
       }
-      const split = e.split(' ')
+      // 若删除@用户名，将@用户名整个删除
-      if(split[0] !== '' && this.currentComment.userNickName) {
+      const usernameLength = `@${this.currentComment.userNickName}`.length
+      if(!e.includes(`@${this.currentComment.userNickName}`) && this.currentComment.userNickName) {
         this.currentComment = {}
-        return
+        this.reply = e.slice(usernameLength - 1); // 去除@用户名
       }
     },
     commentInputFocus(e) {
@@ -246,7 +250,7 @@ export default {
     selectComment(comment) {
       this.currentComment = comment;
       // this.prefixIcon = ''
-      this.reply = ' '
+      this.reply = '@' + comment.userNickName + ' '
     },
     /**
      * 格式化时间
@@ -919,4 +923,9 @@ export default {
     box-sizing: border-box;
   }
 }
+.user-info{
+  view{
+    word-break: break-all;
+  }
+}
 </style>

pkg_common/views/message.vue

@@ -59,14 +59,17 @@
     </view>
     <view v-if="showBtn" class="v12-align-center v12-justify-center v12-pa-3 v12-white sticky-bottom">
       <view style="width: 100%">
-        <u-input
+        <u-textarea
           v-model="content"
-          focus
+          @blur="onBlur"
-          @blur="showBtn = false"
           @focus="commentInputFocus"
           @change="commentInputChange"
-          autoBlur
+          :showConfirmBar="false"
+          :focus="autoFocus"
+          autoHeight
           id="input"
+          :cursor="cursorIndex"
+          cursorSpacing="85"
           :customStyle="{
             backgroundColor: '#f7f7f7',
             border: '1px solid #f7f7f7',
@@ -83,7 +86,7 @@
               ></u--text>
             </view>
           </template>
-        </u-input>
+        </u-textarea>
       </view>
       <view class="v12-primary v12-white-text send-btn" @click="replyMessage">
         发送
@@ -119,10 +122,12 @@ export default {
         //   senderTime: '2022-01-01 00:00:00',
         // }
       ], // 消息列表
+      autoFocus: false, // 是否自动聚焦
       webUrl: this.$VUE_APP_RESOURCES_URL, // 资源路径
       showBtn: false, // 是否显示发送按钮
       content: '',
-      currentComment: {}
+      currentComment: {},
+      cursorIndex: 0 // 光标位置
     }
   },
   onShow() {
@@ -147,10 +152,12 @@ export default {
         this.currentComment = {}
         return
       }
-      const split = e.split(' ')
+      
-      if(split[0] !== '' && this.currentComment.senderUserNickname) {
+      // 若删除@用户名，将@用户名整个删除
+      const usernameLength = `@${this.currentComment.senderUserNickname}`.length
+      if(!e.includes(`@${this.currentComment.senderUserNickname}`) && this.currentComment.senderUserNickname) {
         this.currentComment = {}
-        return
+        this.content = e.slice(usernameLength - 1); // 去除@用户名
       }
     },
     commentInputFocus(e) {
@@ -161,14 +168,35 @@ export default {
      */
     showSendBtn(item) {
       this.showBtn = true // 显示发送按钮
-      this.currentComment = item
+      setTimeout(() => { // 延迟100ms，否则无法聚焦
-      this.content = ' ' // 清空输入框
+        this.autoFocus = true // 自动聚焦
+        this.currentComment = item
+        this.content = '@' + item.senderUserNickname + ' '
+        this.cursorIndex = this.content.length // 光标位置
+      }, 100)
+      
+    },
+    /**
+     * 失焦
+     */
+    onBlur() {
+      this.showBtn = false // 隐藏发送按钮
+      this.autoFocus = false // 取消自动聚焦
     },
     /**
      * 回复消息
      * @param {*} item 消息数据
      */
     replyMessage() {
+      console.log(this.currentComment.senderUserNickname);
+      if(!this.currentComment.senderUserNickname) {
+        // 未选择需要回复的用户，提示
+        uni.showToast({
+          title: '请选择需要回复的用户',
+          icon: 'none',
+        })
+        return
+      }
       // 点击弹出回复框，输入回复内容，点击发送按钮，发送回复消息
       uni.showLoading({
         mask: true, // 显示透明蒙层，防止触摸穿透，默认：false
@@ -181,7 +209,7 @@ export default {
       }
       replyMessage(params).then(res => {
         this.fetchList() // 查询消息列表
-        uni.hideLoading
+        uni.hideLoading()
       })
 
     },
@@ -223,4 +251,9 @@ export default {
   background: #fff;
   box-sizing: border-box;
 }
+.user-info{
+  view{
+    word-break: break-all;
+  }
+}
 </style>