uniProject/pages/admin/mianshi/index.vue

<template>
	<view class="phone-ycms-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">远程面试</text>
		</view>
		<view class="ycms-body-box">
			<view class="ycms-card-box">
				<view class="card-title-row">
					<text>远程面试</text>
					<view @click="handleClose" class="colse-btn" v-if="data.room">关闭房间</view>
				</view>
				<view class="room-box">
					<view class="room-info-box" v-if="data.room">
						<view class="room-num">{{ data.room }}</view>
						<view class="room-text">房间号</view>
					</view>
					<view class="room-info-box flex-info" v-else>
						<view class="room-wcj">未创建</view>
						<view class="room-text">房间号</view>
					</view>
					<button @click="openUrl" type="default" class="phone-white-btn jr-btn" v-if="data.room">进入房间</button> <!-- 客户uid 4 -->
					<!-- <button @click="openUrl2">进入房间2</button> -->
				</view>
				<!-- phone-white-btn -->
        <button @click="yqBtn" type="default" class="phone-green-btn yqkh-btn"  v-if="data.room">邀请客户进入面试</button> <!-- 客户uid 1 -->
        <button @click="yqBtn" type="default" class="phone-green-btn yqkh-btn"  v-if="data.room">邀请阿姨进入面试</button> <!-- 客户uid 2 -->
        <button @click="yqBtn" type="default" class="phone-green-btn yqkh-btn"  v-if="data.room">邀请旁听进入面试</button> <!-- 客户uid 3 -->
				<button @click="handleCreate" type="default" class="phone-green-btn" v-else>创建面试房间</button>
				
				<view class="ycms-tip-box">
					<view class="tip-title"><text>小贴士</text><icon></icon></view>
					<view class="tip-text">1.创建房间后会生成房间号，生成房间号后，可进入房间，也可以直接分享给客户进入房间。</view>
					<view class="tip-text">2. 结束面试后，房间内的人员会被退出，同时面试房间号会失效；</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script setup>
	import * as httpApi from '@/api/mianshi.js'
	import { ref, reactive } from "vue"
	import {onLoad} from "@dcloudio/uni-app";
	
	const data = reactive({
		room: '',
	})
	
	function goUpPage() {
		uni.redirectTo({
			url: `/pages/admin/ShouYe/shouye`
		})
	}
	
	function handleMianshiInfo() {
		httpApi.getMianshiInfo().then(res =>{
			data.room = res.data.room;
		})
	}
	function handleCreate(){
		httpApi.getMianshiCreate().then(res => {
			data.room = res.data.room;
			uni.showToast({ title: '创建成功', icon: 'none' });
		  })
		  .catch(err => {
			console.error('创建失败:', err);
			uni.showToast({ title: '创建失败，请重试', icon: 'none' });
		  });
	}
	function yqBtn(){
		
	}
	
	function handleClose() {
		httpApi.getMianshiClose().then(res =>{
			if (res.data) {
				data.room = null;
				uni.showToast({ title: '房间已关闭', icon: 'none' });
			}
		})
	}
	
	
	
	const url =
		`https://kf2.mtavip.com/aliyunZhibo/index.html?roomId=${data.room}`

	function openUrl() {
		plus.runtime.openURL(url, (err) => {
			if (err) {
				console.error('打开浏览器失败: ', err);
				uni.showToast({
					title: '打开链接失败',
					icon: 'none'
				});
			}
		});
	}
	
	onLoad(() => {
		handleMianshiInfo()
	})
</script>