From 66092967cb85202e6b68d54a5b218bd6f85439e2 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Tue, 22 Feb 2022 14:59:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=BE=A4=E9=82=80=E8=AF=B7=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  3 +-
 pages/im/components/sentText.vue    | 24 +++-----
 pages/im/components/showMessage.vue |  8 ---
 pages/im/components/showText.vue    | 88 ++++++++++++++++++++++-------
 pages/im/group/chat.vue             | 48 +++++++++-------
 pages/im/private/chat.vue           | 17 +-----
 utils/im/listeners.js               | 37 ++++++++----
 utils/im/message.js                 | 27 +++++----
 yarn.lock                           | 37 ++++++------
 9 files changed, 163 insertions(+), 126 deletions(-)
 delete mode 100644 pages/im/components/showMessage.vue

diff --git a/package.json b/package.json
index 0421739..f65cb7c 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,7 @@
         "moment": "^2.29.1",
         "uni-read-pages": "^1.0.5",
         "uni-simple-router": "^2.0.7",
-        "uview-ui": "^2.0.19",
-        "vuex": "^3.6.2"
+        "uview-ui": "^2.0.27"
     },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/pages/im/components/sentText.vue b/pages/im/components/sentText.vue
index 723ae3e..efa4034 100644
--- a/pages/im/components/sentText.vue
+++ b/pages/im/components/sentText.vue
@@ -2,7 +2,6 @@
     <view class="sent--text">
         <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
             v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
-        <!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
     </view>
 </template>
 
@@ -19,10 +18,6 @@
             targetId: {
                 type: String,
                 default: ''
-            },
-            inputTxt: {
-                type: String,
-                default: ''
             }
         },
         computed: {
@@ -33,7 +28,7 @@
                 return this.$store.getters.sender
             }
         },
-        created() {
+        mounted() {
             RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
                 draft
             }) => {
@@ -46,25 +41,20 @@
         },
         data() {
             return {
-                focusState: false,
+                focusState: false,
+                inputTxt: ''
             }
         },
         methods: {
-            // 发送文本消息
             sent() {
-                if (!this.disabled) {
-                    RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
-                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
+                if (!this.disabled) {
+                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
+                        RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
                         this.$emit('success')
-                        this.inputTxt = ''
+                        this.inputTxt = ''
                     })
                 }
             },
-            demo() {
-                console.log(this.focusState)
-
-                this.focusState = !this.focusState
-            },
             focus() {
                 this.$emit('focus')
             },
diff --git a/pages/im/components/showMessage.vue b/pages/im/components/showMessage.vue
deleted file mode 100644
index 48d48ea..0000000
--- a/pages/im/components/showMessage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
diff --git a/pages/im/components/showText.vue b/pages/im/components/showText.vue
index ffa4d01..c8bba49 100644
--- a/pages/im/components/showText.vue
+++ b/pages/im/components/showText.vue
@@ -1,13 +1,21 @@
 <template>
-    <view class="msg--text">
-        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view>
-            <text class="im--text" :class="isRemote ? 'left': 'right'">{{ content }}</text>
+    <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>
+        <view class="">
+            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+            <view @longpress="backMessage" :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
         </view>
     </view>
 </template>
 
 <script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
     export default {
         name: 'showText',
         props: {
@@ -21,37 +29,77 @@
                 type: Boolean,
                 default: false
             }
-        },
-        computed: {
-            isRemote() {
-                return this.message.messageDirection == 2
-            },
-            content() {
-                return this.message.content.content
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
         },
+        computed: {
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            content() {
+                return this.message.content.content
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
+        methods: {
+            // 撤回消息测试
+            backMessage() {
+                console.log('撤回消息');
+                const pushContent = '推送内容'
+                RongIMLib.recallMessage(this.message.messageId, pushContent,
+                    ({
+                        code,
+                        message
+                    }) => {
+                        console.error(code);
+                        // 撤回消息成功
+                        if (code === 0) {
+                            console.error(message);
+                        }
+                    }
+                )
+            }
+        }
     }
 </script>
 
 <style scoped lang="scss">
     .msg--text {
+        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;
         }
 
-        .im--text {
-            max-width: 508rpx;
+        .text {
+            box-sizing: border-box;
+            max-width: 502rpx;
             padding: 20rpx;
             line-height: 46rpx;
             font-size: 32rpx;
             color: $text-color;
-            display: inline-block;
             word-break: break-all;
 
             &.left {
diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index ab2a2d1..b053190 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -77,7 +77,6 @@
             this.targetId = e.targetId
             // 获取群成员数量
             getGroupBase(this.targetId).then(res => {
-                console.log(res);
                 uni.setNavigationBarTitle({
                     title: res.name + `(${res.members})`
                 })
@@ -90,6 +89,11 @@
                     this.getNewMessage()
                 }
             })
+            uni.$on('onReceiptRequested', (msg) => {
+                if (msg.targetId == this.targetId) {
+                    console.log('群聊消息是否已读', msg);
+                }
+            })
             // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
         },
@@ -138,14 +142,32 @@
                         this.scrollBottom()
                     })
             },
+            // 发送已读回执
+            sendReadReceiptResponse(messages) {
+                const msgs = messages.map((item) => {
+                    if (item.receivedStatus == 0) {
+                        return {
+                            conversationType: 3,
+                            targetId: this.targetId,
+                            messageId: item.messageId,
+                            messageDirection: item.messageDirection,
+                            objectName: item.objectName
+                        }
+                    }
+                }).filter(Boolean)
+                if (msgs.length) {
+                    console.error('发送群聊已读回执', msgs);
+                    RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
+                        console.error('发送群聊已读回执成功', res);
+                    })
+                }
+            },
             // 滚动到底部
             scrollBottom(type) {
                 if (this.latestMessage) {
                     // 清理当前会话，未读消息数量
                     RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
                         .sentTime)
-                    // // 发送消息已读状态给对方
-                    // RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
                     // 更新badge提醒数量
                     im.setNotifyBadge()
                 }
@@ -175,7 +197,7 @@
                 justify-content: flex-end;
 
                 .cell {
-                    padding: 10rpx 30rpx;
+                    padding: 10rpx 20rpx;
 
                     .time {
                         text-align: center;
@@ -183,9 +205,9 @@
                         color: #666;
                     }
 
-                    .cell-item {
+                    .cell-item {
                         display: flex;
-                        width: 690rpx;
+                        width: 710rpx;
                         justify-content: flex-start;
 
                         &.left {
@@ -203,20 +225,6 @@
 
                         .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;
-                                }
-                            }
                         }
                     }
 
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index ff3b355..2ae72ca 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -172,7 +172,7 @@
                 justify-content: flex-end;
 
                 .cell {
-                    padding: 10rpx 30rpx;
+                    padding: 10rpx 20rpx;
 
                     .time {
                         text-align: center;
@@ -183,7 +183,7 @@
 
                     .cell-item {
                         display: flex;
-                        width: 690rpx;
+                        width: 710rpx;
                         justify-content: flex-start;
 
                         &.left {
@@ -200,19 +200,6 @@
 
                         .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;
-                            //     }
-                            // }
                         }
                     }
 
diff --git a/utils/im/listeners.js b/utils/im/listeners.js
index cefa358..23c08b0 100644
--- a/utils/im/listeners.js
+++ b/utils/im/listeners.js
@@ -41,7 +41,7 @@ const notifyMsgTypes = [
 const imLibListeners = () => {
     // 添加连接状态监听函数 
     IMLib.addConnectionStatusListener((res) => {
-        console.log('连接状态监听', res.data.status)
+        console.error('连接状态监听', res.data.status)
         uni.$emit('onConnectionStatusChange', res.data.status)
     })
     // 添加消息监听函数
@@ -69,7 +69,7 @@ const imLibListeners = () => {
             store.dispatch('updateContact', JSON.parse(message.content.data))
             // 调用完更新之后，删除这条消息
             IMLib.deleteMessagesByIds([message.messageId])
-        } else if (message.objectName === IMLib.ObjectName.ContactNotification) {
+        } else if (message.objectName === IMLib.ObjectName.ContactNotification) {
             console.error('触发一个新好友的通知事件', message);
             // 触发一个新好友的通知事件
             uni.$emit('onContactNotification', message)
@@ -85,13 +85,28 @@ const imLibListeners = () => {
             uni.$emit('onReceiveMessage', message)
         }
     })
-
-    // 监听消息回执
+    // 监听私聊消息已读回执
     IMLib.addReadReceiptReceivedListener(({
         data
     }) => {
+        console.error("监听私聊消息已读回执: ", data);
         uni.$emit('onReadReceiptReceived', data)
     })
+    // 监听消息撤回操作
+    IMLib.addRecallMessageListener((res) => {
+        console.error("消息撤回: ", res);
+    })
+    // 监听需要群聊消息回执
+    IMLib.addReceiptRequestListener(({
+        data
+    }) => {
+        console.error('onReceiptRequested', data);
+        uni.$emit('onReceiptRequested', data)
+    })
+    // 群消息已读的回执
+    IMLib.addReceiptResponseListener((res) => {
+        console.error('addReceiptResponseListener', res);
+    })
 }
 
 const callLibListeners = () => {
@@ -100,7 +115,7 @@ const callLibListeners = () => {
     CallLib.onCallReceived(({
         data
     }) => {
-        console.log('onCallReceived');
+        console.error('onCallReceived');
         uni.navigateTo({
             url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
                 data.mediaType
@@ -112,27 +127,27 @@ const callLibListeners = () => {
     })
     // 外呼
     CallLib.onCallOutgoing((res) => {
-        console.log('onCallOutgoing', res);
+        console.error('onCallOutgoing', res);
         uni.$emit('onCallOutgoing')
     })
     // 远端响铃
-    CallLib.onRemoteUserRinging((res) => {
-        console.log('onRemoteUserRinging', res);
+    CallLib.onRemoteUserRinging((res) => {
+        console.error('onRemoteUserRinging', res);
         uni.$emit('onRemoteUserRinging')
     })
     // 远端加入
     CallLib.onRemoteUserJoined((res) => {
-        console.log('远端接听');
+        console.error('远端接听');
         uni.$emit('onRemoteUserJoined')
     })
     // 断开链接
     CallLib.onCallDisconnected((res) => {
-        console.log('断开链接', res)
+        console.error('断开链接', res)
         uni.$emit('onCallDisconnected')
     })
     // 远端挂断
     CallLib.onRemoteUserLeft((res) => {
-        console.log('远端离开', res)
+        console.error('远端离开', res)
         uni.$emit('onRemoteUserLeft')
     })
 }
diff --git a/utils/im/message.js b/utils/im/message.js
index 81ef00c..94c7231 100644
--- a/utils/im/message.js
+++ b/utils/im/message.js
@@ -16,8 +16,8 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
         'RC:SightMsg',
         'RC:ReferenceMsg',
         'RC:CombineMsg',
-        'RC:GrpNtf',
-        'RC:InfoNtf'
+        'RC:GrpNtf',
+        'RC:InfoNtf'
     ]
 
     RongIMLib.getHistoryMessagesByTimestamp(
@@ -60,18 +60,16 @@ const getPendingList = (callback, total) => {
 
 // 群组申请列表，邀请列表
 const getGroupPendinglist = (targetId, callback) => {
-    let total = 1000
-    RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], total, 0, (res) => {
-        if (res.code === 0) {
-            const pendings = res.conversations.filter((item) => {
-                return item.targetId == targetId &&
-                    item.objectName == RongIMLib.ObjectName.ContactNotification &&
-                    item.latestMessage.operation === 'GroupPending'
-            })
+    const conversationType = RongIMLib.ConversationType.SYSTEM
+    const objectNames = ['RC:ContactNtf']
 
-            callback(pendings)
+    RongIMLib.getHistoryMessagesByTimestamp(conversationType, targetId, objectNames, 0, 1000, true,
+        ({
+            messages
+        }) => {
+            callback(messages)
         }
-    })
+    )
 }
 
 /**
@@ -97,6 +95,11 @@ const sentText = (conversationType, targetId, content, user, callback) => {
         messageId
     }) => {
         if (code === 0) {
+            if (conversationType == 3) {
+                RongIMLib.sendReadReceiptRequest(messageId, (res) => {
+                    console.log('发送回执请求', res);
+                })
+            }
             callback(messageId)
         } else {
             console.log('发送失败', msg);
diff --git a/yarn.lock b/yarn.lock
index 06a1403..9339e0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,27 +2,22 @@
 # yarn lockfile v1
 
 
-"moment@^2.29.1":
-  "integrity" "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
-  "resolved" "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
-  "version" "2.29.1"
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-"uni-read-pages@^1.0.5":
-  "integrity" "sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA=="
-  "resolved" "https://registry.npmjs.org/uni-read-pages/-/uni-read-pages-1.0.5.tgz"
-  "version" "1.0.5"
+uni-read-pages@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/uni-read-pages/-/uni-read-pages-1.0.5.tgz"
+  integrity sha512-GkrrZ0LX0vn9R5k6RKEi0Ez3Q3e2vUpjXQ8Z6/K/d28KudI9ajqgt8WEjQFlG5EPm1K6uTArN8LlqmZTEixDUA==
 
-"uni-simple-router@^2.0.7":
-  "integrity" "sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA=="
-  "resolved" "https://registry.npmjs.org/uni-simple-router/-/uni-simple-router-2.0.7.tgz"
-  "version" "2.0.7"
+uni-simple-router@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.npmjs.org/uni-simple-router/-/uni-simple-router-2.0.7.tgz"
+  integrity sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA==
 
-"uview-ui@^2.0.19":
-  "integrity" "sha512-ddZiaP7R9wsUxMzAuhuXgh5OswgCm2lKuulTqjnRXFr0uUWsgL1iBifU3GbOwpwP0LtTHKJOo9rYv1LP0WXmzA=="
-  "resolved" "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.19.tgz"
-  "version" "2.0.19"
-
-"vuex@^3.6.2":
-  "integrity" "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
-  "resolved" "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz"
-  "version" "3.6.2"
+uview-ui@^2.0.27:
+  version "2.0.27"
+  resolved "https://registry.yarnpkg.com/uview-ui/-/uview-ui-2.0.27.tgz#1a7dde9c6246e851d768f3efd44b5fb26774a2e1"
+  integrity sha512-fl35rlguNPfXnwNoVv0w4zS1blFFxxSPuGR1+9SbpFGC33aiTBaoFWs/4Fppj0foS/kDCqSWcJiymNmQjPBD4g==

From ab352293316ec4784ea149612ba59cdc0b4cc588 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Tue, 22 Feb 2022 15:16:08 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=BE=A4=E8=81=8A=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E5=9B=9E=E6=89=A7=E7=9A=84=E9=83=A8=E5=88=86=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/group/chat.vue | 38 ++++++++++++++++----------------------
 utils/im/listeners.js   |  4 ++--
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index b053190..f3297f9 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -89,14 +89,25 @@
                     this.getNewMessage()
                 }
             })
-            uni.$on('onReceiptRequested', (msg) => {
+            uni.$on('onReceiptRequest', (msg) => {
                 if (msg.targetId == this.targetId) {
-                    console.log('群聊消息是否已读', msg);
+                    RongIMLib.getMessageByUId(msg.messageUId, (result) => {
+                        RongIMLib.sendReadReceiptResponse(3, this.targetId, [result.message], (res) => {
+                            console.error('发送群聊已读回执成功', res);
+                        })
+                    })
                 }
             })
+            uni.$on('onReceiptResponse', (msg) => {
+                console.log('远端消息已读，本地获取有几个人读了', msg);
+            })
             // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
         },
+        onUnload() {
+            uni.$off('onReceiptRequest')
+            uni.$off('onReceiptResponse')
+        },
         onNavigationBarButtonTap() {
             uni.navigateTo({
                 url: '/pages/im/group/info?targetId=' + this.targetId
@@ -138,30 +149,13 @@
                     20,
                     true,
                     (messages) => {
+                        RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (res) => {
+                            console.error('发送群聊已读回执成功', res);
+                        })
                         this.messages = messages
                         this.scrollBottom()
                     })
             },
-            // 发送已读回执
-            sendReadReceiptResponse(messages) {
-                const msgs = messages.map((item) => {
-                    if (item.receivedStatus == 0) {
-                        return {
-                            conversationType: 3,
-                            targetId: this.targetId,
-                            messageId: item.messageId,
-                            messageDirection: item.messageDirection,
-                            objectName: item.objectName
-                        }
-                    }
-                }).filter(Boolean)
-                if (msgs.length) {
-                    console.error('发送群聊已读回执', msgs);
-                    RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
-                        console.error('发送群聊已读回执成功', res);
-                    })
-                }
-            },
             // 滚动到底部
             scrollBottom(type) {
                 if (this.latestMessage) {
diff --git a/utils/im/listeners.js b/utils/im/listeners.js
index 23c08b0..81fa163 100644
--- a/utils/im/listeners.js
+++ b/utils/im/listeners.js
@@ -101,11 +101,11 @@ const imLibListeners = () => {
         data
     }) => {
         console.error('onReceiptRequested', data);
-        uni.$emit('onReceiptRequested', data)
+        uni.$emit('onReceiptRequest', data)
     })
     // 群消息已读的回执
     IMLib.addReceiptResponseListener((res) => {
-        console.error('addReceiptResponseListener', res);
+        console.error('onReceiptResponse', res);
     })
 }