uniProject/components/dialog/shexiangDialog.vue

<template>
	<view>
		<uni-popup ref="commonPopup" :animation="false" :is-mask-click="false"
		 mask-background-color="rgba(0, 0, 0, 0.4)">
		 <view class="phone-common-dialog">
			<view class="common-body-box">
				<view class="common-title">{{title}}</view>
				<view class="common-content" :class="dialogContentClass">
				  <view>
						<!-- IOS-->
						<view v-if="platformType === 'ios'" class="content-margin-bottom">推荐使用微信或safari浏览器，使用其他浏览器可能会在考试过程中出现摄像头问题，影响考试结果，导致重考，不建议使用其他浏览器。
						</view>
						<!-- 安卓-->
						<view v-if="platformType === 'Android'" class="content-margin-bottom">
							推荐使用微信或火狐浏览器、谷歌浏览器，使用其他浏览器可能会在考试过程中出现摄像头问题，影响考试结果，导致重考，不建议使用其他浏览器。
						</view>
						<view class="content-margin-bottom">请在考试前使用摄像头测试功能，测试摄像头是否可以正常工作，在测试前请先确保摄像头设备可以正常使用，并且使用推荐浏览器并赋予了浏览器摄像头权限。</view>
						<view>若摄像头测试中图像显示异常，请及时更换浏览器或手机，以免影响考试结果。</view>
					</view>
				</view>
				<view class="common-btn-box">
					<view class="confirm-btn" @click="confirmBtn">{{okBtn}}</view>
				</view>
			</view>
		 </view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const props = defineProps({
	  title: {
	    type: String,
	    default: ''
	  },
	  content: {
	    type: String,
		require: true,
	    default: ''
	  },
	  dialogContentClass: {
	    type: String,
	  	require: true,
	    default: ''
	  },
	  notBtn: {
	    type: String,
	  	require: true,
	    default: '取消'
	  },
	  okBtn: {
	    type: String,
	  	require: true,
	    default: '确认'
	  },
	});
	const commonPopup = ref(null); // 索引
	const $emit = defineEmits(['confirm-btn'])
	
	const platformType = uni.getSystemInfoSync().platform;
	
	// 打开弹窗
	function handleShow() {
		commonPopup.value.open();
	}
	// 取消
	function handleClose() {
		commonPopup.value.close();
	}
	// 确认
	function confirmBtn(){
		$emit('confirm-btn');
		commonPopup.value.close();
	}
	defineExpose({
			handleShow,
			handleClose
		})
</script>

<style>
</style>