语音组件优化，下载过程使用RC接口，播放优化

pages/im/components/showVoice.vue

@@ -1,61 +1,74 @@
 <template>
     <view class="">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
+        <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">{{msg.duration}}"</text>
+            <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> -->
     </view>
 </template>
 
 <script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
     export default {
         name: 'showVoice',
         props: {
-            msg: {
+            message: {
                 type: Object,
                 default: () => {
-                    return {
-                        local: '',
-                        remote: '',
-                        objectName: '',
-                        duration: 0
-                    }
+                    return {}
                 }
             },
-            name: {
-                type: String,
-                default: ''
-            },
-            guest: {
+            isGroup: {
                 type: Boolean,
-                default: true
+                default: false
+            }
+        },
+        computed: {
+            duration() {
+                return this.message.content.duration
+            },
+            guest() {
+                return this.message.messageDirection == 2
+                
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             }
         },
         methods: {
             // 播放语音消息
             onPlayMsg() {
-                uni.downloadFile({
-                    url: this.msg.remote,
-                    success: (res) => {
-                        if (res.statusCode === 200) {
-                            let innerAudioContext = uni.createInnerAudioContext()
-                            innerAudioContext.src = res.tempFilePath
-                            if (this.audioContextPaused) {
-                                innerAudioContext.play()
-                                this.audioContextPaused = false
-                                return
-                            }
-                            innerAudioContext.stop()
-                            innerAudioContext.onStop(resStop => {
-                                this.audioContextPaused = true
-                            })
-                            innerAudioContext.onError(err => {
-                                console.log(err);
-                            })
+                if (this.message.content.local) {
+                    this.playMsg(this.message.content.local)
+                } else {
+                    RongIMLib.downloadMediaMessage(this.message.messageId, {
+                        success: (path) => {
+                            this.message.content.local = path
+                            this.playMsg(path)
+                        },
+                        progress: (progress, messageId) => {},
+                        cancel: (messageId) => {},
+                        error: (errorCode, messageId) => {
+                            // 发送错误回调
                         }
-                    }
+                    })
+                }
+            },
+            playMsg(path) {
+                const innerAudioContext = uni.createInnerAudioContext()
+                innerAudioContext.src = path
+                innerAudioContext.autoplay = true
+                innerAudioContext.onStop(resStop => {
+                    innerAudioContext.destroy()
+                })
+                innerAudioContext.onError(err => {
+                    console.log(err);
                 })
             }
         }
@@ -65,11 +78,11 @@
 <style scoped lang="scss">
     .name {
         font-size: 24rpx;
-        line-height: 34rpx;
         color: $text-gray-m;
     }
 
     .msg--voice {
+        display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;