From 31c60bb3191a6d9ad380ca1a47ecd4b9e1286fbf Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Wed, 23 Feb 2022 09:48:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=A4=E6=B6=88=E6=81=AF=E5=B7=B2=E8=AF=BB?=
 =?UTF-8?q?=E5=8F=8D=E9=A6=88=EF=BC=8C=E6=B6=88=E6=81=AF=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/show/messageState.vue | 75 +++++++++++++++++++++++
 pages/im/components/show/showImage.vue    | 30 ++-------
 pages/im/components/show/showText.vue     | 29 ++-------
 pages/im/components/show/showVoice.vue    | 13 ++--
 pages/im/group/chat.vue                   | 33 +++++++---
 pages/im/private/chat.vue                 | 14 ++++-
 utils/im/listeners.js                     | 30 ++++++---
 7 files changed, 152 insertions(+), 72 deletions(-)
 create mode 100644 pages/im/components/show/messageState.vue

diff --git a/pages/im/components/show/messageState.vue b/pages/im/components/show/messageState.vue
new file mode 100644
index 0000000..d32429a
--- /dev/null
+++ b/pages/im/components/show/messageState.vue
@@ -0,0 +1,75 @@
+<template>
+    <view class="">
+        <view class="state" v-if="!isGroup && !isRemote">
+            <!-- 已发送 -->
+            <u-icon name="checkbox-mark" :size="iconSize" class="sent"
+                :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
+            <!-- 已阅读 -->
+            <u-icon name="checkbox-mark" :size="iconSize" class="receive"
+                :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
+        </view>
+        <view class="state" v-if="isGroup && !isRemote">
+            <!-- 已发送 -->
+            <u-icon name="checkbox-mark" :size="iconSize" class="sent"
+                :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
+            <!-- 已阅读 -->
+            <text class="readers">{{ JSON.parse(message.extra).readers || 0 }}</text>
+        </view>
+    </view>
+
+</template>
+
+
+<script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import utils from '@/utils/index.js'
+
+    export default {
+        name: 'showText',
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            iconSize() {
+                return utils.rpx2px(28)
+            },
+            isRemote() {
+                return this.message.messageDirection == 2
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .state {
+        padding: 10rpx;
+        border-radius: 30rpx;
+        background-color: #ddd;
+        display: flex;
+        margin-right: 10rpx;
+
+        .sent {
+            z-index: 2;
+        }
+
+        .receive {
+            z-index: 1;
+            margin-left: -20rpx;
+        }
+
+        .readers {
+            font-size: 20rpx;
+            margin-left: -10rpx;
+            color: $text-gray-m;
+        }
+    }
+</style>
diff --git a/pages/im/components/show/showImage.vue b/pages/im/components/show/showImage.vue
index 4b78be9..b65691d 100644
--- a/pages/im/components/show/showImage.vue
+++ b/pages/im/components/show/showImage.vue
@@ -1,11 +1,7 @@
 <template>
     <view class="msg--image">
-        <view class="state" v-if="!isGroup && !isRemote">
-            <!-- 已发送 -->
-            <u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
-            <!-- 已阅读 -->
-            <u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
-        </view>
+        <message-state :message="message" :isGroup="isGroup" />
+
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
             <view class="image" :class="isRemote ? 'left': 'right'">
@@ -17,6 +13,7 @@
 
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
 
     export default {
         name: 'showImage',
@@ -32,6 +29,9 @@
                 default: false
             }
         },
+        components: {
+            messageState
+        },
         computed: {
             isRemote() {
                 return this.message.messageDirection == 2
@@ -96,24 +96,6 @@
         display: flex;
         align-items: flex-end;
 
-        .state {
-            padding: 10rpx;
-            border-radius: 30rpx;
-            width: 40rpx;
-            background-color: #ddd;
-            display: flex;
-            margin-right: 10rpx;
-
-            .sent {
-                z-index: 2;
-            }
-
-            .receive {
-                z-index: 1;
-                margin-left: -20rpx;
-            }
-        }
-
         .name {
             font-size: 24rpx;
             color: $text-gray-m;
diff --git a/pages/im/components/show/showText.vue b/pages/im/components/show/showText.vue
index f9a4927..51d9a31 100644
--- a/pages/im/components/show/showText.vue
+++ b/pages/im/components/show/showText.vue
@@ -1,11 +1,6 @@
 <template>
     <view class="msg--text">
-        <view class="state" v-if="!isGroup && !isRemote">
-            <!-- 已发送 -->
-            <u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
-            <!-- 已阅读 -->
-            <u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
-        </view>
+        <message-state :message="message" :isGroup="isGroup" />
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
             <view @longpress="backMessage" :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
@@ -15,6 +10,7 @@
 
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
 
     export default {
         name: 'showText',
@@ -30,6 +26,9 @@
                 default: false
             }
         },
+        components: {
+            messageState
+        },
         computed: {
             isRemote() {
                 return this.message.messageDirection == 2
@@ -87,24 +86,6 @@
         display: flex;
         align-items: flex-end;
 
-        .state {
-            padding: 10rpx;
-            border-radius: 30rpx;
-            width: 40rpx;
-            background-color: #ddd;
-            display: flex;
-            margin-right: 10rpx;
-
-            .sent {
-                z-index: 2;
-            }
-
-            .receive {
-                z-index: 1;
-                margin-left: -20rpx;
-            }
-        }
-
         .name {
             font-size: 24rpx;
             color: $text-gray-m;
diff --git a/pages/im/components/show/showVoice.vue b/pages/im/components/show/showVoice.vue
index d6f6f6c..a4da8e2 100644
--- a/pages/im/components/show/showVoice.vue
+++ b/pages/im/components/show/showVoice.vue
@@ -1,11 +1,7 @@
 <template>
     <view class="msg--voice">
-        <view class="state" v-if="!isGroup && !isRemote">
-            <!-- 已发送 -->
-            <u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
-            <!-- 已阅读 -->
-            <u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
-        </view>
+        <message-state :message="message" :isGroup="isGroup" />
+        
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
             <view class="msg-voice">
@@ -26,9 +22,9 @@
 
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
 
     export default {
-        name: 'showVoice',
         props: {
             message: {
                 type: Object,
@@ -41,6 +37,9 @@
                 default: false
             }
         },
+        components: {
+            messageState
+        },
         data() {
             return {
                 onPlay: false,
diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index d351473..82f2d62 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -74,8 +74,17 @@
                     })
                 }
             })
+            // 群已读回执
             uni.$on('onReceiptResponse', (msg) => {
-                console.log('远端消息已读，本地获取有几个人读了', msg);
+                if (msg.targetId == this.targetId) {
+                    this.messages = this.messages.map(item => {
+                        if (msg.messageId == item.messageId) {
+                            return msg
+                        } else {
+                            return item
+                        }
+                    })
+                }
             })
             // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
@@ -127,9 +136,17 @@
                     true,
                     (messages) => {
                         console.log('获取消息列表', messages);
-                        RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (res) => {
-                            console.error('发送群聊已读回执成功', res);
-                        })
+                        const msgs = messages.filter(item => item.receivedStatus == 0)
+                        console.log('未读消息', msgs);
+                        if (msgs.length) {
+                            RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
+                                console.error('发送群聊已读回执成功', res);
+                                msgs.map(item => {
+                                    RongIMLib.setMessageReceivedStatus(item.messageId, 1)
+                                })
+                            })
+                        }
+
                         this.messages = messages
                         this.scrollBottom()
                     })
@@ -144,10 +161,10 @@
                     im.setNotifyBadge()
                 }
             }
-        },
-        onHide() {
-            // console.log(JSON.stringify(this.$refs))
-            this.$refs.voice.stopPlay()
+        },
+        onHide() {
+            // console.log(JSON.stringify(this.$refs))
+            this.$refs.voice.stopPlay()
         }
     }
 </script>
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index b8ca211..8c61be1 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -77,9 +77,21 @@
                 if (msg.targetId == this.targetId) {
                     this.getNewMessage()
                 }
+            })
+            uni.$on('onRecallMessage', (res) => {
+                if (res.targetId == this.targetId) {
+                    this.messages = this.messages.map(item => {
+                        if (res.messageId == item.messageId) {
+                            return res
+                        } else {
+                            return item
+                        }
+                    })
+                }
             })
         },
-        onUnload() {
+        onUnload() {
+            uni.$off('onRecallMessage')
             uni.$off('onReadReceiptReceived')
         },
         methods: {
diff --git a/utils/im/listeners.js b/utils/im/listeners.js
index 7b2d620..93393fe 100644
--- a/utils/im/listeners.js
+++ b/utils/im/listeners.js
@@ -93,22 +93,36 @@ const imLibListeners = () => {
         uni.$emit('onReadReceiptReceived', data)
     })
     // 监听消息撤回操作
-    IMLib.addRecallMessageListener((res) => {
-        IMLib.getMessage(res.data.messageId, (res) => {
-            console.error("消息撤回: ", res.message);
-            uni.$emit('onRecallMessage', res.message)
+    IMLib.addRecallMessageListener((res) => {
+        IMLib.getMessage(res.data.messageId, (res) => {
+            console.error("消息撤回: ", res.message);
+            uni.$emit('onRecallMessage', res.message)
         })
     })
     // 监听需要群聊消息回执
     IMLib.addReceiptRequestListener(({
         data
-    }) => {
-        console.error('onReceiptRequested', data);
+    }) => {
         uni.$emit('onReceiptRequest', data)
     })
     // 群消息已读的回执
-    IMLib.addReceiptResponseListener((res) => {
-        console.error('onReceiptResponse', res);
+    IMLib.addReceiptResponseListener(({
+        data
+    }) => {
+        // 获取本地消息
+        IMLib.getMessageByUId(data.messageUId, ({
+            message
+        }) => {
+            const readers = Object.keys(data.users).length
+            const extra = JSON.stringify({
+                readers
+            })
+            // 在消息的扩展数据中，设置已读数量
+            IMLib.setMessageExtra(message.messageId, extra, (result) => {
+                message.extra = extra
+                uni.$emit('onReceiptResponse', message)
+            })
+        })
     })
 }