108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="roomFooter">
|
||
|
|
<div class="outRoom">
|
||
|
|
<el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出房间</el-button>
|
||
|
|
<el-button type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
|
||
|
|
export default {
|
||
|
|
name: 'Footer',
|
||
|
|
// props: [
|
||
|
|
// "roomId"
|
||
|
|
// ],
|
||
|
|
components: {
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
roomId: null,
|
||
|
|
taskId: null,
|
||
|
|
roleFlag: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 解散房间
|
||
|
|
destructionRoomFn(data) {
|
||
|
|
destructionRoom(data).then(res => {
|
||
|
|
console.log(res, "解散房间");
|
||
|
|
})
|
||
|
|
},
|
||
|
|
exitRoom() {
|
||
|
|
if (this.roleFlag) {
|
||
|
|
this.stopVideoFn();
|
||
|
|
this.destructionRoomFn({ roomId: this.roomId })
|
||
|
|
this.$emit('exitRoom');
|
||
|
|
} else {
|
||
|
|
this.$emit('exitRoom');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async startVideoFn() {
|
||
|
|
await startVideo({
|
||
|
|
caseId: 12865,
|
||
|
|
roomId: this.roomId
|
||
|
|
}).then(res => {
|
||
|
|
this.taskId = res.data.taskId
|
||
|
|
console.log(res.data.taskId, "pppppp");
|
||
|
|
})
|
||
|
|
},
|
||
|
|
stopVideoFn() {
|
||
|
|
stopVideo(this.taskId).then(res => {
|
||
|
|
console.log(res, "KKKKKK");
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
this.roomId = this.$route.query.roomId;
|
||
|
|
let roleFlag = this.$route.query.flag;
|
||
|
|
this.roleFlag = roleFlag;
|
||
|
|
if (roleFlag) {
|
||
|
|
await this.startVideoFn();
|
||
|
|
}
|
||
|
|
// setTimeout(() => {
|
||
|
|
// console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.roomFooter {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mic,
|
||
|
|
.video,
|
||
|
|
.record,
|
||
|
|
.outRoom {
|
||
|
|
cursor: pointer;
|
||
|
|
width: 10%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconImg {
|
||
|
|
width: 30%;
|
||
|
|
height: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: aliceblue;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty {
|
||
|
|
width: 60%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
|