...

pages/im/components/showVoice.nvue

@@ -0,0 +1,106 @@
+<template>
+    <view class="">
+        <text class="name" v-if="!guest && name">{{ 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>
+            <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'showVoice',
+        props: {
+            msg: {
+                type: Object,
+                default: () => {
+                    return {
+                        local: '',
+                        remote: '',
+                        objectName: '',
+                        duration: 0
+                    }
+                }
+            },
+            name: {
+                type: String,
+                default: ''
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        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);
+                            })
+                        }
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .name {
+        font-size: 24rpx;
+        line-height: 34rpx;
+        color: $text-gray-m;
+    }
+
+    .msg--voice {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 79rpx;
+        width: 170rpx;
+        padding: 0 20rpx;
+        box-sizing: border-box;
+
+        .icon {
+            width: 38rpx;
+            height: 38rpx;
+        }
+
+        &.left {
+            border-radius: 0 20rpx 20rpx 20rpx;
+            background: white;
+
+            .duration {
+                color: #333;
+                font-size: 30rpx;
+            }
+        }
+
+        &.right {
+            border-radius: 20rpx 0 20rpx 20rpx;
+            background: $main-color;
+
+            .duration {
+                color: white;
+                font-size: 30rpx;
+            }
+        }
+    }
+</style>