From d83d27fb605e29b20b646a1595cfbe17948b56c3 Mon Sep 17 00:00:00 2001
From: 15004070936 <1097449274@qq.com>
Date: Wed, 5 Aug 2026 15:48:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=81=8A=E5=A4=A9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=A8=E6=80=81=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/chat/submit.vue |  57 +++++++++--------
 im-var.scss                |   2 +-
 pages/chat/chat.vue        |  17 +++--
 pages/chatbox/chat-box.vue | 126 ++++++++++++++++++++++++-------------
 4 files changed, 129 insertions(+), 73 deletions(-)

diff --git a/components/chat/submit.vue b/components/chat/submit.vue
index aa3a061..ec0c650 100644
--- a/components/chat/submit.vue
+++ b/components/chat/submit.vue
@@ -1,21 +1,21 @@
 <template>
   <view>
-    <view class="submit">
+    <view class="submit" :style="{ bottom: keyboardHeight + 'px' }">
       <view class="submit-chat">
         <view class="bt-img" @tap="records">
           <image :src="toc"></image>
         </view>
         <!-- 文本框 -->
-        <textarea :maxlength="-1" :auto-height="true" :adjust-position="true" confirm-type="send" :cursor-spacing="10"
+        <textarea :maxlength="-1" :auto-height="true" :adjust-position="false" confirm-type="send" :cursor-spacing="10"
                   :selection-start="selectionStart"  :selection-end="selectionEnd" class="chat-send btnt" :class="{displaynone:isrecord}"
                   @confirm="sendMsg" @input="inputs" @focus="focus"  v-model="msg"></textarea>
         <view class="record btn":class="{displaynone:!isrecord}" @touchstart="touchstart" @touchend="touchend"
               @touchmove="touchmove">
           按住说话
         </view>
-        <view class="bt-img" @tap="emoji">
-          <image src="../../static/icon/emote.png"></image>
-        </view>
+<!--        <view class="bt-img" @tap="emoji">-->
+<!--          <image src="../../static/icon/emote.png"></image>-->
+<!--        </view>-->
         <view v-if="ifmore"  class="bt-img" @tap="more">
           <image src="../../static/icon/more.png"></image>
         </view>
@@ -94,6 +94,7 @@ export default {
       ifmore: true,
       voicebg: false,
       pageY: 0,
+      keyboardHeight:0,
       msg: "",
       // 直接引用地址可能出不来，需要用require
       toc: require('../../static/icon/voice.png'),
@@ -106,11 +107,15 @@ export default {
   methods: {
     //获取高度方法
     getElementHeight() {
-      const query = uni.createSelectorQuery().in(this);
-      query.select('.submit').boundingClientRect(data => {
-        console.log(data.height)
-        this.$emit('heights', data.height);
-      }).exec();
+      // if (this.heightTimer ) clearTimeout(this.heightTimer);
+      // this.heightTimer = setTimeout(() => {
+        const query = uni.createSelectorQuery().in(this);
+        query.select('.submit').boundingClientRect(data => {
+          if (data) {
+            this.$emit('heights', data.height);
+          }
+        }).exec();
+      // }, 30);
     },
     //切换音频
     records() {
@@ -120,7 +125,7 @@ export default {
       //切换高度
       setTimeout(() => {
         this.getElementHeight();
-      }, 10)
+      })
       if (this.isrecord) {
         this.isrecord = false;
         this.toc = require("../../static/icon/voice.png");
@@ -140,7 +145,7 @@ export default {
       //切换高度
       setTimeout(() => {
         this.getElementHeight();
-      }, 10)
+      })
     },
     //接收表情
     emotion(e) {
@@ -183,11 +188,10 @@ export default {
       console.log('focus');
       //关闭其他项
       // this.isemoji = false;
-      // this.ismore = false;
+      if (this.ismore){
+        this.ismore = false;
+      }
 
-      setTimeout(() => {
-        this.getElementHeight()
-      }, 10);
     },
     // 表情内发送
     emojiSend() {
@@ -213,9 +217,9 @@ export default {
       this.isemoji = false
       this.isrecord = false;
       this.toc = require("../../static/icon/voice.png");
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.getElementHeight();
-      }, 10)
+      })
     },
     choseProduct(type){
         if (type==='order'){
@@ -225,8 +229,6 @@ export default {
         }
 
 
-
-
     },
     // 视频录像
     chooseVideo(){
@@ -422,15 +424,18 @@ export default {
      * 关闭所有弹出面板（表情、更多），并收起键盘
      */
     closeAll() {
-      this.isemoji = false;
+
+      var flag =this.ismore || this.isrecord;
       this.ismore = false;
       this.isrecord = false;   // 如果录音面板开着，也关闭
       this.toc = require("../../static/icon/voice.png");
       uni.hideKeyboard();      // 强制收起键盘
       // 重新计算高度（通知父组件）
-      this.$nextTick(() => {
-        this.getElementHeight();   // 确保 DOM 更新后测量
-      });
+      if (flag){
+        this.$nextTick(() => {
+          this.getElementHeight();    // 确保 DOM 更新后测量
+        });
+      }
     }
   }
 };
@@ -444,8 +449,8 @@ export default {
   position: fixed;
   bottom: 0;
   z-index: 999;
-  padding-bottom: var(--status-bar-height);
-  // padding-bottom: env(safe-area-inset-bottom);
+  //padding-bottom: var(--status-bar-height);
+   padding-bottom: env(safe-area-inset-bottom);
 }
 
 .displaynone {
diff --git a/im-var.scss b/im-var.scss
index ed1ece4..ed6d0e9 100644
--- a/im-var.scss
+++ b/im-var.scss
@@ -57,4 +57,4 @@ $im-title-size-2: 18px;
 
 $font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 
-$im-nav-bar-height: 45px;
+$im-nav-bar-height: 50px;
diff --git a/pages/chat/chat.vue b/pages/chat/chat.vue
index 8f7cf4e..8a2fe71 100644
--- a/pages/chat/chat.vue
+++ b/pages/chat/chat.vue
@@ -1,10 +1,19 @@
 <template>
 	<view class="content">
 		<!-- 聊天内容 -->
-		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView"
-		    refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100"
-			refresher-background="#f0f0f0" @refresherpulling="onPulling"
-			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
+		<scroll-view
+        class="chat"
+        scroll-y="true"
+        scroll-with-animation="true"
+        :scroll-into-view="scrollToView"
+		    refresher-enabled="true"
+        :refresher-triggered="triggered"
+        :refresher-threshold="100"
+			  refresher-background="#f0f0f0"
+        @refresherpulling="onPulling"
+			  @refresherrefresh="onRefresh"
+        @refresherrestore="onRestore"
+        @refresherabort="onAbort">
 			<view class="chat-main" :style="{paddingBottom:inputh+'px'}">
 				<!-- <view class="chat-ls" v-if="unshiftmsg.length==0">
 					<view class="chat-time">现在可以开始聊天了.</view>
diff --git a/pages/chatbox/chat-box.vue b/pages/chatbox/chat-box.vue
index 246d23a..3fea22c 100644
--- a/pages/chatbox/chat-box.vue
+++ b/pages/chatbox/chat-box.vue
@@ -1,35 +1,37 @@
 <template>
   <!-- 模板完全保持不变，与原来一致 -->
   <view class=" chat-box"  id="chatBox">
-<!--   <nav-bar  more @more="onShowMore">{{ title }}</nav-bar> -->
     <view class="chat-main-box"  :style="{height: chatMainHeight+'px'}" >
-      <view class="chat-message" @click="switchChatTabBox('none')"  :style="{ paddingBottom: bottomPadding + 'px' }" >
-        <scroll-view class="scroll-box" scroll-y="true" upper-threshold="200" @scrolltoupper="onScrollToTop"
-                     :scroll-into-view="'chat-item-' + scrollMsgIdx" >
+    <view class="chat-message" @click="switchChatTabBox('none')"  >
+        <scroll-view class="scroll-box"
+                     scroll-y="true"
+                     upper-threshold="200"
+                     @scrolltoupper="onScrollToTop"
+                     :scroll-into-view="scrollTarget"
+        >
+
           <view v-if="chat" v-for="(msgInfo, idx) in chat.messages" :key="idx">
             <chat-message-item :ref="'message'+msgInfo.id" v-if="idx >= showMinIdx"
-                               :headImage="headImage(msgInfo)" @call="onRtCall(msgInfo)" :showName="showName(msgInfo)"
-                               @recall="onRecallMessage" @delete="onDeleteMessage" @copy="onCopyMessage"
-                               @longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile"
-                               @audioStateChange="onAudioStateChange" :id="'chat-item-' + idx" :msgInfo="msgInfo"
+                               :headImage="headImage(msgInfo)"
+                               @call="onRtCall(msgInfo)"
+                               :showName="showName(msgInfo)"
+                               @recall="onRecallMessage"
+                               @delete="onDeleteMessage"
+                               @copy="onCopyMessage"
+                               @longPressHead="onLongPressHead(msgInfo)"
+                               @download="onDownloadFile"
+                               @audioStateChange="onAudioStateChange"
+                               :id="'chat-item-' + idx"
+                               :msgInfo="msgInfo"
                                :groupMembers="groupMembers">
             </chat-message-item>
           </view>
+          <view id="chat-bottom" style="height: 2rpx;"></view>
         </scroll-view>
-        <view v-if="!isInBottom" class="scroll-to-bottom" @click="onClickToBottom">
+       <view v-if="!isInBottom" class="scroll-to-bottom" @click="onClickToBottom">
           {{ newMessageSize > 0 ?  newMessageSize+'条新消息' :'回到底部'}}
         </view>
       </view>
-<!--      <view v-if="atUserIds.length > 0" class="chat-at-bar" @click="openAtBox()">-->
-<!--        <view class="iconfont icon-at">&nbsp;</view>-->
-<!--        <scroll-view v-if="atUserIds.length > 0" class="chat-at-scroll-box" scroll-x="true" scroll-left="120">-->
-<!--          <view class="chat-at-items">-->
-<!--            <view v-for="m in atUserItems" class="chat-at-item" :key="m.userId">-->
-<!--              <head-image :name="m.showNickName" :url="m.headImage" size="minier"></head-image>-->
-<!--            </view>-->
-<!--          </view>-->
-<!--        </scroll-view>-->
-<!--      </view>-->
       <submit  ref="submitRef" @inputs="onInputs"  @send-message="onSendMessage" @heights="onHeights" />
     </view>
   </view>
@@ -49,17 +51,22 @@ export default {
   },
   data() {
     return {
+      scrollTarget: '',
       chat: {},
       userInfo: {},
       group: {},
+      moreHeight:0,
       groupMembers: [],
       isReceipt: true,
       scrollMsgIdx: 0,
+      scrollTop:0,
       chatTabBox: 'none',
       showRecord: false,
       chatMainHeight: 0,
-      bottomPadding: 50,
-      keyboardHeight: 290,
+      bottomPadding: 0,
+      keyboardHeight: 0,
+      topOffset: 0,
+      submitHeight: 0,
       windowHeight: 1000,
       initHeight: 1000,
       atUserIds: [],
@@ -189,7 +196,7 @@ export default {
     this.$nextTick(() => {
       this.windowHeight = uni.getSystemInfoSync().windowHeight;
       this.reCalChatMainHeight();
-      this.scrollToBottom();
+
       // #ifdef H5
       this.initHeight = window.innerHeight;
       const chatBox = document.getElementById('chatBox');
@@ -207,7 +214,7 @@ export default {
     }
 	this.setBadge();
   },
-  
+
   methods: {
     // 映射 Vuex actions
     ...mapActions('chatStore', [
@@ -227,13 +234,13 @@ export default {
 	// 设置app角标
 	setBadge() {
 			 var count = myCache("massageCount")?myCache("massageCount"):-1;
-			  if (count > 0) { 
+			  if (count > 0) {
 				// app清除角标的数量
 				//#ifdef APP-PLUS
 				plus.runtime.setBadgeNumber(count);
 				//#endif
-				
-			  } else { 
+
+			  } else {
 				// app清除角标的数量
 				//#ifdef APP-PLUS
 				plus.runtime.setBadgeNumber(-1);
@@ -304,9 +311,14 @@ export default {
      * @param {number} height - submit 组件总高度（px）
      */
     onHeights(height) {
-      this.bottomPadding = height;
-      // 若需同步滚动到底部，可在此调用
-      this.scrollToBottom();
+      if (height>60){
+        this.moreHeight=height-58
+        this.chatMainHeight -= this.moreHeight;
+        this.scrollToBottom();
+      }else {
+        this.moreHeight=0;
+        this.reCalChatMainHeight();
+      }
     },
 
     // 扩展的上传发送方法（类似 submit 中原有的 uploadFile 逻辑）
@@ -687,10 +699,16 @@ export default {
       }
     },
     scrollToBottom() {
-      const size = this.messageSize;
-      if (size > 0) {
-        this.scrollToMsgIdx(size - 1);
-      }
+      this.scrollTarget = '';
+      this.$nextTick(() => {
+        this.scrollTarget = 'chat-bottom'; // 足够大
+      });
+
+      // let size = this.messageSize;
+      // if (size > 0) {
+      //   this.scrollToMsgIdx(size - 1);
+      //
+      // }
     },
     scrollToMsgIdx(idx) {
       if (idx === this.scrollMsgIdx && idx > 0) {
@@ -714,10 +732,11 @@ export default {
     },
     switchChatTabBox(type) {
       this.chatTabBox = type;
-      this.reCalChatMainHeight();
+      // this.reCalChatMainHeight();
       uni.hideKeyboard();
       // 通知 submit 组件关闭其内部面板
       if (this.$refs.submitRef) {
+        this.moreHeight=0;
         this.$refs.submitRef.closeAll();
       }
       // if (type !== 'tools' && this.$refs.fileUpload) {
@@ -886,6 +905,7 @@ export default {
       }, 100);
     },
     onScrollToTop() {
+      console.log("lalal...........")
       if (this.showMinIdx > 0) {
         // #ifndef H5
         this.scrollToMsgIdx(this.showMinIdx);
@@ -1006,20 +1026,26 @@ export default {
       setTimeout(() => {
         let h = this.windowHeight;
         // 减去标题栏高度
-        h -= 0;
+        h -= 25;
         // 减去键盘高度
         // if (this.isShowKeyBoard || this.chatTabBox !== 'none') {
         //   h -= this.keyboardHeight;
-        //   this.scrollToBottom();
+        //   console.log("3h",h)
+          // this.scrollToBottom();
         // }
         // #ifndef H5
         // h5需要减去状态栏高度
         h -= uni.getSystemInfoSync().statusBarHeight;
+
         // #endif
         this.chatMainHeight = h;
-        if (this.isShowKeyBoard || this.chatTabBox !== 'none') {
+        // if (this.isShowKeyBoard || this.chatTabBox !== 'none') {
+        //   this.scrollToBottom();
+        // }
+        this.$nextTick(() => {
           this.scrollToBottom();
-        }
+        });
+
         // #ifdef H5
         if (uni.getSystemInfoSync().platform === 'ios') {
           [50, 100, 500].forEach(delay => {
@@ -1030,6 +1056,7 @@ export default {
         }
         // #endif
       }, 30);
+
     },
     listenKeyBoard() {
       // #ifdef H5
@@ -1050,6 +1077,7 @@ export default {
       // #ifndef H5
       uni.onKeyboardHeightChange(this.keyBoardListener);
       // #endif
+
     },
     unListenKeyboard() {
       // #ifdef H5
@@ -1060,13 +1088,26 @@ export default {
       // #ifndef H5
       uni.offKeyboardHeightChange(this.keyBoardListener);
       // #endif
+
     },
     keyBoardListener(res) {
       this.isShowKeyBoard = res.height > 0;
-      if (this.isShowKeyBoard) this.keyboardHeight = res.height;
-      this.reCalChatMainHeight();
+
+      if (this.isShowKeyBoard)
+      {
+
+        this.chatMainHeight -= (res.height-this.moreHeight);
+        this.$refs.submitRef.keyboardHeight=res.height;
+        this.scrollToBottom();
+      }else {
+        this.$refs.submitRef.keyboardHeight=0;
+        this.reCalChatMainHeight();
+      }
+    console.log('kb.chatMainHeight ',this.chatMainHeight )
+    console.log('this.morehight ',this.moreHeight )
     },
     resizeListener() {
+      console.log("123")
       let height = this.initHeight - window.innerHeight;
       if (window.visualViewport && uni.getSystemInfoSync().platform === 'ios') {
         height = this.initHeight - window.visualViewport.height;
@@ -1077,10 +1118,12 @@ export default {
       this.reCalChatMainHeight();
     },
     focusInListener() {
+      console.log("456")
       this.isShowKeyBoard = true;
       this.reCalChatMainHeight();
     },
     focusOutListener() {
+      console.log("789")
       this.isShowKeyBoard = false;
       this.reCalChatMainHeight();
     },
@@ -1134,9 +1177,8 @@ export default {
 
       .scroll-to-bottom {
         position: absolute;
-        //
         right: 30rpx;
-        //bottom: 30rpx;
+        bottom: 30rpx;
         font-size: $im-font-size;
         color: $im-color-primary;
         font-weight: 600;