From bf94cca5334d714e9b98b155f36df1a310216966 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Mon, 28 Feb 2022 12:15:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=94=AE=E7=9B=98=E9=AB=98=E5=BA=A6=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=EF=BC=8C=E6=94=B9=E5=96=84=E8=81=8A=E5=A4=A9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=86=85=E5=AE=B9=E5=B0=91=E7=9A=84=E6=97=B6=E5=80=99?=
 =?UTF-8?q?=E6=8E=A8=E5=B1=8F=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BD=86?=
 =?UTF-8?q?=E6=98=AF=E6=9C=89=E7=82=B9=E5=8D=A1=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/conversation/messageCell.vue   |  2 +-
 pages/im/group/chat.vue                       | 25 ++++++--
 pages/im/mixins/imBase.js                     |  3 +
 pages/im/private/chat.vue                     | 57 +++++++++++++------
 utils/im/index.js                             |  3 +-
 5 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/pages/im/components/conversation/messageCell.vue b/pages/im/components/conversation/messageCell.vue
index 25b78a5..7041980 100644
--- a/pages/im/components/conversation/messageCell.vue
+++ b/pages/im/components/conversation/messageCell.vue
@@ -8,7 +8,7 @@
             <view class="header">
                 <view class="name">
                     {{ contact(item.targetId).name }}
-                    <!-- <text v-if="item.conversationType === 3" class='group'>[群]</text> -->
+                    <text v-if="item.conversationType === 3" class='group'>[群]</text>
                 </view>
                 <view class="time">{{ item.sentTime|timeCustomCN }}</view>
             </view>
diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index 9f1a5c1..62c8741 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="chat">
-        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+        <sent-message-bar id="msgbar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
 
         <view class="shade" @click="hidePop" v-show="showPop">
             <view class="pop" :style="popStyle" :class="{'show':showPop}">
@@ -11,7 +11,8 @@
         </view>
 
         <view class="body">
-            <view class="scroll">
+            <view class="place" :style="{ height: placeHeight + 'px' }"></view>
+            <view class="scroll" id="scroll">
                 <view class="cell" v-for="(message, index) in messages" :key="index">
                     <show-message-cell :message="message" isGroup @messageAction="messageAction" />
                 </view>
@@ -51,7 +52,9 @@
                 messages: [],
                 groupInfo: {
                     name: ''
-                }
+                },
+                placeHeight: uni.getSystemInfoSync().windowHeight,
+                bottomHeihgt: 56
             }
         },
         computed: {
@@ -68,7 +71,21 @@
         onShow() {
             this.initGroupInfo()
         },
-        onLoad(e) {
+        onLoad(e) {
+            const query = uni.createSelectorQuery().in(this);
+            this.$nextTick(function() {
+                query.select('#msgbar').boundingClientRect(bottom => {
+                    this.bottomHeihgt = bottom.height
+                }).exec();
+            })
+            // 监听键盘高度变化
+            uni.onKeyboardHeightChange(keyboard => {
+                query.select('#scroll').boundingClientRect(scroll => {
+                    const placeHeight = this.windowHeight - scroll.height - keyboard.height - this
+                        .bottomHeihgt
+                    this.placeHeight = placeHeight > 0 ? placeHeight : 0
+                }).exec();
+            })
             this.targetId = e.targetId
             // 获取历史消息列表
             this.getMessageList()
diff --git a/pages/im/mixins/imBase.js b/pages/im/mixins/imBase.js
index faaf422..fb37af2 100644
--- a/pages/im/mixins/imBase.js
+++ b/pages/im/mixins/imBase.js
@@ -12,6 +12,9 @@ export default {
         },
         sender() {
             return this.$store.getters.sender
+        },
+        windowHeight() {
+            return uni.getSystemInfoSync().windowHeight
         }
     },
     methods: {
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index 24f48ce..ec87b2d 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -1,6 +1,7 @@
 <template>
     <view class="chat">
-        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+        <sent-message-bar id="msgbar" :conversationType="conversationType" :targetId="targetId"
+            @onSuccess="getNewMessage()" />
         <view class="shade" @click="hidePop" v-show="showPop">
             <view class="pop" :style="popStyle" :class="{'show':showPop}">
                 <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
@@ -10,7 +11,8 @@
         </view>
         <!-- chat -->
         <view class="body">
-            <view class="scroll">
+            <view class="place" :style="{ height: placeHeight + 'px' }"></view>
+            <view class="scroll" id="scroll">
                 <view class="cell" v-for="(message, index) in messages" :key="index">
                     <show-message-cell :message="message" @messageAction="messageAction" />
                 </view>
@@ -26,11 +28,11 @@
     import showMessageCell from '../components/showMessageCell'
     import utils from '@/utils/index.js'
     import imBase from '../mixins/imBase.js'
-    import messageActions from '../mixins/messageActions.js'
-    
+    import messageActions from '../mixins/messageActions.js'
+
     export default {
         mixins: [
-            imBase,
+            imBase,
             messageActions
         ],
         components: {
@@ -46,7 +48,9 @@
                     name: '',
                     userId: '',
                     portraitUrl: ''
-                }
+                },
+                placeHeight: uni.getSystemInfoSync().windowHeight,
+                bottomHeihgt: 56
             }
         },
         computed: {
@@ -59,13 +63,27 @@
                     }
                 }
             }
-        },
-        onShow() {
-            uni.setNavigationBarTitle({
-                title: this.contact(this.targetId).name
-            })
         },
-        onLoad(e) {
+        onShow() {
+            uni.setNavigationBarTitle({
+                title: this.contact(this.targetId).name
+            })
+        },
+        onLoad(e) {
+            const query = uni.createSelectorQuery().in(this);
+            this.$nextTick(function() {
+                query.select('#msgbar').boundingClientRect(bottom => {
+                    this.bottomHeihgt = bottom.height
+                }).exec();
+            })
+            // 监听键盘高度变化
+            uni.onKeyboardHeightChange(keyboard => {
+                query.select('#scroll').boundingClientRect(scroll => {
+                    const placeHeight = this.windowHeight - scroll.height - keyboard.height - this
+                        .bottomHeihgt
+                    this.placeHeight = placeHeight > 0 ? placeHeight : 0
+                }).exec();
+            })
             this.targetId = e.targetId
             this.userInfo = this.$store.getters.contactInfo(this.targetId)
             // 获取消息列表
@@ -106,16 +124,19 @@
             })
         },
         onUnload() {
+            uni.offKeyboardHeightChange(res => {
+                console.log('卸载监听键盘高度变化', res);
+            })
             uni.$off('onUserDelete_' + this.targetId)
             uni.$off('onReceiveMessage_' + this.targetId)
             uni.$off('onRecallMessage_' + this.targetId)
             uni.$off('onRecallMessage')
             uni.$off('onReadReceiptReceived')
-        },
-        onNavigationBarButtonTap() {
-            uni.navigateTo({
-                url:'/pages/im/friends/info?targetId='+this.targetId
-            })
+        },
+        onNavigationBarButtonTap() {
+            uni.navigateTo({
+                url: '/pages/im/friends/info?targetId=' + this.targetId
+            })
         },
         methods: {
             getNewMessage() {
@@ -160,6 +181,8 @@
 </script>
 
 <style scoped lang="scss">
+    .place {}
+
     /* 窗口 */
     .chat {
         background: $window-color;
diff --git a/utils/im/index.js b/utils/im/index.js
index 3c39229..6775eb9 100644
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -66,13 +66,14 @@ const connect = (token, userInfo, callback) => {
         store.dispatch('setSenderInfo', userInfo)
         // 设置未读消息数量
         setNotifyBadge()
-        // 首次运行获取好友列表
+        // 首次运行获取好友列表
         const FK = 'ZH_CONTACT_' + userInfo.targetId
 
         uni.getStorage({
             key: FK,
             success: () => {
                 contactModel.find((err, results) => {
+                    console.log('初始化联系人信息', results);
                     results.map(item => {
                         store.dispatch('launchContact', item)
                     })