群消息已读反馈，消息状态组件抽离

pages/im/components/show/showImage.vue

@@ -1,11 +1,7 @@
 <template>
     <view class="msg--image">
-        <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>
+        <message-state :message="message" :isGroup="isGroup" />
+
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
             <view class="image" :class="isRemote ? 'left': 'right'">
@@ -17,6 +13,7 @@
 
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
 
     export default {
         name: 'showImage',
@@ -32,6 +29,9 @@
                 default: false
             }
         },
+        components: {
+            messageState
+        },
         computed: {
             isRemote() {
                 return this.message.messageDirection == 2
@@ -96,24 +96,6 @@
         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;