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

pages/im/components/showImage.vue

@@ -48,27 +48,25 @@
 <style scoped lang="scss">
     .name {
         font-size: 24rpx;
-        line-height: 34rpx;
         color: $text-gray-m;
-        padding-bottom: 10rpx;
     }
 
     .msg--image {
-        // padding: 20rpx;
+        .img {
+            width: 180rpx;
+        }
 
         &.left {
-            border-radius: 0 20rpx 20rpx 20rpx;
+            .img {
-            // background: white;
+                border-radius: 0 10rpx 10rpx 10rpx;
+            }
         }
 
         &.right {
-            border-radius: 20rpx 0 20rpx 20rpx;
+            .img {
-            // background: #34CE98;
+                border-radius: 10rpx 0 10rpx 10rpx;
+            }
         }
 
-        .img {
-            width: 150rpx;
-            border-radius: 10rpx;
-        }
     }
 </style>

pages/im/components/showText.vue

@@ -32,10 +32,10 @@
 <style scoped lang="scss">
     .msg--text {
         .name {
-            font-size: 26rpx;
+            font-size: 24rpx;
             color: $text-gray-m;
-            display: inline-block;
         }
+
         .im--text {
             max-width: 508rpx;
             padding: 20rpx;
@@ -44,10 +44,12 @@
             color: $text-color;
             display: inline-block;
             word-break: break-all;
+
             &.left {
                 border-radius: 0 20rpx 20rpx 20rpx;
                 background: white;
             }
+
             &.right {
                 border-radius: 20rpx 0 20rpx 20rpx;
                 background: $main-color;

pages/im/components/showVoice.vue

@@ -1,75 +1,88 @@
 <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 {
+                    return {}
-                        local: '',
-                        remote: '',
-                        objectName: '',
-                        duration: 0
-                    }
                 }
             },
-            name: {
+            isGroup: {
-                type: String,
-                default: ''
-            },
-            guest: {
                 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({
+                if (this.message.content.local) {
-                    url: this.msg.remote,
+                    this.playMsg(this.message.content.local)
-                    success: (res) => {
+                } else {
-                        if (res.statusCode === 200) {
+                    RongIMLib.downloadMediaMessage(this.message.messageId, {
-                            let innerAudioContext = uni.createInnerAudioContext()
+                        success: (path) => {
-                            innerAudioContext.src = res.tempFilePath
+                            this.message.content.local = path
-                            if (this.audioContextPaused) {
+                            this.playMsg(path)
-                                innerAudioContext.play()
+                        },
-                                this.audioContextPaused = false
+                        progress: (progress, messageId) => {},
-                                return
+                        cancel: (messageId) => {},
+                        error: (errorCode, messageId) => {
+                            // 发送错误回调
                         }
-                            innerAudioContext.stop()
+                    })
+                }
+            },
+            playMsg(path) {
+                const innerAudioContext = uni.createInnerAudioContext()
+                innerAudioContext.src = path
+                innerAudioContext.autoplay = true
                 innerAudioContext.onStop(resStop => {
-                                this.audioContextPaused = true
+                    innerAudioContext.destroy()
                 })
                 innerAudioContext.onError(err => {
                     console.log(err);
                 })
             }
         }
-                })
-            }
-        }
     }
 </script>
 
 <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;

pages/im/group/chat.vue

@@ -10,8 +10,7 @@
                         <u-avatar class="avatar" @click="toUser(item)" :size="avatarSize" shape="square"
                             :src="contact(item.senderUserId).portraitUrl" />
                         <view class="msg">
-                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
-                                :msg="item.content" :name="contact(item.senderUserId).name" />
                             <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
                                 :msg="item.content" :name="contact(item.senderUserId).name" />
                             <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"

pages/im/private/chat.vue

@@ -11,8 +11,7 @@
                             @click="showUser(item.senderUserId, item.messageDirection)"
                             :src="contact(item.senderUserId).portraitUrl" />
                         <view class="msg">
-                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" />
-                                :msg="item.content" />
                             <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
                                 :msg="item.content" />
                             <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"