259 lines
9.0 KiB
Vue
259 lines
9.0 KiB
Vue
|
<template>
|
||
|
|
<div class="chatcontentIn">
|
||
|
|
<div class="chatcontentInner">
|
||
|
|
<div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass">
|
||
|
|
<div :class="chatContent.self?'rightUser':'leftUser'">
|
||
|
|
<div class="userHeader">
|
||
|
|
<!-- chatContent.all&& -->
|
||
|
|
<div v-if="!chatContent.self" class="userName">{{ covertName(chatContent.member,false) }}</div>
|
||
|
|
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="userBubble" @click="playAudio(baseUrl+chatContent.src)">
|
||
|
|
<div class="userMessage">
|
||
|
|
<!-- chatContent.all&& -->
|
||
|
|
<span v-if="!chatContent.member.robot&&chatContent.all">{{ covertName(chatContent.targetUser,true) }}</span>
|
||
|
|
<span class="el-icon-video-play playicon" />
|
||
|
|
<span class="messageText">{{ chatContent.message }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<audio id="audioPlay" style="display:none" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import ConstConfig from '@/scripts/ConstConfig';
|
||
|
|
import Cookies from 'js-cookie';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
messageList:{
|
||
|
|
type:Array,
|
||
|
|
required:true
|
||
|
|
},
|
||
|
|
isAnswering:{
|
||
|
|
type:Boolean,
|
||
|
|
required:true
|
||
|
|
},
|
||
|
|
conversitionId: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chatContentList:[],
|
||
|
|
coversition:{},
|
||
|
|
currentAudioList:[],
|
||
|
|
currentAudioIndex:0,
|
||
|
|
isPlay:false,
|
||
|
|
baseUrl:process.env.VUE_APP_VOICE_API
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
'$store.state.socket.simulationText':function (val, old) { // 仿真聊天
|
||
|
|
const simulationText = this.$store.state.socket.simulationText;
|
||
|
|
if (this.conversitionId == val.id) {
|
||
|
|
this.chatContentList.push(simulationText);
|
||
|
|
if (simulationText.userId != this.$store.state.user.id) {
|
||
|
|
this.currentAudioList.push(this.baseUrl + simulationText.src);
|
||
|
|
if (!this.isPlay) {
|
||
|
|
this.isPlay = true;
|
||
|
|
this.playAllAudio();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.scrollTop();
|
||
|
|
} else if (this.userRole === 'AUDIENCE') {
|
||
|
|
this.messageList.push(simulationText.data);
|
||
|
|
if (simulationText.userId != this.$store.state.user.id) {
|
||
|
|
this.currentAudioList.push(this.baseUrl + simulationText.src);
|
||
|
|
if (!this.isPlay) {
|
||
|
|
this.isPlay = true;
|
||
|
|
this.playAllAudio();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// this.coversition = this.currentCoversition;
|
||
|
|
// this.inintData();
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
inintData() {
|
||
|
|
// if (this.coversition.id) {
|
||
|
|
// getSimulationContextListNew(this.$route.query.group, this.coversition.id).then(res=>{
|
||
|
|
// const userId = this.$store.state.user.id;
|
||
|
|
// const coversitionList = res.data.map(coversition=>{
|
||
|
|
// coversition.self = false;
|
||
|
|
// if (coversition.member.userId == userId) {
|
||
|
|
// coversition.self = true;
|
||
|
|
// }
|
||
|
|
// coversition.src = coversition.isAudio ? `/audio/${coversition.audioPath}` : '';
|
||
|
|
// coversition.targetUser = coversition.targetMember ? coversition.targetMember : 'All';
|
||
|
|
// return coversition;
|
||
|
|
// });
|
||
|
|
// this.chatContentList = coversitionList;
|
||
|
|
// this.scrollTop();
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
// const coversitionListAll = Object.assign({}, this.$store.state.socket.coversitionList);
|
||
|
|
// const coversitionList = coversitionListAll[this.coversition.id] || [];
|
||
|
|
// // console.log('inintData---coversitionList' + JSON.stringify(this.$store.state.socket.coversitionList[this.coversition.id]));
|
||
|
|
// this.chatContentList = coversitionList;
|
||
|
|
},
|
||
|
|
scrollTop() {
|
||
|
|
this.$nextTick(function() {
|
||
|
|
const scrollTop = document.querySelector('.chatcontentInner').offsetHeight - document.querySelector('.chatcontentIn').offsetHeight + 30;
|
||
|
|
document.querySelector('.chatcontentIn').scrollTop = scrollTop;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
formatTime(time) {
|
||
|
|
return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
|
||
|
|
},
|
||
|
|
playAllAudio() {
|
||
|
|
this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
|
||
|
|
},
|
||
|
|
playEachAudio(audioUrl) {
|
||
|
|
this.$nextTick(function() {
|
||
|
|
document.querySelector('#audioPlay').src = audioUrl;
|
||
|
|
document.querySelector('#audioPlay').play();
|
||
|
|
const that = this;
|
||
|
|
document.querySelector('#audioPlay').onended = function() {
|
||
|
|
that.currentAudioList.shift();
|
||
|
|
console.log(that.currentAudioList.length);
|
||
|
|
if (that.currentAudioList.length > 0) {
|
||
|
|
that.playEachAudio(that.currentAudioList[that.currentAudioIndex]);
|
||
|
|
} else {
|
||
|
|
that.isPlay = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
},
|
||
|
|
covertName(data, status) {
|
||
|
|
if (data != 'All') {
|
||
|
|
if (data instanceof Array) {
|
||
|
|
let result = '';
|
||
|
|
data.forEach(each=>{
|
||
|
|
result += this.covertEachName(each, status);
|
||
|
|
});
|
||
|
|
return result;
|
||
|
|
} else {
|
||
|
|
return this.covertEachName(data, status);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return '@All';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
covertEachName(data, status) {
|
||
|
|
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||
|
|
roleTypeList.forEach(function(element) {
|
||
|
|
const rolename = element.value;
|
||
|
|
if (Cookies.get('user_lang') == 'en') {
|
||
|
|
if (rolename == data.role) {
|
||
|
|
data.role = element.enLabel;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (rolename == data.role) {
|
||
|
|
data.role = element.label;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const deviceName = data.deviceName ? '-' + data.deviceName : '';
|
||
|
|
const memberName = data.name ? '-' + data.name : '';
|
||
|
|
if (status) {
|
||
|
|
return '@' + data.role + deviceName + memberName;
|
||
|
|
} else {
|
||
|
|
return data.role + deviceName + memberName;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
playAudio(audioUrl) {
|
||
|
|
document.querySelector('#audioPlay').src = audioUrl;
|
||
|
|
document.querySelector('#audioPlay').play();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.chatcontentIn{
|
||
|
|
height: 100%;
|
||
|
|
width: 380px;
|
||
|
|
display: inline-block;
|
||
|
|
overflow: auto;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
cursor:auto;
|
||
|
|
}
|
||
|
|
.leftUser{
|
||
|
|
float: left;
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.rightUser{
|
||
|
|
float: right;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.userHeader{margin-bottom: 2px;}
|
||
|
|
.userName{font-size: 12px;display:inline-block;}
|
||
|
|
.userChatTime{font-size: 12px;display:inline-block;}
|
||
|
|
.userBubble{
|
||
|
|
max-width: 200px;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 10px;
|
||
|
|
background: #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.playicon{
|
||
|
|
font-size: 20px;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
.textRight{text-align: right;width: 100%;}
|
||
|
|
.userMessage{}
|
||
|
|
.messageText{line-height: 20px;}
|
||
|
|
.chatContentInClass{
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
||
|
|
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||
|
|
.chatcontentIn::-webkit-scrollbar {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
// height: 110px;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
||
|
|
.chatcontentIn::-webkit-scrollbar-track {
|
||
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||
|
|
border-radius: 10px;
|
||
|
|
background-color: #FFFFFF;;
|
||
|
|
}
|
||
|
|
/*定义滑块 内阴影+圆角*/
|
||
|
|
.chatcontentIn::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 10px;
|
||
|
|
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||
|
|
background-color: #cacaca;
|
||
|
|
}
|
||
|
|
/*滑块效果*/
|
||
|
|
.chatcontentIn::-webkit-scrollbar-thumb:hover {
|
||
|
|
border-radius: 5px;
|
||
|
|
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
|
|
background: rgba(0,0,0,0.4);
|
||
|
|
}
|
||
|
|
/*IE滚动条颜色*/
|
||
|
|
html {
|
||
|
|
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
||
|
|
scrollbar-highlight-color:#000;
|
||
|
|
scrollbar-3dlight-color:#000;
|
||
|
|
scrollbar-darkshadow-color:#000;
|
||
|
|
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
||
|
|
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
||
|
|
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
||
|
|
}
|
||
|
|
</style>
|