群消息已读数量优化，撤回消息的功能扩展到语音图片等

pages/im/components/show/messageState.vue

@@ -1,6 +1,13 @@
 <template>
-    <view class="">
+    <view v-if="!isRemote">
-        <view class="state" v-if="!isGroup && !isRemote">
+        <view class="state" v-if="isGroup">
+            <!-- 已发送 -->
+            <u-icon name="checkbox-mark" :size="iconSize" class="sent"
+                :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
+            <!-- 已阅读 -->
+            <text class="readers">{{ readers }}</text>
+        </view>
+        <view class="state" v-else>
             <!-- 已发送 -->
             <u-icon name="checkbox-mark" :size="iconSize" class="sent"
                 :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
@@ -8,18 +15,9 @@
             <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'
@@ -36,14 +34,22 @@
             isGroup: {
                 type: Boolean,
                 default: false
+            },
+            isRemote: {
+                type: Boolean,
+                default: false
             }
         },
         computed: {
             iconSize() {
                 return utils.rpx2px(28)
             },
-            isRemote() {
+            readers() {
-                return this.message.messageDirection == 2
+                if (this.message.extra) {
+                    return JSON.parse(this.message.extra).readers || 0
+                }
+                
+                return 0
             }
         }
     }
@@ -68,7 +74,7 @@
 
         .readers {
             font-size: 20rpx;
-            margin-left: -10rpx;
+            margin-left: -6rpx;
             color: $text-gray-m;
         }
     }

pages/im/components/show/showImage.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="msg--image">
-        <message-state :message="message" :isGroup="isGroup" />
+        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
 
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>

pages/im/components/show/showText.vue

@@ -1,15 +1,15 @@
 <template>
     <view class="msg--text">
-        <message-state :message="message" :isGroup="isGroup" />
+        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
+
         <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 :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
         </view>
     </view>
 </template>
 
 <script>
-    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import messageState from './messageState'
 
     export default {
@@ -41,42 +41,6 @@
                     return this.$store.getters.contactInfo(targetId)
                 }
             }
-        },
-        methods: {
-            // 撤回消息测试
-            backMessage() {
-                if (this.$store.getters.sender.userId != this.message.senderUserId) {
-                    uni.showToast({
-                        icon: 'none',
-                        title: '不能撤回别人的消息'
-                    })
-                    return
-                }
-                // 判断时间超过了多久 就不能撤回 TODO
-                // this.message.sentTime
-                const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
-                RongIMLib.recallMessage(this.message.messageId, pushContent,
-                    ({
-                        code,
-                        message
-                    }) => {
-                        if (code === 0) {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '消息撤回成功'
-                            })
-                            RongIMLib.getMessage(this.message.messageId, res => {
-                                uni.$emit('onRecallMessage', res.message)
-                            })
-                        } else {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '撤回失败' + code
-                            })
-                        }
-                    }
-                )
-            }
         }
     }
 </script>

pages/im/components/show/showVoice.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="msg--voice">
-        <message-state :message="message" :isGroup="isGroup" />
+        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
-        
+
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
             <view class="msg-voice">

pages/im/components/showMessageCell.vue

@@ -7,7 +7,7 @@
         <view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
             <u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
                 :src="contact(message.senderUserId).portraitUrl" />
-            <view class="msg">
+            <view class="msg" @longpress="backMessage">
                 <show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
                 <show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
                 <show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+    import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import showVoice from './show/showVoice'
     import showImage from './show/showImage'
     import showText from './show/showText'
@@ -73,6 +74,40 @@
                         url: '/pages/im/friends/info?targetId=' + item.senderUserId
                     })
                 }
+            },
+            // 撤回消息测试
+            backMessage() {
+                if (this.$store.getters.sender.userId != this.message.senderUserId) {
+                    uni.showToast({
+                        icon: 'none',
+                        title: '不能撤回别人的消息'
+                    })
+                    return
+                }
+                // 判断时间超过了多久 就不能撤回 TODO
+                // this.message.sentTime
+                const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
+                IMLib.recallMessage(this.message.messageId, pushContent,
+                    ({
+                        code,
+                        message
+                    }) => {
+                        if (code === 0) {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '消息撤回成功'
+                            })
+                            IMLib.getMessage(this.message.messageId, res => {
+                                uni.$emit('onRecallMessage', res.message)
+                            })
+                        } else {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '撤回失败' + code
+                            })
+                        }
+                    }
+                )
             }
         }
     }