<!--
|
* @Description: quick demo - vue2 版本页面
|
* @Date: 2022-03-14 16:56:36
|
* @LastEditTime: 2022-03-29 17:01:32
|
-->
|
<template>
|
<div id="app1">
|
<!-- 头部栏 -->
|
<!-- 1222222222222222222 -->
|
<!-- <comp-nav></comp-nav> -->
|
<div class="content" :class="$isMobile && 'content-mobile'">
|
<!-- quick demo 使用指引 -->
|
<!-- <comp-guidance></comp-guidance> -->
|
<!-- sdkAppId、secretKey、userId、roomId 参数输入区域 -->
|
<!-- <p class="label">{{ $t('基本信息') }}</p> -->
|
<div class="param-container" :class="$isMobile && 'param-container-mobile'">
|
<!-- <comp-info-input
|
label="sdkAppId" type="number" @change="handleValueChange($event, 'sdkAppId')"></comp-info-input>
|
<comp-info-input
|
label="secretKey" @change="handleValueChange($event, 'secretKey')"></comp-info-input> -->
|
<!-- <comp-info-input
|
label="用户名" @change="handleValueChange($event, 'userId')"></comp-info-input> -->
|
<!-- <comp-info-input
|
label="房间号" type="number" @change="handleValueChange($event, 'roomId')"></comp-info-input> -->
|
</div>
|
<!-- <div class='alert'>
|
<el-alert
|
type="error"
|
:closable="false"
|
>
|
<span>{{ $t("Alert")}} <a target="_blank" :href="$t('Url')">{{ $t("Click")}}</a></span>
|
</el-alert>
|
</div> -->
|
<!-- 设备选择区域 -->
|
<p class="label">{{ $t('会议设置') }}</p>
|
<div class="param-container" :class="$isMobile && 'param-container-mobile'">
|
<comp-device-select
|
deviceType="camera" @change="handleValueChange($event, 'cameraId')"></comp-device-select>
|
<comp-device-select
|
deviceType="microphone" @change="handleValueChange($event, 'microphoneId')"></comp-device-select>
|
</div>
|
<!-- rtc 房间 -->
|
<div v-if="showComponent" v-loading="loading">
|
<comp-room
|
ref="child"
|
:sdkAppId="Number(sdkAppId)"
|
:secretKey="secretKey"
|
:userId="userId"
|
:roomId="Number(roomId)"
|
:cameraId="cameraId"
|
:microphoneId="microphoneId"></comp-room>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import compNav from '@/components/comp-nav.vue';
|
import compGuidance from '@/components/comp-guidance.vue';
|
import compInfoInput from '@/components/comp-info-input.vue';
|
import compDeviceSelect from '@/components/comp-device-select.vue';
|
import compRoom from '@/components/comp-room.vue';
|
// const compRoom = () => import('@/components/comp-room.vue');
|
// import { clearUrlParam } from '@/utils/utils';
|
|
import { getIndividualList } from "@/api/self";
|
import { Loading } from 'element-ui'
|
//导入接口函数 --接好了
|
import { getWebcastInfo } from "@/api/meeting/index";
|
export default {
|
name: '6666',
|
components: {
|
compNav,
|
compGuidance,
|
compInfoInput,
|
compDeviceSelect,
|
compRoom,
|
},
|
data() {
|
return {
|
user:{},
|
showComponent: false,
|
loading: true,
|
// 会议基本信息
|
sdkAppId: 1600032250,
|
secretKey: 'abedcf588654e18888eff65dfdfde240a882c611710c6ed10e1044fb44818a89',
|
userId: '',
|
roomId: '',
|
cameraId: '',
|
microphoneId: '',
|
};
|
},
|
created() {
|
this.getRoomId();
|
this.getUser();
|
},
|
|
computed: {
|
isStartExercise() {
|
let roomId = this.roomId
|
let userId = this.userId;
|
return { roomId, userId };
|
}
|
},
|
|
watch: {
|
|
isStartExercise: {
|
immediate: true,
|
handler(n) {
|
if (n.roomId && n.userId) {
|
// 判断这两个值同时存在
|
// alert(this.userId)
|
// alert(this.roomId)
|
this.loading = false;
|
this.showComponent = true;
|
}
|
},
|
}
|
|
},
|
methods: {
|
// 获取房间号
|
getRoomId(){
|
const id = this.$route.params && this.$route.params.id;
|
getWebcastInfo(id).then(response => {
|
this.roomId = response.data.roomId
|
})
|
},
|
// 获取用户名
|
getUser(id) {
|
getIndividualList().then(response => {
|
this.user = response.data;
|
this.userId = this.user.nickName
|
// alert(this.userId)
|
// alert(this.roomId)
|
});
|
// setTimeout(() => {
|
// this.loading = false;
|
// this.showComponent = true;
|
// }, 5000);
|
// if(this.userId !== '' && this.roomId !== ''){
|
// alert(123)
|
// this.loading = false;
|
// this.showComponent = true;
|
// }
|
|
},
|
handleValueChange(value, key) {
|
this[key] = value;
|
},
|
},
|
mounted() {
|
// clearUrlParam();
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#app {
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
width: 100%;
|
height: 100%;
|
padding-bottom: 40px;
|
.content {
|
width: 80%;
|
margin: 0 auto;
|
max-width: 1320px;
|
.alert {
|
padding-top: 20px;
|
font-size: 16px !important;
|
}
|
&.content-mobile {
|
width: 100%;
|
padding: 0 16px 20px;
|
}
|
.label {
|
margin: 14px 0 6px;
|
text-align: left;
|
font-weight: bold;
|
}
|
.param-container {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
div {
|
width: calc((100% - 20px) / 2);
|
margin-bottom: 10px;
|
}
|
div:nth-last-child(2), div:nth-last-child(1) {
|
margin-bottom: 0;
|
}
|
&.param-container-mobile {
|
div {
|
width: 100%;
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
|
<i18n>
|
|
</i18n>
|
