140 lines
3.0 KiB
Vue
140 lines
3.0 KiB
Vue
<template>
|
|
<div class="homepage">
|
|
<div id="video"></div>
|
|
<div class="enterRoom">
|
|
<div class="title">仲裁会议室</div>
|
|
<div class="enterForm">
|
|
<el-form :model="enterRoomFrom" ref="enterRoomFrom">
|
|
<el-form-item>
|
|
<el-input placeholder="请输入房间号" v-model="enterRoomFrom.roomId">
|
|
<template slot="append">
|
|
<el-button type="primary" @click="enterRoom" icon="el-icon-right">进入</el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reserveConferenceList } from "@/api/home.js";
|
|
import TRTC from "trtc-sdk-v5";
|
|
let trtc = null;
|
|
export default {
|
|
name: "App",
|
|
data() {
|
|
return {
|
|
formLabelAlign: {},
|
|
enterRoomFrom: {},
|
|
trtc: null,
|
|
userId: null,
|
|
userCode: null,
|
|
caseId: null,
|
|
roleFlag: false
|
|
};
|
|
},
|
|
methods: {
|
|
async enterRoom() {
|
|
// if (this.roomId != this.enterRoomFrom.roomId) {
|
|
// this.$message({
|
|
// message: "房间号不是对应案件的房间号",
|
|
// type: 'error'
|
|
// });
|
|
// return
|
|
// }
|
|
this.$router.push({
|
|
name: "Room",
|
|
query: {
|
|
userId: this.userId,
|
|
roomId: this.roomId,
|
|
flag: this.roleFlag,
|
|
caseId: this.caseId,
|
|
id: this.userCode
|
|
}
|
|
});
|
|
},
|
|
submitRoom() {
|
|
this.$refs["formLabelAlign"].validate(valid => {});
|
|
},
|
|
// 根据案件id查询主持人信息
|
|
async reserveConferenceListFn(data) {
|
|
await reserveConferenceList(data).then(res => {
|
|
if (res.data.length >= 1) {
|
|
if (this.userCode == res.data[0].userId) {
|
|
this.roleFlag = true;
|
|
} else {
|
|
this.roleFlag = false;
|
|
}
|
|
}else{
|
|
this.roleFlag = false;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
async mounted() {
|
|
let routeParams = this.$route.query;
|
|
this.userId = routeParams.name;
|
|
this.roomId = routeParams.roomId;
|
|
this.userCode = routeParams.userId;
|
|
this.caseId = routeParams.id;
|
|
if (this.caseId) {
|
|
await this.reserveConferenceListFn(this.caseId);
|
|
await this.enterRoom();
|
|
}
|
|
trtc = TRTC.create();
|
|
const config = {
|
|
view: document.getElementById("video"),
|
|
publish: false
|
|
};
|
|
await trtc.startLocalVideo(config);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.homepage {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #302e2e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
#video {
|
|
width: 40%;
|
|
height: 50%;
|
|
}
|
|
|
|
.enterRoom {
|
|
width: 20%;
|
|
height: 50%;
|
|
background-color: #1c1b1b;
|
|
}
|
|
|
|
.reservation {
|
|
width: 20%;
|
|
height: 50%;
|
|
background-color: #1c1b1b;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #3f1ab7;
|
|
line-height: 30px;
|
|
font-size: 18px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.enterForm {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|
|
|
|
|