群消息已读反馈，消息状态组件抽离

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>

pages/im/components/show/showImage.vue

@@ -1,11 +1,7 @@
 <template>
     <view class="msg--image">
-        <view class="state" v-if="!isGroup && !isRemote">
+        <message-state :message="message" :isGroup="isGroup" />
-            <!-- 已发送 -->
+
-            <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>
         <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;

pages/im/components/show/showText.vue

@@ -1,11 +1,6 @@
 <template>
     <view class="msg--text">
-        <view class="state" v-if="!isGroup && !isRemote">
+        <message-state :message="message" :isGroup="isGroup" />
-            <!-- 已发送 -->
-            <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>
         <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;

pages/im/components/show/showVoice.vue

@@ -1,11 +1,7 @@
 <template>
     <view class="msg--voice">
-        <view class="state" v-if="!isGroup && !isRemote">
+        <message-state :message="message" :isGroup="isGroup" />
-            <!-- 已发送 -->
+        
-            <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>
         <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,

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) => {
+                        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()
                     })

pages/im/private/chat.vue

@@ -78,8 +78,20 @@
                     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() {
+            uni.$off('onRecallMessage')
             uni.$off('onReadReceiptReceived')
         },
         methods: {

utils/im/listeners.js

@@ -103,12 +103,26 @@ const imLibListeners = () => {
     IMLib.addReceiptRequestListener(({
         data
     }) => {
-        console.error('onReceiptRequested', data);
         uni.$emit('onReceiptRequest', data)
     })
     // 群消息已读的回执
-    IMLib.addReceiptResponseListener((res) => {
+    IMLib.addReceiptResponseListener(({
-        console.error('onReceiptResponse', res);
+        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)
+            })
+        })
     })
 }