消息列表优化

pages/im/private/chat.nvue

@@ -26,7 +26,7 @@
         </list>
         <!-- footer -->
         <view class="chat-footer">
-            <view class="msg-type" @click="msgType">
+            <view class="msg-type" @click="changeMessageType">
                 <image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
                 </image>
                 <image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
@@ -46,11 +46,11 @@
     } from '@/utils/filters.js'
     import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
     import im from '@/utils/im/index.js'
-    import showVoice from './components/showVoice'
-    import showImage from './components/showImage'
-    import showText from './components/showText'
-    import sentText from './components/sentText'
-    import sentVoice from './components/sentVoice'
+    import showVoice from '../components/showVoice'
+    import showImage from '../components/showImage'
+    import showText from '../components/showText'
+    import sentText from '../components/sentText'
+    import sentVoice from '../components/sentVoice'
 
     const ChatList = uni.requireNativePlugin('dom')
 
@@ -79,47 +79,44 @@
             this.targetId = e.targetId
             this.conversationType = e.conversationType // 会话类型
             this.userInfo = this.$store.getters.userInfo(this.targetId)
+
+            // 获取消息列表
+            this.initMessageList()
+            
             uni.setNavigationBarTitle({
-                title: this.$store.getters.userInfo(this.targetId).name
+                title: this.userInfo.name
             })
-
-            RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
-            im.setNotifyBadge()
-            RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
-
-            this.getMessageList()
-
-            // 监听消息回执
-            RongIMLib.addReadReceiptReceivedListener(({
-                data
-            }) => {
+            // 监听消息已读状态
+            uni.$on('onReadReceiptReceived', (data) => {
                 if (data.targetId == this.targetId) {
                     this.getMessageList()
                 }
             })
-
             // 监听收到新消息，判断是否是当前会话，更新会话内容
             uni.$on('onReceiveMessage', (msg) => {
                 if (msg.targetId == this.targetId) {
-                    RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
-                    RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
-                    this.getMessageList()
-                    im.setNotifyBadge()
+                    this.initMessageList()
                 }
             })
         },
         beforeDestroy() {
             uni.$off('onReceiveMessage')
         },
-        onUnload() {
-            RongIMLib.clearReadReceiptReceivedListener()
-        },
         methods: {
+            initMessageList() {
+                this.getMessageList()
+                // 清理当前会话，未读消息数量
+                RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
+                // 发送消息已读状态给对方
+                RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
+                // 更新badge提醒数量
+                im.setNotifyBadge()
+            },
             customCN(val) {
                 return timeCustomCN(val)
             },
-            // 切换聊天类型
-            msgType() {
+            // 切换聊天类型，语音/文本
+            changeMessageType() {
                 this.chatType = this.chatType === 1 ? 0 : 1
             },
             // 获取消息列表

utils/im/index.js

@@ -123,6 +123,14 @@ const addListeners = () => {
             newMessage(message)
         }
     })
+    
+    // 监听消息回执
+    RongIMLib.addReadReceiptReceivedListener(({
+        data
+    }) => {
+        uni.$emit('onReadReceiptReceived', data)
+    })
+    
     // 音视频通话相关的
     // 监听通话呼入
     CallLib.onCallReceived(({