cansnow
133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
<template>
|
|
<view class="voice_message_container bg_container">
|
|
<view @tap="handleAudio"
|
|
:class="{'content-audio-container':true,'chat-audio-container-me':true}"
|
|
:style="'width:'+((message.soundElem.duration)*2+130)+'rpx'">
|
|
<view class="voice_icon"
|
|
:class="[
|
|
{ voice_icon_right: isSender },
|
|
{ voice_icon_left: !isSender },
|
|
{ voice_icon_right_an: isSender && message.clientMsgID == storeCurrentMsg.clientMsgID},
|
|
{ voice_icon_left_an: !isSender && message.clientMsgID == storeCurrentMsg.clientMsgID }
|
|
]">
|
|
</view>
|
|
<view class="">{{message.soundElem.duration}}s</view>
|
|
</view>
|
|
</view>
|
|
</template>v
|
|
|
|
<script>
|
|
import {mapGetters,mapActions} from "vuex";
|
|
import util from "@/util"
|
|
import md5 from "md5";
|
|
export default {
|
|
name: "VoiceMessageRender",
|
|
components: {},
|
|
props: {
|
|
message: Object,
|
|
isSender: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
conversationID:String,
|
|
},
|
|
data() {
|
|
return {
|
|
src:"",
|
|
};
|
|
},
|
|
computed:{
|
|
...mapGetters(["storeCurrentMsg"]),
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
async init(){
|
|
//console.log(this.message);
|
|
const self = this;
|
|
let audio = this.message.soundElem;
|
|
const snapshotUrl = audio.sourceUrl;
|
|
util.cacheFile(snapshotUrl,`${this.conversationID}`).then((fn)=>{
|
|
self.src = fn;
|
|
//console.log(fn);
|
|
});
|
|
},
|
|
handleAudio(){
|
|
const event = {
|
|
message:this.message,
|
|
src:this.src,
|
|
type:'audio_msg_click'
|
|
};
|
|
this.$emit("messageEvent",event);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
//语音信息样式
|
|
.content-audio-container {
|
|
border-radius: 10rpx;
|
|
padding: 0 20rpx;
|
|
/* #ifndef APP-NVUE */
|
|
max-width: 500rpx;
|
|
/* #endif */
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.voice_icon {
|
|
height: 34rpx;
|
|
width: 34rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.voice_icon_right {
|
|
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.voice_icon_left {
|
|
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.voice_icon_right_an {
|
|
animation: voiceAn_right 1s linear alternate infinite;
|
|
}
|
|
|
|
.voice_icon_left_an {
|
|
animation: voiceAn_left 1s linear alternate infinite;
|
|
}
|
|
|
|
@keyframes voiceAn_right {
|
|
0% {
|
|
background-image: url('@/static/images/chat/voice/voice-left-1.png');
|
|
}
|
|
|
|
50% {
|
|
background-image: url('@/static/images/chat/voice/voice-left-2.png');
|
|
}
|
|
|
|
100% {
|
|
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
|
}
|
|
}
|
|
|
|
@keyframes voiceAn_left {
|
|
0% {
|
|
background-image: url('@/static/images/chat/voice/voice-right-1.png');
|
|
}
|
|
|
|
50% {
|
|
background-image: url('@/static/images/chat/voice/voice-right-2.png');
|
|
}
|
|
|
|
100% {
|
|
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
|
}
|
|
}
|
|
}
|
|
</style> |