From e95721763528b5c586f7c82601db20223a55535e Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 18 Feb 2022 17:02:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=88=97=E8=A1=A8=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0=E5=BA=95=EF=BC=8C=E5=A6=82=E6=9E=9C=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=95=B0=E6=8D=AE=E8=BE=83=E7=9F=AD=E7=9A=84=E6=97=B6?=
 =?UTF-8?q?=E5=80=99=EF=BC=8C=E8=BF=98=E6=B2=A1=E6=9C=89=E5=A5=BD=E5=8A=9E?=
 =?UTF-8?q?=E6=B3=95=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                |   5 +-
 pages/im/private/chat.vue | 129 +++++++++++++++++++-------------------
 2 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/pages.json b/pages.json
index 6179384..79e4cef 100644
--- a/pages.json
+++ b/pages.json
@@ -374,7 +374,10 @@
             "path": "pages/im/private/chat",
             "style": {
                 "navigationBarTitleText": "聊天",
-                "navigationBarBackgroundColor": "#F3F6FB"
+                "navigationBarBackgroundColor": "#F3F6FB",
+                "app-plus": {
+                    "bounce": "none"
+                }
             }
         },
         {
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index ec7131d..c49c8b7 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -1,29 +1,31 @@
 <template>
     <view class="chat">
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
         <!-- chat -->
         <view class="body">
-            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="time">{{ item.sentTime|timeCustomCN }}</view>
-                <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
-                    <u-avatar class="avatar" size="40" shape="square"
-                        @click="showUser(item.senderUserId, item.messageDirection)"
-                        :src="contact(item.senderUserId).portraitUrl" />
-                    <view class="msg">
-                        <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" />
-                        <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" />
-                        <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" />
-                        <view class="state" v-if="item.messageDirection == 1">
-                            <text
-                                :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
+            <view class="scroll">
+                <view class="cell" v-for="(item, index) in messages" :key="index">
+                    <view class="time">{{ item.sentTime|timeCustomCN }}</view>
+                    <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
+                        <u-avatar class="avatar" size="40" shape="square"
+                            @click="showUser(item.senderUserId, item.messageDirection)"
+                            :src="contact(item.senderUserId).portraitUrl" />
+                        <view class="msg">
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" />
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" />
+                            <view class="state" v-if="item.messageDirection == 1">
+                                <text
+                                    :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
+                            </view>
                         </view>
                     </view>
                 </view>
             </view>
         </view>
-        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
     </view>
 </template>
 
@@ -108,10 +110,9 @@
                     this.latestMessage.sentTime || 0,
                     1,
                     false,
-                    (messages) => {
-                        console.log(messages);
+                    (messages) => {
                         this.messages.unshift(...messages)
-                        // this.scrollBottom()
+                        this.scrollBottom()
                     })
             },
             // 获取消息列表
@@ -124,7 +125,7 @@
                     true,
                     (messages) => {
                         this.messages = messages
-                        // this.scrollBottom()
+                        this.scrollBottom()
                     })
             },
             // 展示好友信息,  type 1 是自己， 2 是对方
@@ -145,13 +146,6 @@
                     // 更新badge提醒数量
                     im.setNotifyBadge()
                 }
-                setTimeout(() => {
-                    let el = this.$refs.chatBottom
-                    ChatList.scrollToElement(el, {
-                        offset: 0,
-                        animated: false
-                    })
-                }, 50)
             }
         }
     }
@@ -160,65 +154,72 @@
 <style scoped lang="scss">
     /* 窗口 */
     .chat {
+        background: $window-color;
         height: 100vh;
         display: flex;
-        flex-direction: column;
-        overflow: scroll;
+        flex-direction: column-reverse;
 
         .body {
+            overflow: scroll;
             flex: 1;
+            height: 0;
             display: flex;
             flex-direction: column-reverse;
-            justify-content: flex-end;
 
-            .cell {
-                padding: 10rpx 30rpx;
+            .scroll {
+                display: flex;
+                flex-direction: column-reverse;
+                justify-content: flex-end;
 
-                .time {
-                    text-align: center;
-                    font-size: 24rpx;
-                    color: #666;
-                }
+                .cell {
+                    padding: 10rpx 30rpx;
 
-                .cell-item {
-                    display: flex;
-                    width: 690rpx;
-                    justify-content: flex-start;
-
-                    &.left {
-                        flex-direction: row;
+                    .time {
+                        text-align: center;
+                        font-size: 24rpx;
+                        color: #666;
                     }
 
-                    &.right {
-                        flex-direction: row-reverse;
+                    .cell-item {
+                        display: flex;
+                        width: 690rpx;
+                        justify-content: flex-start;
 
-                        .state {
+                        &.left {
                             flex-direction: row;
-                            justify-content: flex-end;
                         }
-                    }
 
-                    .msg {
-                        margin: 0 20rpx;
+                        &.right {
+                            flex-direction: row-reverse;
 
-                        .state {
-                            padding-top: 10rpx;
-
-                            .state-text {
-                                font-size: $title-size-m - 2;
-                                color: rgba($color: $main-color, $alpha: 0.3)
+                            .state {
+                                flex-direction: row;
+                                justify-content: flex-end;
                             }
+                        }
 
-                            .state-text-active {
-                                font-size: $title-size-m - 2;
-                                color: #cecece;
+                        .msg {
+                            margin: 0 20rpx;
+
+                            .state {
+                                padding-top: 10rpx;
+
+                                .state-text {
+                                    font-size: $title-size-m - 2;
+                                    color: rgba($color: $main-color, $alpha: 0.3)
+                                }
+
+                                .state-text-active {
+                                    font-size: $title-size-m - 2;
+                                    color: #cecece;
+                                }
                             }
                         }
                     }
-                }
 
-                .cell-footer {
-                    height: 20rpx;
+                    .cell-footer {
+                        height: 20rpx;
+                    }
                 }
             }
         }