'页面优化'
This commit is contained in:
gyj
+191
-163
@@ -1,176 +1,204 @@
|
||||
<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 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 class="operation">
|
||||
<div class="mic">
|
||||
<img
|
||||
class="micImg"
|
||||
src="@/assets/mic_on.png"
|
||||
alt=""
|
||||
v-if="micFlag"
|
||||
@click="micClickOn"
|
||||
/>
|
||||
<img
|
||||
class="micImg"
|
||||
src="@/assets/mic_off.png"
|
||||
alt=""
|
||||
v-else
|
||||
@click="micClickOff"
|
||||
/>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="mic">
|
||||
<img class="micImg" src="@/assets/mic_on.png" alt="" v-if="micFlag" @click="micClickOn">
|
||||
<img class="micImg" src="@/assets/mic_off.png" alt="" v-else @click="micClickOff">
|
||||
</div>
|
||||
<div class="video">
|
||||
<img class="videoImg" src="@/assets/video_on.png" alt="" v-if="videoFlag" @click="videoClickOn">
|
||||
<img class="videoImg" src="@/assets/video_off.png" alt="" v-else @click="videoClickOff">
|
||||
</div>
|
||||
<div class="sharing">
|
||||
<img class="sharImg" src="@/assets/screenShare_on.png" alt="" v-if="sharFlag" @click="sharClickOn">
|
||||
<img class="sharImg" src="@/assets/screenShare_off.png" alt="" v-else @click="sharClickOff">
|
||||
</div>
|
||||
<div class="video">
|
||||
<img
|
||||
class="videoImg"
|
||||
src="@/assets/video_on.png"
|
||||
alt=""
|
||||
v-if="videoFlag"
|
||||
@click="videoClickOn"
|
||||
/>
|
||||
<img
|
||||
class="videoImg"
|
||||
src="@/assets/video_off.png"
|
||||
alt=""
|
||||
v-else
|
||||
@click="videoClickOff"
|
||||
/>
|
||||
</div>
|
||||
<div class="sharing">
|
||||
<img
|
||||
class="sharImg"
|
||||
src="@/assets/screenShare_on.png"
|
||||
alt=""
|
||||
v-if="sharFlag"
|
||||
@click="sharClickOn"
|
||||
/>
|
||||
<img
|
||||
class="sharImg"
|
||||
src="@/assets/screenShare_off.png"
|
||||
alt=""
|
||||
v-else
|
||||
@click="sharClickOff"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
|
||||
export default {
|
||||
name: 'Footer',
|
||||
// props: [
|
||||
// "roomId"
|
||||
// ],
|
||||
components: {
|
||||
|
||||
import { startVideo, stopVideo, destructionRoom } from "@/api/room.js";
|
||||
export default {
|
||||
name: "Footer",
|
||||
props: ["micFlag","videoFlag","sharFlag"],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
roomId: null,
|
||||
taskId: null,
|
||||
roleFlag: true,
|
||||
caseId: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 解散房间
|
||||
destructionRoomFn(data) {
|
||||
destructionRoom(data).then((res) => {
|
||||
console.log(res, "解散房间");
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roomId: null,
|
||||
taskId: null,
|
||||
roleFlag: true,
|
||||
caseId: "",
|
||||
micFlag: true,
|
||||
videoFlag: true,
|
||||
sharFlag: true,
|
||||
};
|
||||
/**开启麦克风 */
|
||||
micClickOn() {
|
||||
this.$emit("micClickOn");
|
||||
},
|
||||
methods: {
|
||||
// 解散房间
|
||||
destructionRoomFn(data) {
|
||||
destructionRoom(data).then(res => {
|
||||
console.log(res, "解散房间");
|
||||
})
|
||||
},
|
||||
/**开启麦克风 */
|
||||
micClickOn() {
|
||||
this.micFlag = false;
|
||||
this.$emit('micClickOn');
|
||||
},
|
||||
/**关闭麦克风 */
|
||||
micClickOff() {
|
||||
this.micFlag = true;
|
||||
this.$emit('micClickOff');
|
||||
},
|
||||
/**开启摄像头 */
|
||||
videoClickOn() {
|
||||
this.videoFlag = false;
|
||||
this.$emit('videoClickOn');
|
||||
},
|
||||
/**关闭摄像头 */
|
||||
videoClickOff() {
|
||||
this.videoFlag = true;
|
||||
this.$emit('videoClickOff');
|
||||
},
|
||||
/**共享屏幕 */
|
||||
sharClickOn(){
|
||||
this.sharFlag = false;
|
||||
this.$emit('sharClickOn');
|
||||
},
|
||||
/**关闭共享屏幕 */
|
||||
sharClickOff(){
|
||||
this.sharFlag = true;
|
||||
this.$emit('sharClickOff');
|
||||
},
|
||||
exitRoom() {
|
||||
if (this.roleFlag) {
|
||||
this.stopVideoFn();
|
||||
this.destructionRoomFn({ roomId: this.roomId })
|
||||
this.$emit('exitRoom');
|
||||
} else {
|
||||
this.$emit('exitRoom');
|
||||
}
|
||||
},
|
||||
async startVideoFn() {
|
||||
await startVideo({
|
||||
caseId: this.caseId,
|
||||
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");
|
||||
})
|
||||
},
|
||||
/**关闭麦克风 */
|
||||
micClickOff() {
|
||||
this.$emit("micClickOff");
|
||||
},
|
||||
async mounted() {
|
||||
this.roomId = this.$route.query.roomId;
|
||||
this.caseId = this.$route.query.caseId;
|
||||
let roleFlag = this.$route.query.flag;
|
||||
this.roleFlag = roleFlag;
|
||||
if (roleFlag) {
|
||||
await this.startVideoFn();
|
||||
/**开启摄像头 */
|
||||
videoClickOn() {
|
||||
this.$emit("videoClickOn");
|
||||
},
|
||||
/**关闭摄像头 */
|
||||
videoClickOff() {
|
||||
this.$emit("videoClickOff");
|
||||
},
|
||||
/**共享屏幕 */
|
||||
sharClickOn() {
|
||||
this.$emit("sharClickOn");
|
||||
},
|
||||
/**关闭共享屏幕 */
|
||||
sharClickOff() {
|
||||
this.sharFlag = true;
|
||||
this.$emit("sharClickOff");
|
||||
},
|
||||
exitRoom() {
|
||||
if (this.roleFlag) {
|
||||
this.stopVideoFn();
|
||||
this.destructionRoomFn({ roomId: this.roomId });
|
||||
this.$emit("exitRoom");
|
||||
} else {
|
||||
this.$emit("exitRoom");
|
||||
}
|
||||
// setTimeout(() => {
|
||||
// console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
|
||||
// });
|
||||
},
|
||||
};
|
||||
</script>
|
||||
async startVideoFn() {
|
||||
await startVideo({
|
||||
caseId: this.caseId,
|
||||
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;
|
||||
this.caseId = this.$route.query.caseId;
|
||||
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,
|
||||
.sharing,
|
||||
.outRoom {
|
||||
cursor: pointer;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.operation {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.iconImg {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mic,
|
||||
.video,
|
||||
.sharing {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.micImg,
|
||||
.videoImg,
|
||||
.sharImg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
.roomFooter {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.mic,
|
||||
.video,
|
||||
.sharing,
|
||||
.outRoom {
|
||||
cursor: pointer;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.operation {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.iconImg {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mic,
|
||||
.video,
|
||||
.sharing {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.micImg,
|
||||
.videoImg,
|
||||
.sharImg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user