仿真聊天代码调整
This commit is contained in:
parent
156a746a07
commit
7946d9f6e7
@ -6,7 +6,7 @@ NODE_ENV = 'development'
|
|||||||
# VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
# VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.3.4:9000'
|
# VUE_APP_BASE_API = 'http://192.168.3.4:9000'
|
||||||
VUE_APP_BASE_API = 'http://192.168.3.6:9000'
|
VUE_APP_BASE_API = 'http://192.168.3.6:9000'
|
||||||
VUE_APP_VOICE_API = 'https://test.joylink.club'
|
VUE_APP_VOICE_API = 'https://test.joylink.club/jlcloud'
|
||||||
|
|
||||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||||
|
@ -4,4 +4,4 @@ VUE_APP_PRO = 'local'
|
|||||||
|
|
||||||
# base api
|
# base api
|
||||||
VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
||||||
VUE_APP_VOICE_API = 'https://joylink.club'
|
VUE_APP_VOICE_API = 'https://joylink.club/jlcloud'
|
||||||
|
@ -3,4 +3,4 @@ NODE_ENV = 'production'
|
|||||||
|
|
||||||
# base api
|
# base api
|
||||||
VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
||||||
VUE_APP_VOICE_API = 'https://joylink.club'
|
VUE_APP_VOICE_API = 'https://joylink.club/jlcloud'
|
||||||
|
@ -3,4 +3,4 @@ NODE_ENV = 'production'
|
|||||||
|
|
||||||
# base api
|
# base api
|
||||||
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
|
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
|
||||||
VUE_APP_VOICE_API = 'https://test.joylink.club'
|
VUE_APP_VOICE_API = 'https://test.joylink.club/jlcloud'
|
||||||
|
@ -72,7 +72,6 @@ export default {
|
|||||||
await this.$store.dispatch('socket/setRoomSubscribe', false);
|
await this.$store.dispatch('socket/setRoomSubscribe', false);
|
||||||
},
|
},
|
||||||
async handleJoin() {
|
async handleJoin() {
|
||||||
debugger;
|
|
||||||
try {
|
try {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
const rest = await getPublishMapInfo(this.mapId);
|
const rest = await getPublishMapInfo(this.mapId);
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<div v-show="!minimize" class="chat-box">
|
<div v-show="!minimize" class="chat-box">
|
||||||
<chat-member-list ref="chatMemberList" :group="group" :current-coversition="currentCoversition" @addCoversition="addCoversition" />
|
<chat-member-list ref="chatMemberList" :group="group" :current-coversition="currentCoversition" @addCoversition="addCoversition" />
|
||||||
<div class="chat-box-main">
|
<div class="chat-box-main">
|
||||||
<chat-coversition-list ref="chatCoversitionList" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
|
<chat-coversition-list ref="chatCoversitionList" :user-role="userRole" @hideAddCoversition="hideAddCoversition" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
|
||||||
<div class="chat-window">
|
<div class="chat-window">
|
||||||
<div class="chat-box-header">
|
<div class="chat-box-header">
|
||||||
<div class="chat-box-header-title">{{ headerTitle }}</div>
|
<div class="chat-box-header-title">{{ headerTitle }}</div>
|
||||||
@ -30,7 +30,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="chat-box-footer">
|
<div class="chat-box-footer">
|
||||||
<div class="chat-box-footer-tool" />
|
<div class="chat-box-footer-tool" />
|
||||||
<div class="chat-box-footer-send" @click="startRecording()">发送语音</div>
|
<el-button v-if="isButtonShow" size="mini" type="danger" class="chat-box-footer-quit" :loading="quitLoading" @click="quitCoversition()">退出群聊</el-button>
|
||||||
|
<el-button v-if="currentCoversition.all||isButtonShow" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
|
||||||
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
|
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -54,7 +55,7 @@ import ChatCreateGroup from './chatCreateGroup';
|
|||||||
import ChatMemberList from './chatMemberList';
|
import ChatMemberList from './chatMemberList';
|
||||||
import ChatCoversitionList from './chatCoversitionList';
|
import ChatCoversitionList from './chatCoversitionList';
|
||||||
import RecordRTC from 'recordrtc';
|
import RecordRTC from 'recordrtc';
|
||||||
import {uploadAudioFileNew} from '@/api/chat';
|
import {uploadAudioFileNew, quitCoversition} from '@/api/chat';
|
||||||
export default {
|
export default {
|
||||||
name: 'ChatBox',
|
name: 'ChatBox',
|
||||||
components:{
|
components:{
|
||||||
@ -82,6 +83,8 @@ export default {
|
|||||||
currentCoversition:{},
|
currentCoversition:{},
|
||||||
seconds:0,
|
seconds:0,
|
||||||
inter:null,
|
inter:null,
|
||||||
|
isHasCoversition:false,
|
||||||
|
quitLoading:false,
|
||||||
recorders: null,
|
recorders: null,
|
||||||
microphone:null,
|
microphone:null,
|
||||||
scriptTip:'',
|
scriptTip:'',
|
||||||
@ -94,7 +97,10 @@ export default {
|
|||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
isShow() {
|
isShow() {
|
||||||
return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE';
|
return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' && !this.isHasCoversition;
|
||||||
|
},
|
||||||
|
isButtonShow() {
|
||||||
|
return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' && this.isHasCoversition;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -144,21 +150,39 @@ export default {
|
|||||||
setSetting(data) {
|
setSetting(data) {
|
||||||
this.form = data;
|
this.form = data;
|
||||||
},
|
},
|
||||||
|
hideAddCoversition() {
|
||||||
|
this.isHasCoversition = true;
|
||||||
|
},
|
||||||
setCurrentCoversition(coversition) {
|
setCurrentCoversition(coversition) {
|
||||||
|
if (coversition && coversition.id) {
|
||||||
this.currentCoversition = coversition;
|
this.currentCoversition = coversition;
|
||||||
if (coversition.all) {
|
|
||||||
this.headerTitle = coversition.name;
|
this.headerTitle = coversition.name;
|
||||||
|
} else {
|
||||||
|
this.headerTitle = '';
|
||||||
}
|
}
|
||||||
if (this.recordSending) {
|
if (this.recordSending) {
|
||||||
this.cancleRecording();
|
this.cancleRecording();
|
||||||
}
|
}
|
||||||
this.$refs.chatContent.scrollTop();
|
this.$refs.chatContent.scrollTop();
|
||||||
},
|
},
|
||||||
|
quitCoversition() {
|
||||||
|
this.quitLoading = true;
|
||||||
|
quitCoversition(this.group, this.currentCoversition.id).then(res=>{
|
||||||
|
this.quitLoading = false;
|
||||||
|
this.currentCoversition = {all:undefined, id:null};
|
||||||
|
this.$refs.chatCoversitionList.initPage(true);
|
||||||
|
this.isHasCoversition = false;
|
||||||
|
}).catch(error=>{
|
||||||
|
this.$messageBox('退出会话失败: ' + error.message);
|
||||||
|
this.quitLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
setHeadTitle(headerTitle) {
|
setHeadTitle(headerTitle) {
|
||||||
this.headerTitle = headerTitle;
|
this.headerTitle = headerTitle;
|
||||||
},
|
},
|
||||||
addCoversition({data, headerTitle}) {
|
addCoversition({data, headerTitle}) {
|
||||||
this.$refs.chatCoversitionList.addCoversition(data, headerTitle);
|
this.$refs.chatCoversitionList.addCoversition(data, headerTitle);
|
||||||
|
this.isHasCoversition = true;
|
||||||
this.currentCoversition = {id:data.id, all:data.all};
|
this.currentCoversition = {id:data.id, all:data.all};
|
||||||
this.headerTitle = headerTitle;
|
this.headerTitle = headerTitle;
|
||||||
},
|
},
|
||||||
@ -281,6 +305,15 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.chat-box-footer-quit{
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px 15px;
|
||||||
|
color: #fff;
|
||||||
|
float: left;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.chatBox{
|
.chatBox{
|
||||||
width: 503px;
|
width: 503px;
|
||||||
// height: 400px;
|
// height: 400px;
|
||||||
@ -347,17 +380,13 @@ export default {
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
.chat-box-footer-send{
|
.chat-box-footer-send{
|
||||||
background: #36a2fd;
|
|
||||||
width: 65px;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 5px 0px 4px 0px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 3px;
|
|
||||||
color: #fff;
|
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
padding: 5px 15px;
|
||||||
}
|
}
|
||||||
.minimality {
|
.minimality {
|
||||||
float: right;
|
float: right;
|
||||||
@ -385,6 +414,10 @@ export default {
|
|||||||
.coversition-list{
|
.coversition-list{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.chat-box-footer-send.disbled{
|
||||||
|
cursor: no-drop;
|
||||||
|
}
|
||||||
|
|
||||||
.scriptTip{
|
.scriptTip{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
|
@ -70,6 +70,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
inintData() {
|
inintData() {
|
||||||
|
if (this.coversition.id) {
|
||||||
getSimulationContextListNew(this.$route.query.group, this.coversition.id).then(res=>{
|
getSimulationContextListNew(this.$route.query.group, this.coversition.id).then(res=>{
|
||||||
const userId = this.$store.state.user.id;
|
const userId = this.$store.state.user.id;
|
||||||
const coversitionList = res.data.map(coversition=>{
|
const coversitionList = res.data.map(coversition=>{
|
||||||
@ -77,13 +78,14 @@ export default {
|
|||||||
if (coversition.member.userId == userId) {
|
if (coversition.member.userId == userId) {
|
||||||
coversition.self = true;
|
coversition.self = true;
|
||||||
}
|
}
|
||||||
coversition.src = coversition.isAudio ? `/jlcloud/audio/${coversition.audioPath}` : '';
|
coversition.src = coversition.isAudio ? `/audio/${coversition.audioPath}` : '';
|
||||||
coversition.targetUser = coversition.targetMember ? coversition.targetMember : 'All';
|
coversition.targetUser = coversition.targetMember ? coversition.targetMember : 'All';
|
||||||
return coversition;
|
return coversition;
|
||||||
});
|
});
|
||||||
this.chatContentList = coversitionList;
|
this.chatContentList = coversitionList;
|
||||||
this.scrollTop();
|
this.scrollTop();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
// const coversitionListAll = Object.assign({}, this.$store.state.socket.coversitionList);
|
// const coversitionListAll = Object.assign({}, this.$store.state.socket.coversitionList);
|
||||||
// const coversitionList = coversitionListAll[this.coversition.id] || [];
|
// const coversitionList = coversitionListAll[this.coversition.id] || [];
|
||||||
// // console.log('inintData---coversitionList' + JSON.stringify(this.$store.state.socket.coversitionList[this.coversition.id]));
|
// // console.log('inintData---coversitionList' + JSON.stringify(this.$store.state.socket.coversitionList[this.coversition.id]));
|
||||||
|
@ -7,45 +7,63 @@
|
|||||||
:key="coversition.id"
|
:key="coversition.id"
|
||||||
:class="coversition.id==currentCoversition.id?'coversition-active each-coversition':'each-coversition'"
|
:class="coversition.id==currentCoversition.id?'coversition-active each-coversition':'each-coversition'"
|
||||||
@click="changeCoversition(coversition)"
|
@click="changeCoversition(coversition)"
|
||||||
>{{ coversition.coverName }}</div>
|
>{{ coversition.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import ConstConfig from '@/scripts/ConstConfig';
|
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
import {getSimulationConversationListNew} from '@/api/chat';
|
import {getSimulationConversationListNew} from '@/api/chat';
|
||||||
export default {
|
export default {
|
||||||
name:'ChatCoversitionList',
|
name:'ChatCoversitionList',
|
||||||
|
props: {
|
||||||
|
userRole: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
coversitionList:[],
|
coversitionList:[],
|
||||||
currentCoversition:{}
|
currentCoversition:{}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
watch:{
|
||||||
|
'userRole':function(val) {
|
||||||
this.initPage(true);
|
this.initPage(true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
initPage(status) {
|
initPage(status) {
|
||||||
getSimulationConversationListNew(this.$route.query.group).then(resp=>{
|
getSimulationConversationListNew(this.$route.query.group).then(resp=>{
|
||||||
if (resp.data) {
|
if (resp.data) {
|
||||||
const data = resp.data;
|
const data = resp.data;
|
||||||
data.map(coversition=>{
|
if (this.userRole == 'ADMIN' || this.userRole == 'AUDIENCE') {
|
||||||
if (coversition.name) {
|
|
||||||
coversition.coverName = coversition.name;
|
|
||||||
coversition.isOnline = true;
|
|
||||||
} else {
|
|
||||||
const objectCover = this.handleMemberName(coversition);
|
|
||||||
coversition.coverName = objectCover.coversitionName;
|
|
||||||
coversition.isOnline = objectCover.isOnline;
|
|
||||||
}
|
|
||||||
return coversition;
|
|
||||||
});
|
|
||||||
this.coversitionList = data;
|
this.coversitionList = data;
|
||||||
|
} else {
|
||||||
|
this.coversitionList = data.filter(coversition=>{ return coversition.all == false; });
|
||||||
|
if (this.coversitionList.length >= 1) {
|
||||||
|
this.$emit('hideAddCoversition');
|
||||||
|
}
|
||||||
|
}
|
||||||
if (resp.data && resp.data.length && resp.data.length > 0 && status) {
|
if (resp.data && resp.data.length && resp.data.length > 0 && status) {
|
||||||
|
if (this.userRole == 'ADMIN' || this.userRole == 'AUDIENCE') {
|
||||||
this.currentCoversition = data[0];
|
this.currentCoversition = data[0];
|
||||||
this.$emit('setCurrentCoversition', resp.data[0]);
|
this.$emit('setCurrentCoversition', resp.data[0]);
|
||||||
|
} else {
|
||||||
|
if (this.coversitionList.length >= 1) {
|
||||||
|
this.currentCoversition = data[0];
|
||||||
|
this.$emit('setCurrentCoversition', resp.data[0]);
|
||||||
|
} else {
|
||||||
|
this.currentCoversition = null;
|
||||||
|
this.$emit('setCurrentCoversition', this.currentCoversition);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (resp.data && resp.data.length && resp.data.length > 0 && !status) {
|
||||||
|
const coversition = data.filter(coversition=>{ return coversition.all == false; });
|
||||||
|
this.currentCoversition = coversition[0];
|
||||||
|
this.$emit('setCurrentCoversition', coversition[0]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -53,82 +71,22 @@ export default {
|
|||||||
addCoversition(data, headerTitle) {
|
addCoversition(data, headerTitle) {
|
||||||
const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
|
const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
|
||||||
if (index < 0) {
|
if (index < 0) {
|
||||||
const objectCover = this.handleMemberName(data);
|
|
||||||
if (data.name) {
|
|
||||||
data.coverName = data.name;
|
|
||||||
data.isOnline = true;
|
|
||||||
} else {
|
|
||||||
data.coverName = objectCover.coversitionName;
|
|
||||||
data.isOnline = objectCover.isOnline;
|
|
||||||
}
|
|
||||||
this.coversitionList.push(data);
|
this.coversitionList.push(data);
|
||||||
if (headerTitle) {
|
|
||||||
this.currentCoversition = data;
|
this.currentCoversition = data;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
},
|
||||||
changeCoversition(coversition) {
|
changeCoversition(coversition) {
|
||||||
this.$emit('setHeadTitle', coversition.coverName);
|
this.$emit('setHeadTitle', coversition.name);
|
||||||
this.currentCoversition = {id:coversition.id, all:coversition.all};
|
this.currentCoversition = {id:coversition.id, all:coversition.all};
|
||||||
this.$emit('setCurrentCoversition', coversition);
|
this.$emit('setCurrentCoversition', coversition);
|
||||||
// this.$refs.chatContent.reloadData(this.currentCoversition);
|
// this.$refs.chatContent.reloadData(this.currentCoversition);
|
||||||
},
|
},
|
||||||
changeCoversitionOther(coversition) {
|
changeCoversitionOther(coversition) {
|
||||||
const objectCover = this.handleMemberName(coversition);
|
|
||||||
coversition.coverName = objectCover.coversitionName;
|
|
||||||
coversition.isOnline = objectCover.isOnline;
|
|
||||||
const index = this.coversitionList.findIndex(item=>{ return item.id == coversition.id; });
|
const index = this.coversitionList.findIndex(item=>{ return item.id == coversition.id; });
|
||||||
if (index < 0) {
|
if (index < 0) {
|
||||||
this.coversitionList.push(coversition);
|
this.coversitionList.push(coversition);
|
||||||
}
|
}
|
||||||
this.changeCoversition(coversition);
|
this.changeCoversition(coversition);
|
||||||
},
|
|
||||||
handleMemberName(conversition) {
|
|
||||||
if (conversition.all) {
|
|
||||||
return {coversitionName:conversition.name, isOnline:true};
|
|
||||||
} else {
|
|
||||||
let coversitionName = '';
|
|
||||||
let isOnline = true;
|
|
||||||
if (conversition.memberList) {
|
|
||||||
conversition.memberList.forEach(member=>{
|
|
||||||
if (member.userId != this.$store.state.user.id) {
|
|
||||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
|
||||||
let data = member.role;
|
|
||||||
roleTypeList.forEach(function(element) {
|
|
||||||
const rolename = element.value;
|
|
||||||
if (Cookies.get('user_lang') == 'en') {
|
|
||||||
data = data.replace(rolename, element.enLabel);
|
|
||||||
} else {
|
|
||||||
data = data.replace(rolename, element.label);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
|
||||||
const memberName = member.name ? '-' + member.name : '';
|
|
||||||
isOnline = member.online;
|
|
||||||
coversitionName = data + deviceName + memberName;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else if (conversition.member) {
|
|
||||||
const member = conversition.member;
|
|
||||||
let data = member.role;
|
|
||||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
|
||||||
roleTypeList.forEach(function(element) {
|
|
||||||
const rolename = element.value;
|
|
||||||
if (Cookies.get('user_lang') == 'en') {
|
|
||||||
data = data.replace(rolename, element.enLabel);
|
|
||||||
} else {
|
|
||||||
data = data.replace(rolename, element.label);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
|
||||||
const memberName = member.name ? '-' + member.name : '';
|
|
||||||
isOnline = member.online;
|
|
||||||
coversitionName = data + deviceName + memberName;
|
|
||||||
} else {
|
|
||||||
coversitionName = conversition.name;
|
|
||||||
}
|
|
||||||
return {coversitionName:coversitionName, isOnline:isOnline};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -51,6 +51,8 @@ export default {
|
|||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
getSimulationMembers() {
|
getSimulationMembers() {
|
||||||
|
this.memberList = [];
|
||||||
|
if (this.currentCoversition.id) {
|
||||||
getSimulationChatMemberNew(this.$route.query.group, this.currentCoversition.id).then(resp => {
|
getSimulationChatMemberNew(this.$route.query.group, this.currentCoversition.id).then(resp => {
|
||||||
let lastData = JSON.stringify(resp.data);
|
let lastData = JSON.stringify(resp.data);
|
||||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||||
@ -71,6 +73,7 @@ export default {
|
|||||||
});
|
});
|
||||||
this.memberList = lastData;
|
this.memberList = lastData;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
getMember(memberId) {
|
getMember(memberId) {
|
||||||
return this.memberList.filter(member=>{
|
return this.memberList.filter(member=>{
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<div v-show="!minimize" class="chat-box">
|
<div v-show="!minimize" class="chat-box">
|
||||||
<chat-member-list ref="chatMemberList" :group="group" :current-coversition="currentCoversition" />
|
<chat-member-list ref="chatMemberList" :group="group" :current-coversition="currentCoversition" />
|
||||||
<div class="chat-box-main">
|
<div class="chat-box-main">
|
||||||
<chat-coversition-list ref="chatCoversitionList" :group="group" :user-role="userRole" @hideAddCoversition="hideAddCoversition" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
|
<chat-coversition-list ref="chatCoversitionList" :user-role="userRole" @hideAddCoversition="hideAddCoversition" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
|
||||||
<div class="chat-window">
|
<div class="chat-window">
|
||||||
<div class="chat-box-header">
|
<div class="chat-box-header">
|
||||||
<div class="chat-box-header-title">{{ headerTitle }}</div>
|
<div class="chat-box-header-title">{{ headerTitle }}</div>
|
||||||
@ -30,8 +30,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="chat-box-footer">
|
<div class="chat-box-footer">
|
||||||
<div class="chat-box-footer-tool" />
|
<div class="chat-box-footer-tool" />
|
||||||
<div v-if="isButtonShow" class="chat-box-footer-quit" @click="quitCoversition()">退出群聊</div>
|
<el-button v-if="isButtonShow" size="mini" type="danger" class="chat-box-footer-quit" :loading="quitLoading" @click="quitCoversition()">退出群聊</el-button>
|
||||||
<div v-if="currentCoversition.all||isButtonShow" class="chat-box-footer-send" @click="startRecording()">发送语音</div>
|
<el-button v-if="currentCoversition.all||isButtonShow" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -87,6 +87,7 @@ export default {
|
|||||||
recorders: null,
|
recorders: null,
|
||||||
microphone:null,
|
microphone:null,
|
||||||
isHasCoversition:false,
|
isHasCoversition:false,
|
||||||
|
quitLoading:false,
|
||||||
form:{
|
form:{
|
||||||
language:'zh',
|
language:'zh',
|
||||||
sex:'1'
|
sex:'1'
|
||||||
@ -132,7 +133,7 @@ export default {
|
|||||||
this.$refs.chatCoversitionList.initPage(false);
|
this.$refs.chatCoversitionList.initPage(false);
|
||||||
},
|
},
|
||||||
setCurrentCoversition(coversition) {
|
setCurrentCoversition(coversition) {
|
||||||
if (coversition) {
|
if (coversition.id) {
|
||||||
this.currentCoversition = coversition;
|
this.currentCoversition = coversition;
|
||||||
this.headerTitle = coversition.name;
|
this.headerTitle = coversition.name;
|
||||||
} else {
|
} else {
|
||||||
@ -150,12 +151,15 @@ export default {
|
|||||||
this.isHasCoversition = true;
|
this.isHasCoversition = true;
|
||||||
},
|
},
|
||||||
quitCoversition() {
|
quitCoversition() {
|
||||||
|
this.quitLoading = true;
|
||||||
quitCoversition(this.group, this.currentCoversition.id).then(res=>{
|
quitCoversition(this.group, this.currentCoversition.id).then(res=>{
|
||||||
this.currentCoversition = {all:undefined, id:null};
|
this.currentCoversition = {all:undefined, id:null};
|
||||||
this.$refs.chatCoversitionList.initPage(true);
|
this.$refs.chatCoversitionList.initPage(true);
|
||||||
this.isHasCoversition = false;
|
this.isHasCoversition = false;
|
||||||
|
this.quitLoading = false;
|
||||||
}).catch(error=>{
|
}).catch(error=>{
|
||||||
this.$messageBox('退出会话失败: ' + error.message);
|
this.$messageBox('退出会话失败: ' + error.message);
|
||||||
|
this.quitLoading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
addCoversition({data, headerTitle}) {
|
addCoversition({data, headerTitle}) {
|
||||||
@ -461,6 +465,9 @@ export default {
|
|||||||
background: #eeeeee;
|
background: #eeeeee;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.chat-box-footer-send.disbled{
|
||||||
|
cursor: no-drop;
|
||||||
|
}
|
||||||
|
|
||||||
.minimize-box {
|
.minimize-box {
|
||||||
width: 97.5%;
|
width: 97.5%;
|
||||||
|
@ -19,10 +19,6 @@ import {getSimulationConversationListNew} from '@/api/chat';
|
|||||||
export default {
|
export default {
|
||||||
name:'ChatCoversitionList',
|
name:'ChatCoversitionList',
|
||||||
props: {
|
props: {
|
||||||
group: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
userRole: {
|
userRole: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
|
Loading…
Reference in New Issue
Block a user