聊天内容，文本，图片，语音消息结构优化

pages/im/components/showVoice.vue

@@ -1,12 +1,14 @@
-<template>
-    <view class="">
-        <text class="name" v-if="isGroup && guest">{{ contact(message.senderUserId).name }}</text>
-        <view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
-            <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-            <text class="duration">{{ duration }}"</text>
-            <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
-        </view>
-        <!-- <view class="">这里显示个红点，根据message.content.local是否为空的时候判断</view> -->
+<template>
+    <view class="">
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="msg--voice">
+            <view class="voice" :class="isRemote ? 'left': 'right'" @click="onPlayMsg">
+                <image v-if="!isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                <text class="duration">{{ duration }}"</text>
+                <image v-if="isRemote" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+            </view>
+            <u-badge isDot :show="message.content.local =='' && isRemote" />
+        </view>
     </view>
 </template>
 
@@ -31,9 +33,8 @@
             duration() {
                 return this.message.content.duration
             },
-            guest() {
-                return this.message.messageDirection == 2
-                
+            isRemote() {
+                return this.message.messageDirection == 2
             },
             contact() {
                 return function(targetId) {
@@ -61,10 +62,12 @@
                 }
             },
             playMsg(path) {
+                uni.$emit('onVideoMessagePlay')
                 const innerAudioContext = uni.createInnerAudioContext()
                 innerAudioContext.src = path
                 innerAudioContext.autoplay = true
                 innerAudioContext.onStop(resStop => {
+                    uni.$emit('onVideoMessageStop')
                     innerAudioContext.destroy()
                 })
                 innerAudioContext.onError(err => {
@@ -83,36 +86,45 @@
 
     .msg--voice {
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
         align-items: center;
-        height: 79rpx;
-        width: 170rpx;
-        padding: 0 20rpx;
-        box-sizing: border-box;
 
-        .icon {
-            width: 38rpx;
-            height: 38rpx;
+        .u-badge {
+            margin-left: 20rpx;
         }
 
-        &.left {
-            border-radius: 0 20rpx 20rpx 20rpx;
-            background: white;
+        .voice {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: 79rpx;
+            width: 170rpx;
+            padding: 0 20rpx;
+            box-sizing: border-box;
 
-            .duration {
-                color: #333;
-                font-size: 30rpx;
+            .icon {
+                width: 38rpx;
+                height: 38rpx;
             }
-        }
 
-        &.right {
-            border-radius: 20rpx 0 20rpx 20rpx;
-            background: $main-color;
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
 
-            .duration {
-                color: white;
-                font-size: 30rpx;
+                .duration {
+                    color: #333;
+                    font-size: 30rpx;
+                }
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+
+                .duration {
+                    color: white;
+                    font-size: 30rpx;
+                }
             }
         }
     }