聊天内容输入框显示修改

hdApp/src/admin/chat/chatPage.vue

@@ -44,17 +44,31 @@
     </scroll-view>
 
     <!-- 输入区域 -->
-    <view class="input-area">
+    <view class="input-area" :style="{ 'padding-bottom': keyboardHeight > 0 ? keyboardHeight + 'px' : 'calc(20upx + env(safe-area-inset-bottom))' }">
       <view class="input-wrapper">
-        <input
+        <textarea
           class="message-input"
           v-model="inputText"
           placeholder="请输入消息..."
           :placeholder-style="placeholderStyle"
           @confirm="sendMessage"
+          @focus="onInputFocus"
+          @blur="onInputBlur"
+          @input="onInputChange"
           confirm-type="send"
+          :adjust-position="false"
+          :auto-height="true"
+          :maxlength="500"
+          :show-confirm-bar="false"
         />
-        <button class="send-button" :class="{ 'send-active': inputText.trim() }" @click="sendMessage" :disabled="!inputText.trim()">发送</button>
+        <button
+          class="send-button"
+          :class="{ 'send-active': inputText.trim() }"
+          @click="sendMessage"
+          :disabled="!inputText.trim()"
+        >
+          发送
+        </button>
       </view>
     </view>
   </view>
@@ -90,12 +104,9 @@ export default {
       reconnectCount: 0,
       maxReconnectCount: 3,
       isManualDisconnect: false, // 添加标志位：是否主动断开连接
-      // 调试选项
-      debugOptions: {
-        forceBasic: false, // 强制使用基础参数
-        forceSegmented: false, // 强制使用分段传输
-        logDetails: true // 是否输出详细日志
-      }
+      // 键盘相关
+      keyboardHeight: 0, // 键盘高度
+      isKeyboardShow: false, // 键盘是否显示
     };
   },
   onLoad(options) {
@@ -143,6 +154,21 @@ export default {
     this.$nextTick(() => {
       this.scrollToBottom();
     });
+     
+    // 监听键盘弹起事件
+    uni.onKeyboardHeightChange((res) => {
+      this.keyboardHeight = res.height;
+      this.isKeyboardShow = res.height > 0;
+      
+      // 键盘弹起时，延迟滚动到底部
+      if (this.isKeyboardShow) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.scrollToBottom();
+          }, 300);
+        });
+      }
+    });
   },
   onUnload() {
     // 页面卸载时关闭WebSocket连接
@@ -664,7 +690,32 @@ export default {
       const hours = String(now.getHours()).padStart(2, '0');
       const minutes = String(now.getMinutes()).padStart(2, '0');
       return `${hours}:${minutes}`;
-    }
+    },
+    // 输入框聚焦事件
+    onInputFocus() {
+      console.log('输入框聚焦');
+      // 微信小程序中，聚焦时延迟滚动到底部
+      setTimeout(() => {
+        this.scrollToBottom();
+      }, 300);
+    },
+
+    // 输入框失焦事件
+    onInputBlur() {
+      console.log('输入框失焦');
+    },
+
+    // 输入内容变化事件
+    onInputChange(e) {
+      // 可以在这里处理输入内容的变化，比如限制行数等
+      const value = e.detail.value;
+      // 限制最大行数为5行，避免输入框过高
+      const lines = value.split('\n');
+      if (lines.length > 5) {
+        // 截取前5行
+        this.inputText = lines.slice(0, 5).join('\n');
+      }
+    },
   }
 };
 </script>
@@ -820,18 +871,20 @@ export default {
 
 .input-area {
   background-color: #ffffff;
-  padding: 20upx;
+  padding: 26upx;
+  // margin-bottom: 20upx;
   border-top: 1upx solid $borderColor;
-  // 适配安全区域
-  padding-bottom: calc(20upx + env(safe-area-inset-bottom));
+  // 适配安全区域和键盘高度（通过内联样式动态设置）
+  transition: padding-bottom 0.3s ease;
 }
 
 .input-wrapper {
   display: flex;
   align-items: center;
   background-color: #f8f8f8;
-  border-radius: 50upx;
-  padding: 16upx 20upx;
+  border-radius: 40upx;
+  padding: 14upx 18upx 14upx 18upx;
+  margin-bottom: 30upx;
 }
 
 .message-input {
@@ -840,6 +893,12 @@ export default {
   border: none;
   background-color: transparent;
   outline: none;
+  min-height: 28upx;
+  max-height: 140upx;
+  line-height: 1.4;
+  word-wrap: break-word;
+  word-break: break-all;
+  resize: none;
 
   &::placeholder {
     color: #ccc;
@@ -848,11 +907,11 @@ export default {
 
 .send-button {
   margin-left: 20upx;
-  padding: 12upx 32upx;
+  padding: 10upx 30upx;
   background-color: $fontColor4;
   color: #ffffff;
-  border: none;
-  border-radius: 50upx;
+  border: 1px solid #c9c9c9;
+  border-radius: 30upx;
   font-size: 26upx;
   transition: all 0.3s ease;
 

mallApp/src/pages/chat/chatPage.vue

@@ -61,15 +61,22 @@
     </scroll-view>
 
     <!-- 输入区域 -->
-    <view class="input-area">
+    <view class="input-area" :style="{ 'padding-bottom': keyboardHeight > 0 ? keyboardHeight + 'px' : 'calc(20upx + env(safe-area-inset-bottom))' }">
       <view class="input-wrapper">
-        <input
+        <textarea
           class="message-input"
           v-model="inputText"
           placeholder="请输入消息..."
           :placeholder-style="placeholderStyle"
           @confirm="sendMessage"
+          @focus="onInputFocus"
+          @blur="onInputBlur"
+          @input="onInputChange"
           confirm-type="send"
+          :adjust-position="false"
+          :auto-height="true"
+          :maxlength="500"
+          :show-confirm-bar="false"
         />
         <button
           class="send-button"
@@ -117,6 +124,9 @@ export default {
       reconnectCount: 0,
       maxReconnectCount: 3,
       isManualDisconnect: false, // 添加标志位：是否主动断开连接
+      // 键盘相关
+      keyboardHeight: 0, // 键盘高度
+      isKeyboardShow: false, // 键盘是否显示
     };
   },
   onLoad(options) {
@@ -167,6 +177,21 @@ export default {
     this.$nextTick(() => {
       this.scrollToBottom();
     });
+    
+    // 监听键盘弹起事件
+    uni.onKeyboardHeightChange((res) => {
+      this.keyboardHeight = res.height;
+      this.isKeyboardShow = res.height > 0;
+      
+      // 键盘弹起时，延迟滚动到底部
+      if (this.isKeyboardShow) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.scrollToBottom();
+          }, 300);
+        });
+      }
+    });
   },
   onUnload() {
     // 页面卸载时关闭WebSocket连接
@@ -701,6 +726,32 @@ export default {
       const minutes = String(now.getMinutes()).padStart(2, "0");
       return `${hours}:${minutes}`;
     },
+
+    // 输入框聚焦事件
+    onInputFocus() {
+      console.log('输入框聚焦');
+      // 微信小程序中，聚焦时延迟滚动到底部
+      setTimeout(() => {
+        this.scrollToBottom();
+      }, 300);
+    },
+
+    // 输入框失焦事件
+    onInputBlur() {
+      console.log('输入框失焦');
+    },
+
+    // 输入内容变化事件
+    onInputChange(e) {
+      // 可以在这里处理输入内容的变化，比如限制行数等
+      const value = e.detail.value;
+      // 限制最大行数为5行，避免输入框过高
+      const lines = value.split('\n');
+      if (lines.length > 5) {
+        // 截取前5行
+        this.inputText = lines.slice(0, 5).join('\n');
+      }
+    },
   },
 };
 </script>
@@ -857,17 +908,19 @@ export default {
 .input-area {
   background-color: #ffffff;
   padding: 20upx;
+  // margin-bottom: 20upx;
   border-top: 1upx solid $borderColor;
-  // 适配安全区域
-  padding-bottom: calc(20upx + env(safe-area-inset-bottom));
+  // 适配安全区域和键盘高度（通过内联样式动态设置）
+  transition: padding-bottom 0.3s ease;
 }
 
 .input-wrapper {
   display: flex;
   align-items: center;
   background-color: #f8f8f8;
-  border-radius: 50upx;
-  padding: 16upx 20upx;
+  border-radius: 40upx;
+  padding: 14upx 22upx 14upx 22upx;
+  margin-bottom: 30upx;
 }
 
 .message-input {
@@ -876,6 +929,12 @@ export default {
   border: none;
   background-color: transparent;
   outline: none;
+  min-height: 28upx;
+  max-height: 140upx;
+  line-height: 1.4;
+  word-wrap: break-word;
+  word-break: break-all;
+  resize: none;
 
   &::placeholder {
     color: #ccc;
@@ -884,11 +943,11 @@ export default {
 
 .send-button {
   margin-left: 20upx;
-  padding: 12upx 32upx;
+  padding: 10upx 30upx;
   background-color: $fontColor4;
   color: #ffffff;
-  border: none;
-  border-radius: 50upx;
+  border: 1px solid #c9c9c9;
+  border-radius: 30upx;
   font-size: 26upx;
   transition: all 0.3s ease;