From 7220c3466dec65672674c1a0aaa9125f1dd726a7 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Mon, 21 Feb 2022 18:04:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=AD=E9=9F=B3=E7=BB=84=E4=BB=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=8C=E4=B8=8B=E8=BD=BD=E8=BF=87=E7=A8=8B=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8RC=E6=8E=A5=E5=8F=A3=EF=BC=8C=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/showImage.vue | 52 ++++++++++---------
 pages/im/components/showText.vue  | 24 +++++----
 pages/im/components/showVoice.vue | 83 ++++++++++++++++++-------------
 pages/im/group/chat.vue           |  5 +-
 pages/im/private/chat.vue         |  3 +-
 5 files changed, 89 insertions(+), 78 deletions(-)

diff --git a/pages/im/components/showImage.vue b/pages/im/components/showImage.vue
index af297cc..ccd89e6 100644
--- a/pages/im/components/showImage.vue
+++ b/pages/im/components/showImage.vue
@@ -1,10 +1,10 @@
-<template>
-    <view class="">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
-        <view class="msg--image" :class="guest ? 'right': 'left'">
-            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
-        </view>
-    </view>
+<template>
+    <view class="">
+        <text class="name" v-if="!guest && name">{{ name }}</text>
+        <view class="msg--image" :class="guest ? 'right': 'left'">
+            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
+        </view>
+    </view>
 </template>
 
 <script>
@@ -26,10 +26,10 @@
             guest: {
                 type: Boolean,
                 default: true
-            },
-            name: {
-                type: String,
-                default: ''
+            },
+            name: {
+                type: String,
+                default: ''
             }
         },
         methods: {
@@ -45,30 +45,28 @@
     }
 </script>
 
-<style scoped lang="scss">
-    .name {
-        font-size: 24rpx;
-        line-height: 34rpx;
+<style scoped lang="scss">
+    .name {
+        font-size: 24rpx;
         color: $text-gray-m;
-        padding-bottom: 10rpx;
-    }
-    
+    }
+
     .msg--image {
-        // padding: 20rpx;
+        .img {
+            width: 180rpx;
+        }
 
         &.left {
-            border-radius: 0 20rpx 20rpx 20rpx;
-            // background: white;
+            .img {
+                border-radius: 0 10rpx 10rpx 10rpx;
+            }
         }
 
         &.right {
-            border-radius: 20rpx 0 20rpx 20rpx;
-            // background: #34CE98;
+            .img {
+                border-radius: 10rpx 0 10rpx 10rpx;
+            }
         }
 
-        .img {
-            width: 150rpx;
-            border-radius: 10rpx;
-        }
     }
 </style>
diff --git a/pages/im/components/showText.vue b/pages/im/components/showText.vue
index 946dc69..2f32ebe 100644
--- a/pages/im/components/showText.vue
+++ b/pages/im/components/showText.vue
@@ -1,8 +1,8 @@
 <template>
     <view class="msg--text">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
-        <view>
-            <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
+        <text class="name" v-if="!guest && name">{{ name }}</text>
+        <view>
+            <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
         </view>
     </view>
 </template>
@@ -13,8 +13,8 @@
         props: {
             msg: {
                 type: Object,
-                default: () => {
-                    return {}
+                default: () => {
+                    return {}
                 }
             },
             name: {
@@ -32,22 +32,24 @@
 <style scoped lang="scss">
     .msg--text {
         .name {
-            font-size: 26rpx;
-            color: $text-gray-m;
-            display: inline-block;
+            font-size: 24rpx;
+            color: $text-gray-m;
         }
+
         .im--text {
             max-width: 508rpx;
             padding: 20rpx;
             line-height: 46rpx;
             font-size: 32rpx;
-            color: $text-color;
-            display: inline-block;
-            word-break: break-all;
+            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;
diff --git a/pages/im/components/showVoice.vue b/pages/im/components/showVoice.vue
index 3963f55..f081dd7 100644
--- a/pages/im/components/showVoice.vue
+++ b/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;
diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index cb8f982..efdb6f0 100644
--- a/pages/im/group/chat.vue
+++ b/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"
-                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
                             <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"
@@ -186,7 +185,7 @@
                         color: #666;
                     }
 
-                    .cell-item {
+                    .cell-item {
                         display: flex;
                         width: 690rpx;
                         justify-content: flex-start;
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index d9c6bef..aa954fa 100644
--- a/pages/im/private/chat.vue
+++ b/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"
-                                :msg="item.content" />
+                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" />
                             <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"