500 lines
15 KiB
Vue
500 lines
15 KiB
Vue
<template>
|
|
<!-- 聊天窗口 -->
|
|
<div class="chat">
|
|
<div class="chat__head">
|
|
<div class="chat__head--title"> 会话窗口</div>
|
|
</div>
|
|
<div ref="content" class="chat__container" :style="{height: listHeight+'px'}">
|
|
<ul class="chat__container--list">
|
|
<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;">
|
|
{{ covertTime(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 }} {{ covertTime(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" class="roomTip">{{ nor.roomTip }}</li>
|
|
</div>
|
|
</ul>
|
|
<div v-if="recordSending" class="chat_record_tip">
|
|
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
|
|
<div class="record_icon" />
|
|
<div class="record_tip_text">正在录音...</div>
|
|
<div class="record_tip_confirm" @click="stopRecording()">确定</div>
|
|
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
|
|
</div>
|
|
</div>
|
|
<audio ref="audio" />
|
|
<div class="chat__footer">
|
|
<div class="chat_tool">
|
|
<div class="microphoneBtn" @click="startRecording()">
|
|
<span class="el-icon-microphone" />
|
|
</div>
|
|
</div>
|
|
<textarea id="dope" v-model="text" class="chat__footer--text" style="width: 99%;height: 47px; border: none;outline: none;" @keyup="handleSetInputState" @keyup.enter="handleSendText" />
|
|
<button class="chat__footer--send" :disabled="disabled" @click="handleSendText">{{ $t('trainRoom.sendText') }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import HZRecorder from '@/utils/HZRecorder';
|
|
import RecordRTC from 'recordrtc';
|
|
import { chatWithText, chatWithAudio, chatWithAudioNew } from '@/api/chat';
|
|
import { chatWithTextNew } from '@/api/jointTraining';
|
|
|
|
export default {
|
|
props: {
|
|
room: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
members: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
height: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
textList: [],
|
|
recordSending:false,
|
|
text: '',
|
|
seconds:0,
|
|
inter:null,
|
|
recorders: null,
|
|
sending: false,
|
|
disabled:true,
|
|
microphone:null,
|
|
baseUrl:process.env.VUE_APP_VOICE_API
|
|
};
|
|
},
|
|
computed: {
|
|
listHeight() {
|
|
return this.height - 119;
|
|
},
|
|
group() {
|
|
return this.$route.query.group;
|
|
},
|
|
userId() {
|
|
return this.$store.state.user ? this.$store.state.user.id : '';
|
|
},
|
|
drawWay() {
|
|
const drawWay = this.$route.query.drawWay;
|
|
return drawWay && JSON.parse(drawWay);
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.socket.chatContent': function (val) { // 房间内语音聊天
|
|
if (val.chatInfo) {
|
|
this.handelTextList(val);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async handleSetInputState(keyCode) {
|
|
if (!this.text.trim()) {
|
|
this.disabled = true;
|
|
} else {
|
|
this.disabled = false;
|
|
}
|
|
},
|
|
covertTime(time) {
|
|
return time.slice(0, time.indexOf('.'));
|
|
},
|
|
async handleSendText() {
|
|
try {
|
|
if (this.text.trim()) {
|
|
if (this.drawWay) {
|
|
await chatWithTextNew(this.text, this.group);
|
|
} else {
|
|
await chatWithText(this.text, this.group);
|
|
}
|
|
this.text = '';
|
|
this.disabled = true;
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
async 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/setChatContent', {});
|
|
this.$nextTick(() => {
|
|
if (this.$refs.content) {
|
|
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
|
|
}
|
|
});
|
|
},
|
|
// 语音录制开始
|
|
startRecording() {
|
|
const that = this;
|
|
if (!this.recordSending && !this.recorders && !this.microphone) {
|
|
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
|
|
navigator.getUserMedia(
|
|
{ audio: true } // 只启用音频
|
|
, function (stream) {
|
|
that.microphone = stream;
|
|
that.recorders = new RecordRTC(that.microphone, {
|
|
type: 'audio',
|
|
recorderType: StereoAudioRecorder,
|
|
numberOfAudioChannels: 1,
|
|
bitsPerSecond:256000,
|
|
desiredSampRate: 16000
|
|
});
|
|
that.recorders.startRecording();
|
|
that.recordSending = true;
|
|
that.inter = setInterval(() => {
|
|
if (that.seconds < 60) {
|
|
that.seconds++;
|
|
} else {
|
|
clearInterval(that.inter);
|
|
}
|
|
}, 1000);
|
|
}, function (error) {
|
|
switch (error.code || error.name) {
|
|
case 'PERMISSION_DENIED':
|
|
case 'PermissionDeniedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '用户拒绝提供信息',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
case 'NOT_SUPPORTED_ERROR':
|
|
case 'NotSupportedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '浏览器不支持硬件设备',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
case 'MANDATORY_UNSATISFIED_ERROR':
|
|
case 'MandatoryUnsatisfiedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '无法发现指定的硬件设备',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
default:
|
|
that.$message({
|
|
showClose: true,
|
|
message: '无法打开麦克风',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
},
|
|
// 停止录制
|
|
stopRecording() {
|
|
const that = this;
|
|
this.recorders.stopRecording(function(blobURL) {
|
|
clearInterval(that.inter);
|
|
that.seconds = 0;
|
|
const blob = that.recorders.getBlob();
|
|
const fd = new FormData();
|
|
fd.append('file', blob);
|
|
if (that.drawWay) {
|
|
chatWithAudioNew(fd, that.group)
|
|
.then((data) => {
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
} else {
|
|
chatWithAudio(fd, that.group)
|
|
.then((data) => {
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
if (that.microphone) {
|
|
that.microphone.stop();
|
|
that.microphone = null;
|
|
that.recordSending = false;
|
|
that.recorders = null;
|
|
}
|
|
});
|
|
},
|
|
cancleRecording() {
|
|
if (this.microphone) {
|
|
clearInterval(this.inter);
|
|
this.seconds = 0;
|
|
this.microphone.stop();
|
|
this.microphone = null;
|
|
this.recordSending = false;
|
|
this.recorders = null;
|
|
}
|
|
},
|
|
playAudio(nor) {
|
|
this.$refs.audio.src = this.baseUrl + nor.src;
|
|
this.$refs.audio.play();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #c7c7c7;
|
|
}
|
|
|
|
.chat {
|
|
border: 1px solid #ccc;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
&__head {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f0f0f0;
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
&--title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
padding:10px 0px 10px 10px;
|
|
}
|
|
}
|
|
|
|
&__container {
|
|
-webkit-box-flex: 1;
|
|
overflow-y: scroll;
|
|
padding-right: 8px;
|
|
padding-left: 2px;
|
|
position: relative;
|
|
&--list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
|
|
li {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.roomTip{
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
#record_progress_bar{
|
|
height: 100%;
|
|
position: absolute;
|
|
background: #bbe5f5;
|
|
}
|
|
|
|
.chat_record_tip{
|
|
height: 28px;
|
|
display: inline-block;
|
|
background: #dfe6ee;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
border-top: 1px #d8dce5 solid;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.record_icon{
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #25d825;
|
|
border-radius: 10px;
|
|
left: 7px;
|
|
margin-right: 0px;
|
|
box-shadow: -1px 0px 3px #6d6d6d;
|
|
border: 1px #28d228 solid;
|
|
position: absolute;
|
|
top: 10px;
|
|
}
|
|
.record_tip_text{
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
margin-left: 3px;
|
|
// padding: 8px 0px 6px 0px;
|
|
position: absolute;
|
|
top: 8px;
|
|
left:20px
|
|
}
|
|
.record_tip_confirm{
|
|
position: absolute;
|
|
right: 63px;
|
|
padding: 3px 0px 2px 0px;
|
|
border: 1px #a2a5aa solid;
|
|
border-radius: 5px;
|
|
width: 45px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
top: 4px;
|
|
background: #eeeeee;
|
|
cursor: pointer;
|
|
}
|
|
.record_tip_cancle{
|
|
position: absolute;
|
|
right: 10px;
|
|
padding: 3px 0px 2px 0px;
|
|
border: 1px #a2a5aa solid;
|
|
border-radius: 5px;
|
|
width: 45px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
top: 4px;
|
|
background: #eeeeee;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__footer {
|
|
width: 100%;
|
|
height: 113px;
|
|
position: relative;
|
|
|
|
.chat_tool{
|
|
border-top: 1px solid #d8dce5;
|
|
width: 100%;
|
|
padding: 5px;
|
|
}
|
|
.microphoneBtn{
|
|
font-size: 18px;
|
|
padding: 2px;
|
|
width: 24px;
|
|
text-align: center;
|
|
&:hover{
|
|
color:#0188fb;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&--text {
|
|
width: 99%;
|
|
height: 75px;
|
|
border: none;
|
|
outline: none;
|
|
resize: none;
|
|
font-size: 16px;
|
|
padding-left: 10px;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
&--send {
|
|
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;
|
|
&:disabled{
|
|
background: #6dbcff;
|
|
cursor: no-drop;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|