431 lines
12 KiB
Vue
431 lines
12 KiB
Vue
<template>
|
|
<!-- v-quickMenuDrag -->
|
|
<div class="chatBox">
|
|
<div v-show="!minimize" class="chat-box">
|
|
<chat-member-list ref="chatMemberList" :group="group" @addCoversition="addCoversition" />
|
|
<div class="chat-box-main">
|
|
<chat-coversition-list ref="chatCoversitionList" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
|
|
<div class="chat-window">
|
|
<div class="chat-box-header">
|
|
<div class="chat-box-header-title">{{ headerTitle }}</div>
|
|
<div class="minimality" @click="handleMinimality('min')">
|
|
<i class="el-icon-remove" />
|
|
</div>
|
|
<div v-show="currentCoversition.group==undefined?true:currentCoversition.group" class="showMembers" @click="handleMembers()">
|
|
<i class="el-icon-user-solid" />
|
|
</div>
|
|
<div class="chat-setting" @click="handleSetting()">
|
|
<i class="el-icon-s-tools" />
|
|
</div>
|
|
</div>
|
|
<div class="chat-box-content">
|
|
<chat-content ref="chatContent" :current-coversition="currentCoversition" @changeCoversition="changeCoversition" />
|
|
<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>
|
|
<div class="chat-box-footer">
|
|
<div class="chat-box-footer-tool" />
|
|
<div class="chat-box-footer-send" @click="startRecording()">发送语音</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="minimize" class="reminder-drag minimize-box">
|
|
<div class="chat-title">聊天窗口</div>
|
|
<div class="minimality" @click="handleMinimality('max')">
|
|
<i class="el-icon-circle-plus" />
|
|
</div>
|
|
</div>
|
|
<chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ChatSetting from './chatSetting';
|
|
import ChatContent from './chatContent';
|
|
import ChatMemberList from './chatMemberList';
|
|
import ChatCoversitionList from './chatCoversitionList';
|
|
import RecordRTC from 'recordrtc';
|
|
import {uploadAudioFileNew} from '@/api/chat';
|
|
export default {
|
|
name: 'ChatBox',
|
|
components:{
|
|
ChatSetting,
|
|
ChatContent,
|
|
ChatMemberList,
|
|
ChatCoversitionList
|
|
},
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
minimize:false,
|
|
recordSending:false,
|
|
currentCoversition:{},
|
|
seconds:0,
|
|
inter:null,
|
|
recorders: null,
|
|
microphone:null,
|
|
form:{
|
|
language:'zh',
|
|
sex:'1'
|
|
},
|
|
headerTitle:'所有人'
|
|
};
|
|
},
|
|
watch: {
|
|
'$store.state.socket.simulationRoleList': function (val) {
|
|
if (val && val.length) {
|
|
this.$nextTick(() => {
|
|
this.$refs.chatMemberList.setMemberStatus(val);
|
|
this.$refs.chatCoversitionList.setCoversitionStatus(val);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initPage();
|
|
},
|
|
methods:{
|
|
async initPage() {
|
|
},
|
|
handleMinimality(data) {
|
|
if (data == 'min') {
|
|
this.minimize = true;
|
|
this.$refs.chatSetting.doClose();
|
|
} else {
|
|
this.minimize = false;
|
|
}
|
|
},
|
|
setSetting(data) {
|
|
this.form = data;
|
|
},
|
|
setCurrentCoversition(coversition) {
|
|
this.currentCoversition = coversition;
|
|
if (coversition.group) {
|
|
this.headerTitle = coversition.name;
|
|
}
|
|
if (this.recordSending) {
|
|
this.cancleRecording();
|
|
}
|
|
this.$refs.chatContent.scrollTop();
|
|
},
|
|
setHeadTitle(headerTitle) {
|
|
this.headerTitle = headerTitle;
|
|
},
|
|
addCoversition({data, headerTitle}) {
|
|
this.$refs.chatCoversitionList.addCoversition(data);
|
|
this.currentCoversition = {id:data.id, group:data.group};
|
|
this.headerTitle = headerTitle;
|
|
},
|
|
// 语音录制开始
|
|
startRecording() {
|
|
const that = this;
|
|
if (!this.recordSending && !this.recorders && !this.microphone) {
|
|
this.$refs.chatSetting.doClose();
|
|
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;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
},
|
|
cancleRecording() {
|
|
if (this.microphone) {
|
|
clearInterval(this.inter);
|
|
this.seconds = 0;
|
|
this.microphone.stop();
|
|
this.microphone = null;
|
|
this.recordSending = false;
|
|
this.recorders = null;
|
|
}
|
|
},
|
|
// 停止录制
|
|
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);
|
|
uploadAudioFileNew(that.group, that.form.language, that.form.sex, that.currentCoversition.id, fd)
|
|
.then((data) => {
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
if (that.microphone) {
|
|
that.microphone.stop();
|
|
that.microphone = null;
|
|
that.recordSending = false;
|
|
that.recorders = null;
|
|
}
|
|
});
|
|
},
|
|
changeCoversition(data) {
|
|
this.$refs.chatCoversitionList.changeCoversitionOther(data);
|
|
},
|
|
handleSetting() {
|
|
this.$refs.chatSetting.doShow();
|
|
},
|
|
handleMembers() {
|
|
this.$refs.chatSetting.doClose();
|
|
this.$refs.chatMemberList.doShow();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.chatBox{
|
|
width: 503px;
|
|
height: 400px;
|
|
position: absolute;
|
|
padding-left:5px;
|
|
left: 0;
|
|
bottom:28px;
|
|
z-index:22;
|
|
}
|
|
.chat-box{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chat-box-header{
|
|
width: 100%;
|
|
height: 40px;
|
|
border-bottom: 1px #dedede solid;
|
|
}
|
|
.chat-box-header-title{
|
|
font-size: 15px;
|
|
margin-left: 15px;
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
}
|
|
.chat-box-content{
|
|
width: 100%;
|
|
height: 300px;
|
|
border-bottom: 1px #dedede solid;
|
|
position: relative;
|
|
}
|
|
.chat-box-contentTip{
|
|
|
|
}
|
|
.chat-box-footer{
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.chat-window{
|
|
display: inline-block;
|
|
width: 400px;
|
|
}
|
|
.chat-setting{
|
|
float: right;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.chat-box-footer-tool{
|
|
width: 100%;
|
|
height: 30px;
|
|
}
|
|
.chat-box-footer-send{
|
|
background: #36a2fd;
|
|
width: 65px;
|
|
font-size: 12px;
|
|
padding: 5px 0px 4px 0px;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
float: right;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.minimality {
|
|
float: right;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
font-size:16px;
|
|
}
|
|
.chat-box-main{
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
height: 100%;
|
|
top: 0;
|
|
border-right: 1px #dedede solid;
|
|
z-index: 4;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
left:5px;
|
|
font-size:0;
|
|
}
|
|
.chat-coversition{
|
|
|
|
}
|
|
.coversition-list{
|
|
|
|
}
|
|
|
|
.showMembers{
|
|
float: right;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
font-size: 17px;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
.minimize-box {
|
|
width: 97.5%;
|
|
height: 40px;
|
|
position: absolute;
|
|
left: 5px;
|
|
bottom: 0;
|
|
z-index: 222;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
|
|
.chat-title {
|
|
float: left;
|
|
font-size: 15px;
|
|
margin-left: 10px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.minimality {
|
|
float: right;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
</style>
|