群聊页面修正

pages/im/group/chat.vue

@@ -1,8 +1,11 @@
 <template>
-    <view class="group--chat">
+    <view class="chat">
-        <scroll-view class="body" :show-scrollbar="false">
+        <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 class="time" 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" />
@@ -16,9 +19,8 @@
                         </view>
                     </view>
                 </view>
-            <view class="cell-footer" ref="chatBottom"></view>
+            </view>
-        </scroll-view>
+        </view>
-        <sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
     </view>
 </template>
 
@@ -36,8 +38,6 @@
     import showText from '../components/showText'
     import sentMessageBar from '../components/sentMessageBar'
 
-    const ChatList = uni.requireNativePlugin('dom')
-
     export default {
         components: {
             showVoice,
@@ -58,7 +58,7 @@
         computed: {
             latestMessage() {
                 if (this.messages.length) {
-                    return this.messages[this.messages.length - 1]
+                    return this.messages[0]
                 } else {
                     return {
                         sentTime: 0
@@ -125,7 +125,7 @@
                     10,
                     false,
                     (messages) => {
-                        this.messages = this.messages.concat(messages)
+                        this.messages.unshift(...messages)
                         this.scrollBottom()
                     })
             },
@@ -138,7 +138,7 @@
                     20,
                     true,
                     (messages) => {
-                        this.messages = messages.reverse()
+                        this.messages = messages
                         this.scrollBottom()
                     })
             },
@@ -153,42 +153,44 @@
                     // 更新badge提醒数量
                     im.setNotifyBadge()
                 }
-
-                setTimeout(() => {
-                    let el = this.$refs.chatBottom
-                    ChatList.scrollToElement(el, {
-                        offset: 0,
-                        animated: false
-                    })
-                }, 50)
             }
         }
     }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
-    .group--chat {
+    /* 窗口 */
+    .chat {
         background: $window-color;
         height: 100vh;
         display: flex;
-        flex-direction: column;
+        flex-direction: column-reverse;
-        overflow: scroll;
+
         .body {
+            overflow: scroll;
             flex: 1;
+            height: 0;
+            display: flex;
+            flex-direction: column-reverse;
+
+            .scroll {
+                display: flex;
+                flex-direction: column-reverse;
+                justify-content: flex-end;
+
                 .cell {
                     padding: 10rpx 30rpx;
 
-                .cell-system {
+                    .time {
                         text-align: center;
+                        font-size: 24rpx;
+                        color: #666;
                     }
 
                     .cell-item {
                         display: flex;
-                    flex-direction: row;
                         width: 690rpx;
                         justify-content: flex-start;
-                    align-items: flex-start;
-                    margin-top: 20rpx;
 
                         &.left {
                             flex-direction: row;
@@ -203,19 +205,21 @@
                             }
                         }
 
-                    .avatar {
-                        width: 78rpx;
-                        height: 78rpx;
-                        background-color: white;
-                        border-radius: 10rpx;
-                    }
-
                         .msg {
                             margin: 0 20rpx;
 
-                        .user {
+                            .state {
-                            font-size: 18rpx;
+                                padding-top: 10rpx;
-                            line-height: 40rpx;
+
+                                .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;
+                                }
                             }
                         }
                     }
@@ -225,31 +229,6 @@
                     }
                 }
             }
-
-        .footer {
-            background: white;
-            padding: 20rpx 30rpx;
-            display: flex;
-            justify-content: space-between;
-            flex-direction: row;
-
-            .msg-type {
-                width: 70rpx;
-                height: 70rpx;
-
-                .icon {
-                    margin: 5rpx;
-                    width: 60rpx;
-                    height: 60rpx;
         }
     }
-        }
-    }
-    
-    .message-bar{
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
 </style>

pages/im/private/chat.vue

@@ -148,6 +148,7 @@
         }
     }
 </script>
+
 <style scoped lang="scss">
     /* 窗口 */
     .chat {