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

pages/im/components/show/messageState.vue

@@ -1,6 +1,13 @@
 <template>
-    <view class="">
-        <view class="state" v-if="!isGroup && !isRemote">
+    <view v-if="!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() {
-                return this.message.messageDirection == 2
+            readers() {
+                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;
         }
     }