语音消息条，长度优化

pages/im/components/showVoice.vue

@@ -2,7 +2,7 @@
     <view class="">
         <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
         <view class="msg--voice">
-            <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" @click="onPlayMsg">
+            <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}" @click="startPlay">
                 <image v-if="isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
                 <image v-else class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
                 <text class="duration">{{ duration }}"</text>
@@ -32,7 +32,7 @@
         data() {
             return {
                 onPlay: false,
-                innerAC: null
+                innerAC: null,
             }
         },
         computed: {
@@ -46,36 +46,52 @@
                 return function(targetId) {
                     return this.$store.getters.contactInfo(targetId)
                 }
+            },
+            width() {
+                if (this.duration > 3) {
+                    return (this.duration * 5) + 150
+                } else {
+                    return 120
+                }
             }
         },
         mounted() {
             // 这样能临时解决，但是会一直监听
             uni.$on('onVoiceMessagePlay', (messageId) => {
                 if (this.message.messageId != messageId) {
-                    this.stopPlayVoice()
+                    this.stopPlay()
                 }
             })
         },
         methods: {
             // 播放语音消息
-            onPlayMsg() {
+            startPlay() {
+                // 如果是正在播放的，停止当前播放
+                if (this.onPlay) {
+                    this.stopPlay()
+                    return
+                }
+                // 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
                 if (this.message.content.local) {
-                    this.playMsg(this.message.content.local)
+                    this.playVoice(this.message.content.local)
                 } else {
                     RongIMLib.downloadMediaMessage(this.message.messageId, {
                         success: (path) => {
                             this.message.content.local = path
-                            this.playMsg(path)
+                            this.playVoice(path)
                         },
                         progress: (progress, messageId) => {},
                         cancel: (messageId) => {},
                         error: (errorCode, messageId) => {
-                            // 发送错误回调
+                            uni.showToast({
+                                icon: 'none',
+                                title: '语音播放失败'
+                            })
                         }
                     })
                 }
             },
-            playMsg(path) {
+            playVoice(path) {
                 console.log('准备播放', this.message.content);
                 this.innerAC = uni.createInnerAudioContext()
                 this.innerAC.src = path
@@ -94,7 +110,7 @@
                     this.onPlay = false
                     this.innerAC.destroy()
                     this.innerAC = null
-                    uni.$emit('onVoiceMessageEnded', this.message.messageId)
+                    uni.$emit('onVoiceMessageStop', this.message.messageId)
                 })
                 this.innerAC.onError(err => {
                     uni.showToast({
@@ -103,7 +119,8 @@
                     })
                 })
             },
-            stopPlayVoice() {
+            stopPlay() {
+                // 停止播放语音消息
                 if (this.innerAC) {
                     this.innerAC.stop()
                 }
@@ -131,9 +148,8 @@
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
-            height: 79rpx;
-            width: 170rpx;
-            padding: 0 20rpx;
+            height: 84rpx;
+            padding: 0 30rpx;
             box-sizing: border-box;
 
             .icon {