From d92fb30648863bb16dc8748ba0670ee509c037da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Tue, 22 Feb 2022 16:38:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AF=AD=E9=9F=B3=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/sentVoice.vue |  8 ++---
 pages/im/components/showVoice.vue | 51 +++++++++++++++++++++++--------
 pages/im/group/chat.vue           |  6 +++-
 3 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/pages/im/components/sentVoice.vue b/pages/im/components/sentVoice.vue
index 30a60c1..ae7a66d 100644
--- a/pages/im/components/sentVoice.vue
+++ b/pages/im/components/sentVoice.vue
@@ -100,7 +100,8 @@
 
 <style scoped lang="scss">
     .send--voice {
-        .voice {
+        .voice {
+            display: flex;
             background: $window-color;
             height: 70rpx;
             line-height: 70rpx;
@@ -109,14 +110,14 @@
             width: 500rpx;
             border-radius: 10rpx;
             margin-right: 15rpx;
-
             .button {
                 font-size: 30rpx;
                 color: #333;
             }
         }
 
-        .modal {
+        .modal {
+            display: flex;
             background: rgba(0, 0, 0, .6);
             position: fixed;
             height: 200rpx;
@@ -128,7 +129,6 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-
             .icon {
                 width: 88rpx;
                 height: 88rpx;
diff --git a/pages/im/components/showVoice.vue b/pages/im/components/showVoice.vue
index c090e9e..7f6fafc 100644
--- a/pages/im/components/showVoice.vue
+++ b/pages/im/components/showVoice.vue
@@ -3,8 +3,8 @@
         <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
         <view class="msg--voice">
             <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>
+                <image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                <image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }" src="@/static/icon/audio_white.png" mode="widthFix"></image>
                 <text class="duration">{{ duration }}"</text>
             </view>
             <u-badge isDot :show="message.content.local =='' && isRemote" />
@@ -27,12 +27,13 @@
             isGroup: {
                 type: Boolean,
                 default: false
-            }
+            }
         },
         data() {
             return {
                 onPlay: false,
                 innerAC: null,
+                msgId  : null
             }
         },
         computed: {
@@ -62,7 +63,12 @@
                     this.stopPlay()
                 }
             })
-        },
+        },
+        
+        created() {
+            console.log(this.message.messageId)
+        },
+        
         methods: {
             // 播放语音消息
             startPlay() {
@@ -91,15 +97,17 @@
                     })
                 }
             },
-            playVoice(path) {
+            playVoice(path) {
                 console.log('准备播放', this.message.content);
                 this.innerAC = uni.createInnerAudioContext()
                 this.innerAC.src = path
-                this.innerAC.autoplay = false
-                this.innerAC.onCanplay(res => {
+                this.innerAC.autoplay = false
+                this.msgId = this.message.messageId
+                this.innerAC.onCanplay(res => {
                     this.innerAC.play()
-                })
-                this.innerAC.onPlay(res => {
+                })
+                
+                this.innerAC.onPlay(res => {
                     this.onPlay = true
                     uni.$emit('onVoiceMessagePlay', this.message.messageId)
                 })
@@ -109,10 +117,11 @@
                 this.innerAC.onStop(() => {
                     this.onPlay = false
                     this.innerAC.destroy()
-                    this.innerAC = null
+                    this.innerAC = null
+                    this.msgId   = null
                     uni.$emit('onVoiceMessageStop', this.message.messageId)
                 })
-                this.innerAC.onError(err => {
+                this.innerAC.onError(err => {
                     uni.showToast({
                         icon: 'none',
                         title: '语音播放失败'
@@ -127,7 +136,25 @@
             }
         }
     }
-</script>
+</script>
+
+<style>
+    @keyframes playFlicker{
+        0%{
+            opacity: 1;
+        }
+        50%{
+            opacity: .5;
+        }
+        100%{
+            opacity: 1;
+        }
+    }
+    
+    .videoFlicker{
+        animation: playFlicker 1s infinite;
+    }
+</style>
 
 <style scoped lang="scss">
     .name {
diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index ab2a2d1..98b5f2c 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -10,7 +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'" :message="item" isGroup />
+                            <show-voice ref="voice" v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
                             <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" isGroup />
                             <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" isGroup />
                         </view>
@@ -150,6 +150,10 @@
                     im.setNotifyBadge()
                 }
             }
+        },
+        onHide() {
+            // console.log(JSON.stringify(this.$refs))
+            this.$refs.voice.stopPlay()
         }
     }
 </script>