音视频组件展示

pages/im/components/show/showCall.vue

@@ -1,10 +1,9 @@
 <template>
     <view class="msg--call">
-        <view class="name" v-if="!guest && name">{{ name }}</view>
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="im--text" :class="guest ? 'right': 'left'">
+        <view class="im--text" :class="isRemote ? 'left': 'right'">
-            <u-icon name="camera" size="22" v-if="message.mediaType == 1"
+            <u-icon name="camera" size="22" v-if="msg.mediaType == 1" :label="label" />
-                :label="message.connected ? '通话时长：' + duration : '未接通'" />
+            <u-icon name="phone" size="22" v-else :label="label" />
-            <u-icon name="phone" size="22" v-else :label="message.connected ? '通话时长：' + duration : '未接通'" />
         </view>
     </view>
 </template>
@@ -16,24 +15,33 @@
     export default {
         name: 'showText',
         props: {
-            msg: {
+            message: {
                 type: Object,
                 default: () => {
                     return {}
                 }
             },
-            name: {
+            isGroup: {
-                type: String,
-                default: ''
-            },
-            guest: {
                 type: Boolean,
-                default: true
+                default: false
             }
         },
+        mounted() {
+        },
         computed: {
-            message() {
+            msg() {
-                return JSON.parse(this.msg.message)
+                return JSON.parse(this.message.content.message)
+            },
+            label() {
+                return this.msg.connected ? '通话时长：' + duration : '未接通'
+            },
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             },
             duration() {
                 if (this.message.duration > 3600) {

pages/im/components/show/showImage.vue

@@ -1,10 +1,18 @@
 <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>
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="msg--image" :class="isRemote ? 'left': 'right'">
+            <view class="image" :class="isRemote ? 'left': 'right'">
                 <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
             </view>
         </view>
+    </view>
 </template>
 
 <script>
@@ -84,12 +92,34 @@
 </script>
 
 <style scoped lang="scss">
+    .msg--image {
+        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;
         }
 
-    .msg--image {
+        .image {
             .img {
                 width: 180rpx;
             }
@@ -105,6 +135,6 @@
                     border-radius: 10rpx 0 10rpx 10rpx;
                 }
             }
-
+        }
     }
 </style>

pages/im/components/show/showVoice.vue

@@ -1,10 +1,18 @@
 <template>
+    <view class="msg--voice">
+        <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 class="msg--voice">
+            <view class="msg-voice">
                 <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
                     @click="startPlay">
-                <image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
+                    <image v-if="isRemote" class="icon"
+                        :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
                         src="@/static/icon/audio_green.png" mode="widthFix"></image>
                     <image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
                         src="@/static/icon/audio_white.png" mode="widthFix"></image>
@@ -13,6 +21,7 @@
                 <u-badge isDot :show="message.content.local =='' && isRemote" />
             </view>
         </view>
+    </view>
 </template>
 
 <script>
@@ -162,12 +171,34 @@
 </style>
 
 <style scoped lang="scss">
+    .msg--voice {
+        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;
         }
 
-    .msg--voice {
+        .msg-voice {
             display: flex;
             align-items: center;
 
@@ -219,4 +250,5 @@
                 }
             }
         }
+    }
 </style>