merge

2022-02-22 16:38:54 +08:00
parent d92fb30648 ab35229331
commit 91144195cf
9 changed files with 157 additions and 126 deletions
--- 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"
--- 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
            }) => {
@@ -47,24 +42,19 @@
        data() {
            return {
                focusState: false,
+                inputTxt: ''
            }
        },
        methods: {
-            // 发送文本消息
            sent() {
                if (!this.disabled) {
-                    RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
+                        RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
                        this.$emit('success')
                        this.inputTxt = ''
                    })
                }
            },
-            demo() {
-                console.log(this.focusState)
-
-                this.focusState = !this.focusState
-            },
            focus() {
                this.$emit('focus')
            },
--- a/pages/im/components/showMessage.vue
+++ b/pages/im/components/showMessage.vue
@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
--- a/pages/im/components/showText.vue
+++ b/pages/im/components/showText.vue
@@ -1,13 +1,21 @@
 <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>
+        <view class="">
            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view>
-            <text class="im--text" :class="isRemote ? 'left': 'right'">{{ content }}</text>
+            <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: {
@@ -35,23 +43,63 @@
                }
            }
        },
+        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 {
--- 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,9 +89,25 @@
                    this.getNewMessage()
                }
            })
+            uni.$on('onReceiptRequest', (msg) => {
+                if (msg.targetId == this.targetId) {
+                    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
@@ -134,6 +149,9 @@
                    20,
                    true,
                    (messages) => {
+                        RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (res) => {
+                            console.error('发送群聊已读回执成功', res);
+                        })
                        this.messages = messages
                        this.scrollBottom()
                    })
@@ -144,8 +162,6 @@
                    // 清理当前会话，未读消息数量
                    RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
                        .sentTime)
-                    // // 发送消息已读状态给对方
-                    // RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
                    // 更新badge提醒数量
                    im.setNotifyBadge()
                }
@@ -179,7 +195,7 @@
                justify-content: flex-end;

                .cell {
-                    padding: 10rpx 30rpx;
+                    padding: 10rpx 20rpx;

                    .time {
                        text-align: center;
@@ -189,7 +205,7 @@

                    .cell-item {
                        display: flex;
-                        width: 690rpx;
+                        width: 710rpx;
                        justify-content: flex-start;

                        &.left {
@@ -207,20 +223,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;
-                                }
-                            }
                        }
                    }

--- 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;
-                            //     }
-                            // }
                        }
                    }

--- 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)
    })
    // 添加消息监听函数
@@ -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('onReceiptRequest', data)
+    })
+    // 群消息已读的回执
+    IMLib.addReceiptResponseListener((res) => {
+        console.error('onReceiptResponse', 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);
+        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')
    })
 }
--- a/utils/im/message.js
+++ b/utils/im/message.js
@@ -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);
--- 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==