uniProject/pages/admin/Kaoshi/exam.vue

<template>
	<view class="phone-kaoshi-page">
		<!-- 导航区域 -->
		<view class="phone-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"><uni-icons type="left" size="20"></uni-icons></view>
			<text class="nav-bar-title">{{data.ksName}}</text>
		</view>
		<!-- 第一行 -->
		<view class="kaoshi-page-title">
			<view v-if="activeSt">{{stTypes[activeSt.stTypeId]}}</view>
			<view>100分钟</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>
			</view>

		</view>

		<view class="kaoshi-bottom-card">
			<view style="margin:0 10px">
				<button class="biaoji-btn" type="primary" size="mini" @click="handleBiaoji">标记</button>
			</view>
			<view @click="showAnswerCard">
				<text style="color: green;">{{activeSt ? activeSt.onlyNum: 0}}</text>/<text>{{data.StListForSearch.length}}</text>
			</view>
			<view style="flex:1;text-align: right;">
				<button type="primary" size="mini" @click="handleCheckJiexi" style="margin-right: 10px">解析</button>
				<button type="primary" size="mini" @click="handleBack">完成</button>
			</view>
		</view>
		<template v-if="activeSt">
			<button type="primary" size="mini" class="ks-btn-prev" @click="handlePrev" v-if="!isFistStId">上一题</button>
			<button type="primary" size="mini" class="ks-btn-next" @click="handleNext" v-if="!isLastStId">下一题</button>
		</template>

		<!-- 答题卡 -->
		<uni-popup ref="popupRef" background-color="#fff" :is-mask-click="false" :mask-click="false">
			<view class="popup-content" style="height: 100vh">
				<view class="popup-phone-navBar-box">
					<view @click="handlePopupBack" class="nav-bar-icon"><uni-icons type="left" size="20"></uni-icons>
					</view>
					<text class="nav-bar-title">答题卡</text>
				</view>
				<view class="main-container">
					<view class="paragraph" v-for="(paragraph,paragraphIndex) in questionData" :key="paragraphIndex">
						<view class="paragraph-title">
							{{paragraph.name}}
						</view>
						<view class="paragraph-qa-content">
							<view class="paragraph-qa" v-for="(qa,qaIndex) in paragraph.qas" :key="qaIndex">
								<view class="paragraph-qa-block">
									<view :class="getQaClass(qa)" @click="answerCardItemClick(qa)">
										{{qa.onlyNum}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</uni-popup>
		<!--
		// 倒计时
		<view v-if="!!data.endSecond">
			<text>考试倒计时:</text>
			<uni-countdown :show-day="false" :second="1000" @timeup="onTimeUp" :start="startCountDown"></uni-countdown>
		</view>
		-->
		<!-- 答案解析 -->
		<scoreAndAnswerVue ref="scoreAnswerRef"></scoreAndAnswerVue>
		
	</view>



</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as ksApi from "@/api/kaoshi.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 scoreAndAnswerVue from "@/components/scoreAndAnswer/scoreAndAnswerAdmin.vue";
	import {useQuestionTools} from "@/components/questions/useQuestionTools.js";

	const {
		checkDanxuanReply,
		checkDuoxuanReply,
		checkPanduanReply,
		checkTiankongReply,
		getLetterByIndex
	} = useQuestionTools();

	const stTypes = {
		1: '单选题',
		2: '多选题',
		3: '判断题',
		4: '填空题',
	}

	const popupRef = ref(null)
	const scoreAnswerRef = ref(null)

	const startCountDown = ref(false);

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

	const questionData = ref([]);

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

	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
		}
	});

	onLoad((option) => {
		data.ksId = option.ksId;
		initKaoshi();
	})

	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);
		skipQuestion(actQa.dlIndex, actQa.dtIndex)

	}

	function handleBack() {
		uni.redirectTo({
			url: "/pages/admin/Kaoshi/list"
		})
	}

	function onTimeUp() {
		console.log('end')
	}

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

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

	function handlePrev() {
		const qa = data.StListForSearch.find(item => item.stId == activeSt.value.stId);
		const index = qa.num - 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.num - 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; // 试题num
		let iDuanluo = 0; // 段落num
		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 = false;
				iDanxuan.onlyNum = uIndex + 1;
				iDanxuan.order = order;
				iDanxuan.iQa = iQa;
				iDanxuan.reply = iDanxuan.result;
				paragraph.qas.push(iDanxuan);
				uIndex++;
				order++;
				iQa++;

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

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

				data.StListForSearch.push({
					stId: iPanduan.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iPanduan.iQa,
					num: iPanduan.onlyNum
				})
			}
			order = 0;
			for (const iTiankong of duanluo.tiankong) {
				iTiankong.type = 'tiankong';
				iTiankong.marked = false;
				iTiankong.onlyNum = uIndex + 1;
				iTiankong.order = order;
				paragraph.qas.push(iTiankong);
				iTiankong.reply = iTiankong.result.map(item => item[0]);
				iTiankong.iQa = iQa;
				uIndex++;
				order++;
				iQa++;

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

			console.log(questionData.value)
		}
	}
	
	function handleBiaoji() {
		activeSt.value.marked = !activeSt.value.marked;
	}
	
	function handleCheckJiexi() {
		const qa = activeSt.value ;
		let score = qa.score;
		let reply = '';
		let result = '';
		let answer = qa.answer;
		if (qa.stTypeId == 1) {
			// 单选题
			if (qa.reply && qa.reply.trim() !== '') {
				reply = getLetterByIndex(qa.reply)
			}
			
			if (qa.result) {
				result = getLetterByIndex(qa.result)
			}
		}
		if (qa.stTypeId == 2) {
			// 多选题
			
			if (qa.reply && qa.reply.length) {
				reply = reply.map(item => {
					if (item.trim()) {
						return getLetterByIndex(item.trim())
					}
				})
			}
			if (qa.result) {
				result = result.map(item => {
					if (item.trim()) {
						return getLetterByIndex(item.trim())
					}
				})
			}
		}
		if (qa.stTypeId == 3) {
			// 判断题
			if (qa.reply == 0) {
				reply = '错误'
			}else if (qa.reply == 1) {
				reply = '正确'
			}
			if (qa.result == 0) {
				result = '错误'
			}else if (qa.result == 1) {
				result = '正确'
			}
		}
		if (qa.stTypeId == 4) {
			// 填空题
		}
		scoreAnswerRef.value.showPopup({
			score,reply,result,answer
		})
	}

	function initKaoshi() {
		ksApi.getKaoshiInfo({
			ksId: data.ksId
		}).then(res => {
			const {
				ksId,
				ksName,
				stTotal,
				stScore,
				biaoji,
				endSecond,
				pageSize,
				toggleScreenFlag,
				toggleScreenSecond,
				zhuapai,
				duanluoList
			} = res.data;
			data.ksId = ksId;
			data.ksName = ksName;
			data.stTotal = stTotal;
			data.stScore = stScore;
			data.biaoji = biaoji;
			data.endSecond = endSecond;
			data.pageSize = pageSize;
			data.toggleScreenFlag = toggleScreenFlag;
			data.toggleScreenSecond = toggleScreenSecond;
			data.zhuapai = zhuapai;
			data.duanluo = duanluoList;
			formatDuanluoList(data.duanluo);
			uni.setNavigationBarTitle({
				title: data.ksName
			});
			startCountDown.value = true;
		})
	}
</script>

<style lang="scss">
	.phone-kaoshi-page {
		background-color: #ccc;
		position: relative;

		.phone-navBar-box {
			width: 100%;
			height: 60px;
			background-color: #fff;
			text-align: center;
			position: relative;
			line-height: 60px;

			.nav-bar-icon {
				position: absolute;
				left: 0;
				top: 0
			}
		}

		.kaoshi-page-title {
			margin-top: 10px;
			background-color: #fff;
			height: 60px;
			line-height: 60px;
			display: flex;
			justify-content: space-between;
			padding: 0 10px;
			border-bottom: 1px solid #333;
		}

		.kaoshi-shiti-content {
			padding: 20px 20px 0 20px;
			height: calc(100vh - 211px);
			background-color: #fff;
		}

		.kaoshi-bottom-card {
			height: 60px;
			width: 100%;
			background-color: #ccc;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			text-align: left;
			padding: 0 10px;
			box-sizing: border-box;
		}

		.ks-btn-prev {
			position: absolute;
			bottom: 150px;
			left: 0;
		}

		.ks-btn-next {
			position: absolute;
			bottom: 150px;
			right: 0;
		}

		.popup-phone-navBar-box {
			width: 100%;
			height: 60px;
			background-color: #fff;
			text-align: center;
			position: relative;
			line-height: 60px;

			.nav-bar-icon {
				position: absolute;
				left: 0;
				top: 0
			}
		}

		.paragraph-qa-content {
			display: flex;
			flex-wrap: wrap;

			.paragraph-qa {
				margin: 10px;
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border: 1px solid #ccc;
				border-radius: 50%;
				overflow: hidden;
			}
			// 答题卡 答完样式
			.paragraph-qa-block-done {
				background-color: skyblue;
			}
			// 答题卡 未答完样式
			.paragraph-qa-block-init {
				background-color: #ccc;
			}
			// 答题卡 标记样式
			.paragraph-qa-block-mark {
				background-color: orange;
			}
		}
	
	}
</style>