From f8c3933e831cd1a659d6ccf2361c527bf48fdeb9 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Fri, 18 Feb 2022 17:20:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E8=AE=B0=E5=B7=B2=E8=AF=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/conversationList.vue |   7 +-
 pages/im/private/chat.vue                | 197 ++++++++++++-----------
 2 files changed, 108 insertions(+), 96 deletions(-)

diff --git a/pages/im/components/conversationList.vue b/pages/im/components/conversationList.vue
index 2468e8a..bf3cab8 100644
--- a/pages/im/components/conversationList.vue
+++ b/pages/im/components/conversationList.vue
@@ -39,7 +39,7 @@
                 /* 显示操作弹窗 */
                 showPop: false,
                 /* 弹窗按钮列表 */
-                popButton: ['置顶聊天', '删除该聊天'],
+                popButton: ['置顶聊天', '标记已读', '删除该聊天'],
                 /* 弹窗定位样式 */
                 popStyle: "",
                 pickedItem: {},
@@ -72,6 +72,9 @@
                 if (index == 0) {
                     RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
                         .pickedItem.isTop)
+                } else if (index == 1) {
+                    RongIMLib.clearMessagesUnreadStatus(this.pickedItem.conversationType, this.pickedItem.targetId, this
+                        .pickedItem.sentTime)
                 } else {
                     RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
                     RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
@@ -96,8 +99,6 @@
                     style += `left:${touches.clientX}px`
                 }
 
-
-
                 this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
                 this.popStyle = style
                 this.pickedItem = item
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index 05b6128..73c452b 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -1,87 +1,33 @@
-
-<style scoped lang="scss">
-    .chat {
-        height: 100vh;
-        overflow: scroll;
-        display: flex;
-        flex-direction: column;
-        .chat-scroll{
-            display: flex;
-            flex: 1;
-            flex-direction: column-reverse;
-            justify-content: flex-end;
-            .cell{
-                padding: $padding/2 $padding;
-                .time{
-                    text-align: center;
-                    text{
-                        color: $text-gray;
-                        font-size: $title-size-sm;
-                    }
-                }
-                .cell-item{
-                    display: flex;
-                    align-items: flex-start;
-                    &.left{
-                        flex-direction: row-reverse;
-                        .avatar{
-                            margin-right: 20rpx;
-                        }
-                    }
-                    &.right{
-                        flex-direction: row-reverse;
-                        .avatar{
-                            margin-left: 20rpx;
-                        }
-                        .state{
-                            text-align: right;
-                            font-size: 24rpx;
-                        }
-                    }
-                }
-            }
-        }
-        .message-bar{
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-        }
-    }
-</style>
-
 <template>
-    <view class="chat">
-        <!-- chat -->
-        <view class="chat-scroll">
-            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="time">
-                    <text>{{ item.sentTime|timeCustomCN }}</text>
-                </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 id="chatBottom"></view>
-        </view>
-        <!-- footer -->
-        <sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+    <view class="chat">
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+        <!-- chat -->
+        <view class="body">
+            <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>
     </view>
 </template>
-
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
@@ -89,7 +35,6 @@
     import showImage from '../components/showImage'
     import showText from '../components/showText'
     import sentMessageBar from '../components/sentMessageBar'
-
     export default {
         components: {
             sentMessageBar,
@@ -125,7 +70,7 @@
                 }
             }
         },
-        onLoad(e) {        
+        onLoad(e) {
             this.targetId = e.targetId
             this.userInfo = this.$store.getters.contactInfo(this.targetId)
             uni.setNavigationBarTitle({
@@ -189,7 +134,7 @@
                 })
             },
             // 滚动到底部
-            scrollBottom(type) {
+            scrollBottom(type) {
                 if (this.latestMessage) {
                     // 清理当前会话，未读消息数量
                     RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
@@ -198,16 +143,82 @@
                     RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
                     // 更新badge提醒数量
                     im.setNotifyBadge()
-                }
-                
-                setTimeout(() => {
-                    let el = this.$refs.chatBottom
-                    ChatList.scrollToElement(el, {
-                        offset: 0,
-                        animated: false
-                    })
-                }, 50)
+                }
             }
         }
     }
 </script>
+<style scoped lang="scss">
+    /* 窗口 */
+    .chat {
+        background: $window-color;
+        height: 100vh;
+        display: flex;
+        flex-direction: column-reverse;
+
+        .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;
+
+                    .time {
+                        text-align: center;
+                        font-size: 24rpx;
+                        color: #666;
+                    }
+
+                    .cell-item {
+                        display: flex;
+                        width: 690rpx;
+                        justify-content: flex-start;
+
+                        &.left {
+                            flex-direction: row;
+                        }
+
+                        &.right {
+                            flex-direction: row-reverse;
+
+                            .state {
+                                flex-direction: row;
+                                justify-content: flex-end;
+                            }
+                        }
+
+                        .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;
+                    }
+                }
+            }
+        }
+    }
+</style>