120 lines
3.6 KiB
Vue
120 lines
3.6 KiB
Vue
<template>
|
||
<view class="">
|
||
<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">{{ 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: {
|
||
message: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
isGroup: {
|
||
type: Boolean,
|
||
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() {
|
||
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);
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.name {
|
||
font-size: 24rpx;
|
||
color: $text-gray-m;
|
||
}
|
||
|
||
.msg--voice {
|
||
display: flex;
|
||
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>
|