uniProject/pages/exam/exam.vue

<template>
	<view class="phone-kaoshi-page">
		<!-- 导航区域 -->
		<view class="icon-title-bjcolor-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{data.ksName}}</text>
		</view>
		<!-- 第一行 -->
		<view class="kaoshi-page-title">
			<view v-if="activeSt" class="title-types">{{dlName}}</view>
			<!--  倒计时 -->
			<view v-if="!!data.endSecond">
				<uni-countdown :show-day="false" :showHour="true" :showMinute="true" :second="data.endSecond"
					@timeup="onTimeUp" :start="startCountDown"></uni-countdown>
			</view>
		</view>
		<view class="kaoshi-shiti-content">
			<!-- 内容区域 -->
			<!-- 试题区域 -->
			<view v-if="activeSt">
				<template v-if="activeSt.stTypeId == 1">
					<!-- 单选 -->
					<danxuan :question="activeSt" :key="activeSt.stId"></danxuan>
				</template>
				<template v-if="activeSt.stTypeId == 2">
					<!-- 多选 -->
					<duoxuan :question="activeSt" :key="activeSt.stId"></duoxuan>
				</template>
				<template v-if="activeSt.stTypeId == 3">
					<!-- 判断 -->
					<panduan :question="activeSt" :key="activeSt.stId"></panduan>
				</template>
				<template v-if="activeSt.stTypeId == 4">
					<!-- 填空 -->
					<tiankong :question="activeSt" :key="activeSt.stId"></tiankong>
				</template>
				<template v-if="activeSt.stTypeId == 5">
					<!-- 简答 -->
					<jianda :question="activeSt" :key="activeSt.stId"></jianda>
				</template>
				<template v-if="activeSt.stTypeId == 6">
					<!-- 阅读 -->
					<yuedu :question="activeSt" :key="activeSt.stId"></yuedu>
				</template>
			</view>

		</view>

		<view class="kaoshi-bottom-box">
			<button class="phone-green-btn bj-btn" hover-class="none" type="default" size="mini"
				@click="handleBiaoji">{{activeSt && activeSt.marked ? '取标':'标记'}}</button>
			<view @click="showAnswerCard" class="shiti-num-box">
				<icon class="shiti-num-icon"></icon>
				<text
					class="active-num">{{activeSt ? activeSt.onlyNum: 0}}</text>/<text>{{data.StListForSearch.length}}</text>
			</view>
			<button class="phone-green-btn save-btn" hover-class="none" type="default" size="mini"
				@click="handleSave(true)">保存</button>
		</view>
		<template v-if="activeSt">
			<button type="default" size="mini" hover-class="none" class="phone-green-btn ks-btn-prev"
				@click="handlePrev" v-if="!isFistStId">上一题</button>
			<button type="default" size="mini" hover-class="none" class="phone-green-btn ks-btn-next"
				@click="handleNext" v-if="!isLastStId">下一题</button>
			<button type="default" size="mini" hover-class="none" class="phone-green-btn ks-btn-next"
				@click="handleJiaojuan" v-if="isLastStId">交卷</button>
		</template>

		<!-- 答题卡 -->
		<uni-popup ref="popupRef" background-color="#fff" :animation="false" :is-mask-click="false" :mask-click="false">
			<view class="answer-card-popup">
				<view class="icon-title-bjcolor-navBar-box">
					<view @click="handlePopupBack" class="nav-bar-icon"> </view>
					<text class="nav-bar-title">答题卡</text>
				</view>
				<view class="card-content-box">
					<view class="answer-card-content" v-for="(paragraph,paragraphIndex) in questionData"
						:key="paragraphIndex">
						<view class="paragraph-title">
							{{paragraph.name}}
						</view>
						<view class="paragraph-qa" v-for="(qa,qaIndex) in paragraph.qas" :key="qaIndex"
							:class="getQaClass(qa)" @click="answerCardItemClick(qa)">{{qa.onlyNum}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 摄像头确认 -->
		<!-- 	<zhuapaiConfirm ref="zhuapaiConfirmRef" @success="zpConfirmSuccess" @error="zpConfirmError" 
			@cancel="zpConfirmCancel" key="1"></zhuapaiConfirm> -->
		<template v-if="data.zhuapai && data.zhuapai > 0">
			<!-- 抓拍 -->
			<!-- <zhuapaiVue ref="zhuapaiRef" @error="zpError" @success="zpSuccess" key="2" @progress="onProgress"></zhuapaiVue> -->
		</template>

		<!-- 切屏 -->
		<!-- 	<qiepingVue ref="qiepingRef" @zhuapai="qpZhuapai" @forceSubmit="forceSubmit" @qiepingToast="qiepingToast"
			key="3"></qiepingVue> -->
		<!-- 交卷确认 -->
		<answerQueren ref="answerQrRef" @confirm="handleQuerenConfirm"></answerQueren>
		<!-- 考试得分 -->
		<submitScoreVue ref="subScoreRef" @confirm="handleScoreConfirm" @close="handleScoreClose"></submitScoreVue>

		<!-- 切屏确认弹窗 -->
		<!-- <qiepingDlVue ref="qiepingDlRef" :content="messageContent" title="注意" okBtn="知道了"></qiepingDlVue> -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch,
		nextTick
	} from "vue";
	import zhuapaiVue from "@/components/zhuapaiConfirm/zhuapai.vue";
	import qiepingVue from "@/components/zhuapaiConfirm/qieping.vue";
	import zhuapaiConfirm from "@/components/zhuapaiConfirm/index.vue";
	import answerQueren from "@/components/zhuapaiConfirm/answerQueren.vue";
	import submitScoreVue from "@/components/zhuapaiConfirm/submitScore.vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as ksApi from "@/api/exam.js"
	import danxuan from "@/components/questions/danxuan.vue";
	import duoxuan from "@/components/questions/duoxuan.vue";
	import tiankong from "@/components/questions/tiankong.vue";
	import panduan from "@/components/questions/panduan.vue";
	import jianda from "@/components/questions/jianda.vue";
	import yuedu from "@/components/questions/yuedu.vue";
	import {
		useQuestionTools
	} from "@/components/questions/useQuestionTools.js";
	import {
		useKaoShiCache
	} from "./examTools"
	import qiepingDlVue from "@/components/dialog/qiepingDl.vue";

	const {
		checkDanxuanReply,
		checkDuoxuanReply,
		checkPanduanReply,
		checkTiankongReply,
		getLetterByIndex
	} = useQuestionTools();
	const {
		saveCacheKs,
		getCacheKs,
		removeCacheKs
	} = useKaoShiCache();

	onLoad((option) => {
		data.ksId = option.ksId;
		data.zhuapai = option.zhuapai;
		if (data.zhuapai && data.zhuapai != 0) {
			// 考试前确认摄像头
			nextTick(() => {
				// initBeforKaoshi();
			})
		} else {
			console.log('初始化')
			initKaoshi();
		}
	})


	const popupRef = ref(null)
	const zhuapaiRef = ref(null)
	const qiepingRef = ref(null)
	const zhuapaiConfirmRef = ref(null)
	const answerQrRef = ref(null);
	const startCountDown = ref(false);
	const subScoreRef = ref(null);
	const messageContent = ref('');
	const qiepingDlRef = ref(null);

	const timer1 = ref(null);

	const data = reactive({
		ksId: null,
		operId: null,
		ksName: '',
		stTotal: 0,
		stScore: 0,
		biaoji: {},
		endSecond: 0,
		pageSize: 0,
		toggleScreenFlag: 0,
		toggleScreenSecond: 0,
		zhuapai: 0,
		duanluo: [],
		StListForSearch: [],
		from: '',
		hisId: '',
	})

	const markDB = ref([]);

	const questionData = ref([]);

	const progress = reactive({
		dlIndex: 0,
		dtIndex: 0
	})

	const dlName = computed(() => {
		if (data.StListForSearch && activeSt.value) {
			return data.StListForSearch[activeSt.value.onlyNum - 1].paragraphName
		} else {
			return ''
		}
	})

	watch(() => data.duanluo, (newVal) => {
		// 计算已答试题数量
	}, {
		deep: true
	})

	const activeSt = computed(() => {
		if (questionData.value.length) {
			return questionData.value.length && questionData.value[progress.dlIndex].qas[progress.dtIndex];
		} else {
			return null
		}
	})

	const isFistStId = computed(() => {
		if (data.StListForSearch.length) {
			return data.StListForSearch[0].stId == activeSt.value.stId
		} else {
			return false
		}
	});
	const isLastStId = computed(() => {
		if (data.StListForSearch.length) {
			return data.StListForSearch[data.StListForSearch.length - 1].stId == activeSt.value.stId
		} else {
			return false
		}
	});


	function handleScoreClose() {
		handleBack()
	}

	// 考试得分相关 start
	function handleScoreConfirm() {
		uni.redirectTo({
			url: `/pages/client/Chengji/ksScoreShijuan?hisId=${data.hisId}&from=kaoshi`
		})
	}

	// 考试得分相关 end

	// 保存相关
	function handleSave(showToast) {
		if (timer1.value) {
			uni.showToast({
				title: '请勿连续保存',
				icon: 'none'
			})
			return
		}
		timer1.value = setTimeout(() => {
			clearTimeout(timer1.value);
		}, 10 * 1000);
		console.log(questionData.value)

		const result = []
		const option = {
			force: false,
			operId: data.operId,
			replyList: []
		}
		questionData.value.forEach(dl => {
			dl.qas.forEach(st => {
				const opt = {
					stId: st.stId,
					reply: st.reply,
				}
				result.push(opt)
				option.replyList.push(opt)
			})
		})
		// 保存试题答案
		saveCacheKs(data.operId, {
			replyList: result,
			position: {
				dlIndex: progress.dlIndex,
				dtIndex: progress.dtIndex
			}
		})
		// 保存答题进度
		ksApi.getClientKsSave(option).then(res => {
			if (res.data && showToast) {
				uni.showToast({
					title: '保存成功',
				})
			}
		})
	}


	//  交卷相关功能 start
	function checkJiaojuan() {
		const result = []
		let count = 0;
		let total = 0;
		questionData.value.forEach(dl => {
			dl.qas.forEach(st => {
				const opt = {
					stId: st.stId,
					reply: st.reply,
					stTypeId: st.stTypeId
				}
				result.push(opt)
			})
		})

		result.forEach(item => {
			total++;
			if (item.stTypeId == 1 && !checkDanxuanReply(item)) {
				count++;
			}
			if (item.stTypeId == 2 && !checkDuoxuanReply(item)) {
				count++;
			}
			if (item.stTypeId == 3 && !checkPanduanReply(item)) {
				count++;
			}
			if (item.stTypeId == 4 && !checkTiankongReply(item)) {
				count++;
			}
		})
		return {
			total,
			count,
		}
	}

	function handleJiaojuan() {
		const result = checkJiaojuan()
		console.log(result)
		if (result.count) {
			// 提示
			answerQrRef.value.showDialog({
				answercartsCount: result.total - result.count,
				answercartsTotal: result.total,
			})
		} else {
			handleSubmit()
		}
	}

	function handleQuerenConfirm() {
		handleSubmit()
	}

	function handleSubmit(force = false) {
		const result = {
			force,
			operId: data.operId,
			replyList: []
		};
		questionData.value.forEach(dl => {
			dl.qas.forEach(st => {
				const opt = {
					stId: st.stId,
					reply: st.reply
				}
				result.replyList.push(opt)
			})
		})

		ksApi.getClientKsSubmit(result).then(res => {
			if (res.code == 0) {
				subScoreRef.value.showDialog(res.data);
				data.hisId = res.data.hisId;
				// 清空缓存
				removeCacheKs(data.operId);
			}
		})
	}

	function onTimeUp() {
		handleSubmit();
	}
	//  交卷相关功能 end


	// 切屏功能 start
	function qiepingToast(count) {
		messageContent.value = `已离开${count}次。${data.toggleScreenFlag}次将自动交卷！`
		qiepingDlRef.value.handleShow()
	}

	function forceSubmit() {
		// 强制交卷
		console.log('强制交卷')
		handleSubmit(true)
	}

	function qpZhuapai() {
		// 重新开启抓拍
		zhuapaiRef.value && zhuapaiRef.value.showVideoBtn();
	}
	// 切屏功能 end

	// 摄像头抓拍相关功能 start

	function zpSuccess() {}

	function zpError() {
		uni.showToast({
			title: '抓拍图片异常',
			icon: 'none'
		})
		handleBack()
	}

	// 摄像头抓拍相关功能 end
	// 摄像头确认相关功能 start
	function onProgress() {
		uni.showToast({
			icon: 'none',
			title: '摄像头运行环境异常，请重新进入考试',
			duration: 8000
		})
		handleBack();
	}

	function zpConfirmSuccess() {
		console.log('zpConfirmSuccess')
		initKaoshi();
	}

	function zpConfirmError() {
		handleBack()
	}

	function zpConfirmCancel() {
		handleBack()
	}

	// 摄像头确认相关功能 end

	function getQaClass(qa) {
		if (qa.marked && qa.marked === true) {
			return 'paragraph-qa-block-mark';
		} else {
			if (qa.stTypeId == 1) {
				if (checkDanxuanReply(qa)) {
					return 'paragraph-qa-block-done';
				} else {
					return 'paragraph-qa-block-init';
				}
			} else if (qa.stTypeId == 2) {
				if (checkDuoxuanReply(qa)) {
					return 'paragraph-qa-block-done';
				} else {
					return 'paragraph-qa-block-init';
				}
			} else if (qa.stTypeId == 3) {
				if (checkPanduanReply(qa)) {
					return 'paragraph-qa-block-done';
				} else {
					return 'paragraph-qa-block-init';
				}
			} else if (qa.stTypeId == 4) {
				if (checkTiankongReply(qa)) {
					return 'paragraph-qa-block-done';
				} else {
					return 'paragraph-qa-block-init';
				}
			}
		}
	}

	function skipQuestion(dlIndex, dtIndex) {
		progress.dlIndex = dlIndex;
		progress.dtIndex = dtIndex;
		handlePopupBack()
	}

	function answerCardItemClick(qa) {
		const actQa = data.StListForSearch.find(item => item.stId == qa.stId);
		console.log('actQa', actQa)
		skipQuestion(actQa.dlIndex, actQa.dtIndex)

	}

	function handleBack() {
		const pages = getCurrentPages();
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			history.back();
		}


	}

	function showAnswerCard() {
		popupRef.value.open('top')
	}

	function handlePopupBack() {
		popupRef.value.close()
	}

	function handlePrev() {
		const qa = data.StListForSearch.find(item => item.stId == activeSt.value.stId);
		const index = qa.onlyNum - 1;
		if (index > 0) {
			const result = data.StListForSearch[index - 1];
			progress.dlIndex = result.dlIndex;
			progress.dtIndex = result.dtIndex
		}

	}

	function handleNext() {
		const qa = data.StListForSearch.find(item => item.stId == activeSt.value.stId);
		const index = qa.onlyNum - 1;
		if (index < data.StListForSearch.length) {
			const result = data.StListForSearch[index + 1];
			progress.dlIndex = result.dlIndex;
			progress.dtIndex = result.dtIndex
		}
	}

	function formatDuanluoList(dlData) {
		let uIndex = 0; // 试题onlyNum
		let iDuanluo = 0; // 段落onlyNum
		let result = [];
		for (const duanluo of data.duanluo) {
			let paragraph = {
				qas: [],
			};
			paragraph.name = duanluo.name;

			let iQa = 0; // 当前试题序号
			let order = 0; // 当前题型中第几题
			for (const iDanxuan of duanluo.danxuan) {
				iDanxuan.type = 'danxuan';
				iDanxuan.marked = data.biaoji[iDanxuan.stId] ? true : false;
				iDanxuan.onlyNum = uIndex + 1;
				iDanxuan.order = order;
				iDanxuan.iQa = iQa;
				paragraph.qas.push(iDanxuan);
				uIndex++;
				order++;
				iQa++;

				data.StListForSearch.push({
					stId: iDanxuan.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iDanxuan.iQa,
					onlyNum: iDanxuan.onlyNum
				})
			}
			order = 0;
			for (const iDuoxuan of duanluo.duoxuan) {
				iDuoxuan.type = 'duoxuan';
				iDuoxuan.marked = data.biaoji[iDuoxuan.stId] ? true : false;
				iDuoxuan.onlyNum = uIndex + 1;
				iDuoxuan.order = order;
				paragraph.qas.push(iDuoxuan);
				iDuoxuan.iQa = iQa;
				iDuoxuan.reply = [];
				uIndex++;
				order++;
				iQa++;

				data.StListForSearch.push({
					stId: iDuoxuan.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iDuoxuan.iQa,
					onlyNum: iDuoxuan.onlyNum
				})
			}
			order = 0;
			for (const iPanduan of duanluo.panduan) {
				iPanduan.type = 'panduan';
				iPanduan.marked = data.biaoji[iPanduan.stId] ? true : false;
				iPanduan.onlyNum = uIndex + 1;
				iPanduan.order = order;
				paragraph.qas.push(iPanduan);
				iPanduan.iQa = iQa;
				uIndex++;
				order++;
				iQa++;

				data.StListForSearch.push({
					stId: iPanduan.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iPanduan.iQa,
					onlyNum: iPanduan.onlyNum
				})
			}
			order = 0;
			for (const iTiankong of duanluo.tiankong) {
				iTiankong.type = 'tiankong';
				iTiankong.marked = data.biaoji[iTiankong.stId] ? true : false;
				iTiankong.onlyNum = uIndex + 1;
				iTiankong.order = order;
				paragraph.qas.push(iTiankong);
				iTiankong.iQa = iQa;
				iTiankong.reply = new Array(iTiankong.count).fill('');
				uIndex++;
				order++;
				iQa++;

				data.StListForSearch.push({
					stId: iTiankong.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iTiankong.iQa,
					onlyNum: iTiankong.onlyNum
				})
			}
			order = 0;
			for (const iJianda of duanluo.jianda) {
				iJianda.marked = data.biaoji[iJianda.stId] ? true : false;
				iJianda.type = 'jianda';
				iJianda.onlyNum = uIndex + 1;
				iJianda.order = order;
				iJianda.iQa = iQa;
				paragraph.qas.push(iJianda);
				iJianda.reply = '';
				uIndex++;
				order++;
				iQa++;

				data.StListForSearch.push({
					stId: iJianda.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iJianda.iQa,
					onlyNum: iJianda.onlyNum
				})
			}
			order = 0;
			for (const iYuedu of duanluo.yuedu) {
				iYuedu.marked = data.biaoji[iYuedu.stId] ? true : false;
				iYuedu.type = 'yuedu';
				iYuedu.onlyNum = uIndex + 1;
				iYuedu.order = order;
				iYuedu.iQa = iQa;

				if (iYuedu.duoxuan && iYuedu.duoxuan.length) {
					iYuedu.duoxuan.map((qIt) => {
						qIt.reply = qIt.reply || [];
						return qIt
					})
				}
				
				if (iYuedu.tiankong && iYuedu.tiankong.length) {
					iYuedu.tiankong.map((qIt) => {
						qIt.reply = new Array(qIt.count).fill('');
						return qIt;
					}) ;
				}



				paragraph.qas.push(iYuedu);
				iYuedu.reply = [];
				uIndex++;
				order++;
				iQa++;

				data.StListForSearch.push({
					stId: iYuedu.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iYuedu.iQa,
					onlyNum: iYuedu.onlyNum
				})
			}
			iDuanluo++;
			questionData.value.push(paragraph)
		}
	}

	function handleBiaoji() {
		activeSt.value.marked = !activeSt.value.marked;
		data.biaoji[activeSt.value.stId] = activeSt.value.marked
		ksApi.getClientKaoshiBiaoji({
			operId: data.operId,
			biaoji: JSON.stringify(data.biaoji)
		}).catch(err => {
			/* uni.redirectTo({
				url: '/pages/client/Kaoshi/list'
			}) */
			handleBack()
		})
	}

	function formatKaoshiData() {
		const historyData = getCacheKs(data.operId);
		if (historyData) {
			const {
				replyList,
				position
			} = historyData;
			if (replyList) {
				questionData.value.forEach(dl => {
					dl.qas.forEach(st => {
						st.reply = replyList.find(item => item.stId == st.stId).reply
					})
				})
			}
			if (position) {
				progress.dlIndex = position.dlIndex;
				progress.dtIndex = position.dtIndex;
			}

		}
	}

	// 摄像头确认初始化
	function initBeforKaoshi() {
		console.log(zhuapaiConfirmRef.value)
		zhuapaiConfirmRef.value.showDialog()
	}


	function initKaoshi() {
		ksApi.getClientKsStart({
			ksId: data.ksId,
		}).then(res => {
			const {
				ksId,
				operId,
				ksName,
				stTotal,
				stScore,
				biaoji,
				endSecond,
				pageSize,
				toggleScreenFlag,
				toggleScreenSecond,
				zhuapai,
				duanluoList
			} = res.data;

			data.ksId = ksId;
			data.operId = operId;
			data.ksName = ksName;
			data.stTotal = stTotal;
			data.stScore = stScore;
			data.biaoji = biaoji ? JSON.parse(biaoji) : {};
			data.endSecond = endSecond;
			data.pageSize = pageSize;
			data.toggleScreenFlag = toggleScreenFlag;
			data.toggleScreenSecond = toggleScreenSecond;
			data.zhuapai = zhuapai;
			data.duanluo = duanluoList;
			formatDuanluoList(data.duanluo);
			// 设置缓存
			formatKaoshiData();
			// 设置抓拍监听

			if (data.zhuapai && data.zhuapai > 0) {
				zhuapaiRef.value.init({
					zhuapai: zhuapai,
					operId: operId
				});
			}

			// 设置切屏监听
			// qiepingRef.value.init({
			// 	zhuapaiFlag: true,
			// 	toggleScreenFlag: toggleScreenFlag,
			// 	toggleScreenSecond: toggleScreenSecond,
			// 	ksId: data.ksId
			// })

			startCountDown.value = true;
		}).catch(err => {
			console.log('asdasd', err)
			// handleBack()
		})
	}
</script>

<style lang="scss">
	.phone-kaoshi-page {
		display: flex;
		flex-direction: column;
		background-color: #f4f6fa;
		position: relative;

		.kaoshi-page-title {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #333;
			display: flex;
			justify-content: space-between;
			padding: 0 24rpx;
			border-bottom: 1rpx solid #ebebeb;

			.title-types {
				font-size: 32rpx;
				color: #000;
			}
		}

		.kaoshi-shiti-content {
			padding: 24rpx 24rpx 0 24rpx;
			background-color: #fff;
			flex: 1;
		}

		.kaoshi-bottom-box {
			width: 100%;
			height: 100rpx;
			background-color: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: var(--window-bottom);

			.bj-btn,
			.jx-btn,
			.save-btn {
				height: 60rpx;
				line-height: 58rpx;
				box-sizing: border-box;
			}

			.bj-btn {
				margin-left: unset;
			}

			.jx-btn,
			.save-btn {
				margin-right: unset;
			}

			.shiti-num-icon {
				width: 27px;
				height: 24px;
				vertical-align: middle;
				// background-image: url("@/static/images/exam/shiti-num-icon.png");
				@include ezy-no-repeat-cover();
			}

			.active-num {
				color: #30c190;
			}
		}

		.ks-btn-prev {
			position: fixed;
			bottom: 130rpx;
			left: 24rpx;
		}

		.ks-btn-next {
			position: fixed;
			bottom: 130rpx;
			right: 24rpx;
		}
	}
</style>