uniProject/components/zhuapaiConfirm/qieping.vue

<template>
	<view></view>
</template>

<script setup>
	import {
		ref,
		onUnmounted,
		nextTick,
		computed
	} from "vue";
	import {
		getClientQiepingCheat,getClientQiepingTimes
	} from "@/api/kaoshi.js"
	import {
		useZhuapaiStore
	} from "@/store/zhuapai.js"

	const zhuapaiStore = useZhuapaiStore();

	const emits = defineEmits(['zhuapai', 'forceSubmit'])
	const zhuapaiFlag = ref(false);
	const zhuapaixiaoshi = ref(0);
	const leaveTime = ref('');
	const toggleScreenSecond = ref(0);
	const toggleScreenFlag = ref(0);
	const ksId = ref('')

	function cheatingFun() {
		// 用户离开了当前页面
		if (document.visibilityState === 'hidden') {
			console.log('页面不可见');
			if (zhuapaiFlag.value) {
				// 此时 切出后台 发生抓拍情况下 要传递固定图片
				console.log('切出去zhuapaixiaoshi 恢复正常');
				zhuapaixiaoshi.value = 1
				zhuapaiStore.setStatus(1)
			}
			//  计时
			leaveTime.value = new Date().getTime();
		} else if (document.visibilityState === 'visible') {
			console.log('切回来 恢复正常');
			// 用户打开或回到页面
			if (zhuapaiFlag.value) {
				zhuapaixiaoshi.value = 0
				zhuapaiStore.setStatus(0)
				emits('zhuapai') // 重置抓拍
			}
			zhuapaixiaoshi.value = 0
			zhuapaiStore.setStatus(0)
			console.log('页面可见');
			let nowTime = new Date().getTime();
			if (Number(nowTime) - Number(leaveTime.value) > toggleScreenSecond.value + '000') {
				let req = {
					ksId: ksId.value,
				};
				getClientQiepingCheat(req).then(res => {
					//cutScreenDialog   是否超限 true:超过限制 false:未超过限制 ,
					if (res.code === 0 && res.data.flag) {
						emits('forceSubmit') // 强制交卷
					} else {
						emits('qiepingToast', res.data.times) // 提示警告
					}
				});
			}
		}
	}

	function zhuapaiFun() {
		if (document.visibilityState === 'hidden') {
			console.log('页面不可见');
			zhuapaixiaoshi.value = 1
			zhuapaiStore.setStatus(1)
		} else if (document.visibilityState === 'visible') {
			zhuapaixiaoshi.value = 0
			zhuapaiStore.setStatus(0)
			emits('zhuapai')
		}
	}

	function init(options) {
		console.log('init', options)
		toggleScreenFlag.value = options.toggleScreenFlag;
		toggleScreenSecond.value = options.toggleScreenSecond;
		zhuapaiFlag.value = options.zhuapaiFlag;
		ksId.value = options.ksId;
		// #ifdef H5
		if (toggleScreenFlag.value !== 0) {
			console.log("有切屏");
			document.addEventListener('visibilitychange', cheatingFun, false);
			cheatingNumberSearch();
		}
		if (zhuapaiFlag.value && toggleScreenFlag.value == 0) {
			console.log("有抓拍 无切屏");
			// 有抓拍 没有切屏  此方法是 解决切到后台，抓拍停留一帧的问题
			document.addEventListener('visibilitychange', zhuapaiFun, false);
		}
		// #endif
	}

	function cheatingNumberSearch() {
		let req = {
			ksId: ksId.value,
		};
		getClientQiepingTimes(req).then(res => {
			if (res.code === 0) {
				if (res.data.times > 0 && res.data.times <= res.data.toggleScreenFlag) {
					emits('qiepingToast', res.data.times) // 提示警告
				} else if (res.data.times > 0 && res.data.times >= res.data.toggleScreenFlag) {
					emits('forceSubmit') // 强制交卷
				} 
			}
		});
	}

	function stopListen() {
		if (toggleScreenFlag.value !== 0) {
			console.log("有切屏 销毁");
			document.removeEventListener('visibilitychange', cheatingFun, false);
		}
		if (zhuapaiFlag.value && toggleScreenFlag.value == 0) {
			console.log("有抓拍 无切屏 销毁");
			document.removeEventListener('visibilitychange', zhuapaiFun, false);
		}
	}

	onUnmounted(() => {
		// 组件销毁时移除监听
		stopListen()
	})

	defineExpose({
		init
	})
</script>

<style>
</style>