365 lines
9.1 KiB
Vue
365 lines
9.1 KiB
Vue
<template>
|
|
<!-- 聊天窗口 -->
|
|
<div class="train-chat">
|
|
<audio ref="audio" style="display: none;" />
|
|
<div ref="content" class="chatContent">
|
|
<ul class="newsList">
|
|
<div v-for="(nor, index) in textList" :key="index" style="margin-top: 5px;">
|
|
<li v-if="nor.self" style="position: relative">
|
|
<div class="userName" style="position: absolute; right: 4px; top: 4px; font-size: 14px;">
|
|
{{ nor.chatTime }} {{ nor.userName }}</div>
|
|
<div class="news">
|
|
<span>{{ nor.value }}</span>
|
|
</div>
|
|
<div v-if="nor.voice" class="yuyin" @click="playAudio(nor)">
|
|
<i class="el-icon-caret-right" />
|
|
</div>
|
|
</li>
|
|
<li v-if="nor.other" style="position: relative">
|
|
<div class="userName" style="position: absolute; left: 12px; top: 4px; font-size: 14px;">
|
|
{{ nor.userName }} {{ nor.chatTime }}</div>
|
|
<div class="answers">
|
|
<span>{{ nor.value }}</span>
|
|
</div>
|
|
<div v-if="nor.voice" class="yuyin1" @click="playAudio(nor)">
|
|
<i class="el-icon-caret-right" />
|
|
</div>
|
|
</li>
|
|
<li v-if="nor.join" style="font-size: 12px; text-align: center;">{{ nor.roomTip }}</li>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
<div class="footChat">
|
|
<div class="inputBox">
|
|
<textarea
|
|
id="dope"
|
|
v-model="text"
|
|
style="width: 99%;height: 47px; border: none;outline: none;"
|
|
name=""
|
|
rows=""
|
|
cols=""
|
|
/>
|
|
<button class="sendBtn" @click="sendText()">发送文字</button>
|
|
<div
|
|
class="sendBtn yuyin_start zIndex1"
|
|
:style="{background: background}"
|
|
@mousedown="startRecording()"
|
|
@mouseup="stopRecording()"
|
|
>{{ speak }}</div>
|
|
<div v-show="sending" class="sendBtn yuyin_start zIndex2" :style="{background: background}">
|
|
发送中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HZRecorder from '@/utils/HZRecorder';
|
|
import { getHistoryVoice, chatWithText, chatWithAudio } from '@/api/chat';
|
|
|
|
export default {
|
|
name: 'TrainChat',
|
|
props: {
|
|
groupRoom: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
textList: [],
|
|
topic: '/user/topic/chatroom',
|
|
text: '',
|
|
recorders: null,
|
|
stomp: null,
|
|
speak: '按住说话',
|
|
sending: false,
|
|
background: '',
|
|
userId: ''
|
|
};
|
|
},
|
|
watch: {
|
|
'$store.state.socket.chatContentList': function (val) { // 房间内语音聊天
|
|
if (val.chatInfo) {
|
|
this.handelTextList(val);
|
|
}
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.userId = this.$store.state.user.id;
|
|
// this.getHistory(); // 获取历史记录
|
|
},
|
|
methods: {
|
|
// 发送文字
|
|
async sendText() {
|
|
if (!this.text.trim()) {
|
|
alert('内容为空，不可发送！');
|
|
this.text = '';
|
|
} else {
|
|
try {
|
|
await chatWithText(this.text, this.groupRoom);
|
|
this.text = '';
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
},
|
|
// 语音录制开始
|
|
startRecording() {
|
|
this.background = '#ccc';
|
|
this.speak = '录音中...';
|
|
this.sending = false;
|
|
HZRecorder.init.get(rec => {
|
|
if (typeof rec == 'object') {
|
|
this.recorders = rec;
|
|
this.recorders.start();
|
|
}
|
|
});
|
|
},
|
|
// 停止录制
|
|
async stopRecording() {
|
|
this.background = '';
|
|
this.speak = '按住说话';
|
|
this.sending = true;
|
|
if (this.recorders) {
|
|
this.recorders.stop();
|
|
var fd = new FormData();
|
|
fd.append('file', this.recorders.getBlob());
|
|
await chatWithAudio(fd, this.$route.query.group).catch(error => {
|
|
this.sending = false;
|
|
const message = JSON.parse(error.message);
|
|
if (message.err_no == 3301) {
|
|
this.$message({
|
|
showClose: true,
|
|
message: '音频质量有问题',
|
|
type: 'error'
|
|
});
|
|
} else if (message.err_no == 3308) {
|
|
this.$message({
|
|
showClose: true,
|
|
message: '音频过长,建议60s以下',
|
|
type: 'error'
|
|
});
|
|
} else if (message.err_no == 3314) {
|
|
this.$message({
|
|
showClose: true,
|
|
message: '音频太短,建议重录',
|
|
type: 'error'
|
|
});
|
|
} else {
|
|
this.$message({
|
|
showClose: true,
|
|
message: '网络问题，请重试',
|
|
type: 'error'
|
|
});
|
|
}
|
|
});
|
|
this.recorders = null;
|
|
} else {
|
|
this.sending = false;
|
|
this.$message({
|
|
showClose: true,
|
|
message: '音频太短,建议重录',
|
|
type: 'error'
|
|
});
|
|
}
|
|
},
|
|
playAudio(nor) {
|
|
this.$refs.audio.src = nor.src;
|
|
this.$refs.audio.play();
|
|
},
|
|
// 获取历史记录
|
|
async getHistory(obj, node, data) {
|
|
this.textList = [];
|
|
try {
|
|
const res = await getHistoryVoice(this.code);
|
|
res.data.forEach(item => {
|
|
let isSelf = false;
|
|
if (item.userId == this.userId) {
|
|
isSelf = true;
|
|
}
|
|
const param = {
|
|
join: false,
|
|
value: item.message,
|
|
self: isSelf,
|
|
voice: item.isAudio,
|
|
src: item.isAudio ? `${process.env.VOICE_API}/jlcloud/audio/${item.audioPath}` : '',
|
|
other: !isSelf,
|
|
userName: item.nickName,
|
|
chatTime: item.chatTime
|
|
};
|
|
this.handelTextList(param);
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
// 操作聊天内容list
|
|
handelTextList(params) {
|
|
if (!params.inSimulation) {
|
|
this.textList.push(params);
|
|
this.textList.sort((a, b) => {
|
|
return a.date - b.date;
|
|
});
|
|
}
|
|
this.sending = false;
|
|
this.$store.dispatch('socket/setChatContentList', {});
|
|
this.$nextTick(() => {
|
|
if (this.$refs.content) {
|
|
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #c7c7c7;
|
|
}
|
|
|
|
.train-chat {
|
|
border: 1px solid #ccc;
|
|
height: 100%;
|
|
width: 480px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.chatContent {
|
|
-webkit-box-flex: 1;
|
|
overflow-y: scroll;
|
|
padding-right: 8px;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.newsList {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
|
|
li {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.news {
|
|
max-width: 55%;
|
|
width: auto;
|
|
height: auto;
|
|
background: #2683f5;
|
|
padding: 6px 10px;
|
|
margin-top: 15px;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
float: right;
|
|
color: #fff;
|
|
text-align: left;
|
|
|
|
.jiao {
|
|
position: absolute;
|
|
right: -8px;
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
.answers {
|
|
max-width: 55%;
|
|
width: auto;
|
|
height: auto;
|
|
background: #eee;
|
|
padding: 5px 10px;
|
|
margin-top: 15px;
|
|
line-height: 22px;
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
margin-left: 10px;
|
|
position: relative;
|
|
float: left;
|
|
text-align: left;
|
|
|
|
.jiao {
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.yuyin {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
margin-top: 21px;
|
|
margin-right: 3px;
|
|
float: right;
|
|
border: 1px solid #ccc;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.yuyin1 {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
margin-top: 21px;
|
|
margin-left: 3px;
|
|
float: left;
|
|
border: 1px solid #ccc;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.footChat {
|
|
width: 100%;
|
|
height: 83px;
|
|
border-top: 1px solid #ccc;
|
|
position: relative;
|
|
|
|
.inputBox {
|
|
textarea {
|
|
width: 99%;
|
|
height: 75px;
|
|
border: none;
|
|
outline: none;
|
|
resize: none;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.sendBtn {
|
|
width: 70px;
|
|
height: 25px;
|
|
background: #0188fb;
|
|
border: 0;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.yuyin_start {
|
|
right: 84px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|