语音组件优化，下载过程使用RC接口，播放优化
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user