From 3a90894351aba26a9181e63d2c0df3283bfd734b Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 18 Feb 2022 17:08:45 +0800
Subject: [PATCH] stash

---
 pages/im/group/chat.vue | 158 +++++++++++++++++++---------------------
 1 file changed, 76 insertions(+), 82 deletions(-)

diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index 73ef8b0..27c6763 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -1,24 +1,26 @@
 <template>
     <view class="group--chat">
-        <scroll-view class="body" :show-scrollbar="false">
-            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
-                <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
-                    <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
-                        :src="contact(item.senderUserId).portraitUrl" />
-                    <view class="msg">
-                        <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="contact(item.senderUserId).name" />
-                        <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="contact(item.senderUserId).name" />
-                        <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="contact(item.senderUserId).name" />
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+        <view class="body">
+            <view class="scroll">
+                <view class="cell" v-for="(item, index) in messages" :key="index">
+                    <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}
+                    </view>
+                    <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
+                        <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
+                            :src="contact(item.senderUserId).portraitUrl" />
+                        <view class="msg">
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
+                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                        </view>
                     </view>
                 </view>
             </view>
-            <view class="cell-footer" ref="chatBottom"></view>
-        </scroll-view>
-        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+        </view>
     </view>
 </template>
 
@@ -169,78 +171,70 @@
         background: $window-color;
         height: 100vh;
         display: flex;
-        flex-direction: column;
+        flex-direction: column-reverse;
 
-        .body {
+        .body {
             overflow: scroll;
             flex: 1;
-
-            .cell {
-                padding: 10rpx 30rpx;
-
-                .cell-system {
-                    text-align: center;
-                }
-
-                .cell-item {
-                    display: flex;
-                    flex-direction: row;
-                    width: 690rpx;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    margin-top: 20rpx;
-
-                    &.left {
-                        flex-direction: row;
-                    }
-
-                    &.right {
-                        flex-direction: row-reverse;
-
-                        .state {
-                            flex-direction: row;
-                            justify-content: flex-end;
-                        }
-                    }
-
-                    .avatar {
-                        width: 78rpx;
-                        height: 78rpx;
-                        background-color: white;
-                        border-radius: 10rpx;
-                    }
-
-                    .msg {
-                        margin: 0 20rpx;
-
-                        .user {
-                            font-size: 18rpx;
-                            line-height: 40rpx;
-                        }
-                    }
-                }
-
-                .cell-footer {
-                    height: 20rpx;
-                }
-            }
-        }
-
-        .footer {
-            background: white;
-            padding: 20rpx 30rpx;
+            height: 0;
             display: flex;
-            justify-content: space-between;
-            flex-direction: row;
+            flex-direction: column-reverse;
 
-            .msg-type {
-                width: 70rpx;
-                height: 70rpx;
+            .scroll {
+                display: flex;
+                flex-direction: column-reverse;
+                justify-content: flex-end;
 
-                .icon {
-                    margin: 5rpx;
-                    width: 60rpx;
-                    height: 60rpx;
+                .cell {
+                    padding: 10rpx 30rpx;
+
+                    .cell-system {
+                        text-align: center;
+                        font-size: 24rpx;
+                        color: $text-gray-m;
+                    }
+
+                    .cell-item {
+                        display: flex;
+                        flex-direction: row;
+                        width: 690rpx;
+                        justify-content: flex-start;
+                        align-items: flex-start;
+                        margin-top: 20rpx;
+
+                        &.left {
+                            flex-direction: row;
+                        }
+
+                        &.right {
+                            flex-direction: row-reverse;
+
+                            .state {
+                                flex-direction: row;
+                                justify-content: flex-end;
+                            }
+                        }
+
+                        .avatar {
+                            width: 78rpx;
+                            height: 78rpx;
+                            background-color: white;
+                            border-radius: 10rpx;
+                        }
+
+                        .msg {
+                            margin: 0 20rpx;
+
+                            .user {
+                                font-size: 18rpx;
+                                line-height: 40rpx;
+                            }
+                        }
+                    }
+
+                    .cell-footer {
+                        height: 20rpx;
+                    }
                 }
             }
         }