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(1)" type="default" class="phone-white-btn jr-btn"
						v-if="data.room">进入房间</button>
					<!-- <button @click="openUrl2">进入房间2</button> -->
				</view>
				<view class="btn-tip" v-if="data.room">每个邀请链接仅限一人使用，请勿重复分享</view>
				<!-- phone-white-btn -->
				<button @click="yqBtn(3)" type="default" class="phone-green-btn yqkh-btn" v-if="data.room">邀请阿姨</button>
				<button @click="yqBtn(2)" type="default" class="phone-green-btn yqkh-btn"
					v-if="data.room">邀请客户1</button>
				<button @click="yqBtn(4)" type="default" class="phone-green-btn yqkh-btn"
					v-if="data.room">邀请客户2</button>
				<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>
			 <share-popup 
			      ref="sharePopupRef"
				  :image="roomImageUrl"
			      title="远程面试邀请"
			      desc="请点击链接参加面试"
			      :link=roomUrl
			      type="0"
			      @success="onShareSuccess"
			    />
		</view>
	</view>
</template>

<script setup>
	import * as httpApi from '@/api/mianshi.js'
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import config from "../../../config"
	import SharePopup from '@/components/sharePopUp/index.vue'
	import userDefaultImg from '@/static/images/share/mianshi-img.jpg'
	const roomImageUrl = ref(userDefaultImg)

	const data = reactive({
		room: '',
	})
	const roomUrl = ref('')
	

	const sharePopupRef = ref(null)

	function onShareSuccess(e){
		 console.log('分享成功', e.scene)
	}
	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(code) {
		roomUrl.value = `${config.mianshiUrl}?roomId=${data.room}&index=${code}`
		sharePopupRef.value.open()
		// 分享地址
		//const url = `${config.mianshiUrl}?roomId=900803&index=${code}`
	}

	function handleClose() {
		httpApi.getMianshiClose().then(res => {
			if (res.data) {
				data.room = null;
				uni.showToast({
					title: '房间已关闭',
					icon: 'none'
				});
			}
		})
	}





	function openUrl(code) {
		const url = `${config.mianshiUrl}?roomId=${data.room}&index=${code}`
		plus.runtime.openURL(url, (err) => {
			if (err) {
				console.error('打开浏览器失败: ', err);
				uni.showToast({
					title: '打开链接失败',
					icon: 'none'
				});
			}
		});
	}

	onLoad(() => {
		handleMianshiInfo()
	})
</script>