综合演练仿真 聊天 发送语音消息
This commit is contained in:
joylink_cuiweidong
parent
26f59a4e4e
commit
545dc4a62e
@ -1,45 +1,57 @@
|
||||
export default {
|
||||
bind(el) {
|
||||
const dragDom = el;
|
||||
dragDom.style.cursor = 'move';
|
||||
bind(el) {
|
||||
const dragDom = el;
|
||||
dragDom.style.cursor = 'move';
|
||||
|
||||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||||
|
||||
dragDom.onmousedown = (e) => {
|
||||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||||
const disX = e.clientX;
|
||||
const disY = e.clientY;
|
||||
dragDom.onmousedown = (e) => {
|
||||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||||
const disX = e.clientX;
|
||||
const disY = e.clientY;
|
||||
|
||||
/** 获取到的值带px 正则匹配替换*/
|
||||
let styL, styT;
|
||||
/** 获取到的值带px 正则匹配替换*/
|
||||
let styL, styT;
|
||||
|
||||
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
|
||||
if (sty.left.includes('%')) {
|
||||
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
||||
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
||||
} else {
|
||||
styL = +sty.left.replace(/\px/g, '');
|
||||
styT = +sty.top.replace(/\px/g, '');
|
||||
}
|
||||
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
|
||||
if (sty.left.includes('%')) {
|
||||
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
||||
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
||||
} else {
|
||||
styL = +sty.left.replace(/\px/g, '');
|
||||
styT = +sty.top.replace(/\px/g, '');
|
||||
}
|
||||
|
||||
document.onmousemove = function (e) {
|
||||
/** 通过事件委托，计算移动的距离*/
|
||||
const l = e.clientX - disX;
|
||||
const t = e.clientY - disY;
|
||||
document.onmousemove = function (e) {
|
||||
/** 通过事件委托，计算移动的距离*/
|
||||
const l = e.clientX - disX;
|
||||
const t = e.clientY - disY;
|
||||
|
||||
/** 移动当前元素*/
|
||||
dragDom.style.left = `${l + styL}px`;
|
||||
dragDom.style.top = `${t + styT}px`;
|
||||
/** 移动当前元素*/
|
||||
if (l + styL < 0) {
|
||||
dragDom.style.left = `0px`;
|
||||
} else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
|
||||
dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
|
||||
} else {
|
||||
dragDom.style.left = `${l + styL}px`;
|
||||
}
|
||||
if (t + styT < 0) {
|
||||
dragDom.style.top = `0px`;
|
||||
} else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
|
||||
dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
|
||||
} else {
|
||||
dragDom.style.top = `${t + styT}px`;
|
||||
}
|
||||
|
||||
/** 将此时的位置传出去*/
|
||||
// binding.value({ x: e.pageX, y: e.pageY });
|
||||
};
|
||||
/** 将此时的位置传出去*/
|
||||
// binding.value({ x: e.pageX, y: e.pageY });
|
||||
};
|
||||
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="chatBox">
|
||||
<div v-quickMenuDrag class="chatBox">
|
||||
<div v-show="!minimize" class="chat-box">
|
||||
<div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'">
|
||||
<div class="chat-member-title">成员列表</div>
|
||||
@ -14,7 +14,7 @@
|
||||
<div
|
||||
v-for="coversition in coversitionList"
|
||||
:key="coversition.id"
|
||||
:class="coversition.id==currentCoversition?'coversition-active each-coversition':'each-coversition'"
|
||||
:class="coversition.id==currentCoversition.id?'coversition-active each-coversition':'each-coversition'"
|
||||
@click="changeCoversition(coversition)"
|
||||
>{{ coversition.name }}</div>
|
||||
</div>
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="minimality" @click="handleMinimality('min')">
|
||||
<i class="el-icon-remove" />
|
||||
</div>
|
||||
<div class="showMembers" @click="handleMembers()">
|
||||
<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()">
|
||||
@ -33,6 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-box-content">
|
||||
<audio src="http://192.168.3.6:9000/2020/4/23/1587636830913-ReWF1got.wav" autoplay preload="preload" />
|
||||
<div v-if="recordSending" class="chat_record_tip">
|
||||
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
|
||||
<div class="record_icon" />
|
||||
@ -62,7 +63,7 @@ import { getToken } from '@/utils/auth';
|
||||
import { creatSubscribe, clearSubscribe, assistant} from '@/utils/stomp';
|
||||
import ChatSetting from './chatSetting';
|
||||
import RecordRTC from 'recordrtc';
|
||||
import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew} from '@/api/chat';
|
||||
import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew, uploadAudioFileNew} from '@/api/chat';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
export default {
|
||||
@ -91,7 +92,7 @@ export default {
|
||||
language:'zh',
|
||||
sex:'1'
|
||||
},
|
||||
currentCoversition:'',
|
||||
currentCoversition:{id:'all', name:'所有人', group:true},
|
||||
headerTitle:'所有人'
|
||||
};
|
||||
},
|
||||
@ -108,6 +109,7 @@ export default {
|
||||
getSimulationConversationListNew(this.$route.query.group).then(resp=>{
|
||||
if (resp.data) {
|
||||
this.coversitionList = resp.data;
|
||||
this.coversitionList.unshift({id:'all', name:'所有人', group:true});
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -127,13 +129,15 @@ export default {
|
||||
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',
|
||||
checkForInactiveTracks: true
|
||||
recorderType: StereoAudioRecorder,
|
||||
numberOfAudioChannels: 2
|
||||
});
|
||||
that.recorders.startRecording();
|
||||
that.recordSending = true;
|
||||
@ -203,6 +207,13 @@ export default {
|
||||
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) => {
|
||||
debugger;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
// 调用接口（待添加）
|
||||
if (that.microphone) {
|
||||
that.microphone.stop();
|
||||
@ -259,18 +270,18 @@ export default {
|
||||
const data = resp.data;
|
||||
const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
|
||||
if (index < 0) {
|
||||
this.coversitionList.push({id:data.id, name:data.name});
|
||||
this.coversitionList.push(data);
|
||||
}
|
||||
this.currentCoversition = data.id;
|
||||
this.currentCoversition = {id:data.id, group:data.group};
|
||||
this.headerTitle = data.name;
|
||||
|
||||
this.showMembers = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
changeCoversition(coversition) {
|
||||
this.currentCoversition = coversition.id;
|
||||
this.headerTitle = coversition.name;
|
||||
this.currentCoversition = {id:coversition.id, group:coversition.group};
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -283,6 +294,7 @@ export default {
|
||||
padding-left:5px;
|
||||
left: 0;
|
||||
bottom:28px;
|
||||
z-index:22;
|
||||
}
|
||||
.chat-box{
|
||||
width: 100%;
|
||||
|
||||
@ -75,7 +75,7 @@ export default {
|
||||
width: 54%;
|
||||
height: 143px;
|
||||
border: 1px #dedede solid;
|
||||
left: 23%;
|
||||
left: 33%;
|
||||
top: 24%;
|
||||
z-index: 7;
|
||||
border-radius: 4px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user