uniProject/pages/cuoti/cuoti.vue

<template>
	<view class="phone-score-page">
		<!-- 段落 -->
		<view class="score-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" @yudu-change="onYueduChange"></yuedu>
				</template>
			</view>
			<!-- 底部 -->
			<view class="kaoshi-bottom-box">
				<view class="shiti-num-box" @click="showAnswerCard">
					<icon class="shiti-num-icon"></icon>答题卡
					<text
						class="active-num">{{activeSt ? activeSt.onlyNum: 0}}</text>/<text>{{data.StListForSearch.length}}</text>
				</view>
			</view>

			<!-- 解析 -->
			<view v-if="activeSt" class="score-answer-box">
				<view class="phone-question-answer-box" v-if="activeSt.stTypeId == 6">
					<template v-if="yuduItemAnswer.stTypeId == 5">
						<!-- 阅读题中简答题 -->
						<view class="phone-line-title">答案解析</view>
						<view class="btdf-row">本题得分：<text>{{yuduItemAnswer.score}}</text>分</view>
						<view class="zqda-row">正确答案：
							<view>{{yuduItemAnswer.result}}</view>
						</view>
						<view class="ndda-row">您的答案：
							<view>{{yuduItemAnswer.reply}}</view>
						</view>
						<view class="dajx-row">答案解析:
							<rich-text :nodes="yuduItemAnswer.answer"></rich-text>
						</view>
					</template>
					<template v-else-if="yuduItemAnswer.stTypeId == 4">
						<view class="phone-line-title">答案解析</view>
						<view class="btdf-row">本题得分：<text>{{yuduItemAnswer.score}}</text>分</view>
						<view class="zqda-row">正确答案：
							<view v-for="(item,index) in yuduItemAnswer.result">{{`填空${index+1}`}} : {{item}}</view>
						</view>
						<view class="ndda-row">您的答案：
							<view v-for="(item,index) in yuduItemAnswer.reply"> {{`填空${index+1}`}}: {{item}}</view>
						</view>
						<view class="dajx-row">答案解析:
							<rich-text :nodes="yuduItemAnswer.answer"></rich-text>
						</view>
					</template>
					<template v-else>
						<view class="phone-line-title">答案解析</view>
						<view class="btdf-row">本题得分：<text>{{yuduItemAnswer.score}}</text>分</view>
						<view class="zqda-row">正确答案：<text>{{yuduItemAnswer.result}}</text></view>
						<view class="ndda-row">您的答案：<text>{{yuduItemAnswer.reply}}</text></view>
						<view class="dajx-row">答案解析:
							<rich-text :nodes="yuduItemAnswer.answer"></rich-text>
						</view>
					</template>
				</view>
				<view class="phone-question-answer-box" v-else-if="activeSt.stTypeId == 5">
					<view class="phone-line-title">答案解析</view>
					<view class="btdf-row">本题得分：<text>{{data.score}}</text>分</view>
					<view class="zqda-row">正确答案：
						<view>{{data.result}}</view>
					</view>
					<view class="ndda-row">您的答案：
						<view>{{data.reply}}</view>
					</view>
					<view class="dajx-row">答案解析:
						<rich-text :nodes="data.answer"></rich-text>
					</view>
				</view>
				<view class="phone-question-answer-box" v-else-if="activeSt.stTypeId == 4">
					<view class="phone-line-title">答案解析</view>
					<view class="btdf-row">本题得分：<text>{{answerRes.score}}</text>分</view>
					<view class="zqda-row">正确答案：
						<view v-for="(item,index) in answerRes.result">{{`填空${index+1}`}} : {{item}}</view>
					</view>
					<view class="ndda-row">您的答案：
						<view v-for="(item,index) in answerRes.reply"> {{`填空${index+1}`}}: {{item}}</view>
					</view>
					<view class="dajx-row">答案解析:
						<rich-text :nodes="answerRes.answer"></rich-text>
					</view>
				</view>
				<view class="phone-question-answer-box" v-else>
					<view class="phone-line-title">答案解析</view>
					<view class="btdf-row">本题得分：<text>{{answerRes.score}}</text>分</view>
					<view class="zqda-row">正确答案：<text>{{answerRes.result}}</text></view>
					<view class="ndda-row">您的答案：<text>{{answerRes.reply}}</text></view>
					<view class="dajx-row">答案解析:
						<rich-text :nodes="answerRes.answer"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 上下按钮 -->
		<view v-if="activeSt" class="score-bottom-box">
			<view @click="handleOpenCard" class="score-num-box">
				<icon class="score-num-icon"></icon>
				<text
					class="active-num">{{activeSt && activeSt.onlyNum||0}}</text>/<text>{{data.StListForSearch.length}}</text>
			</view>
			<view>
				<button type="default" size="mini" hover-class="none" class="phone-green-btn score-answer-btn"
					@click="handlePrev" v-if="!isFistStId">上一题</button>
				<button type="default" size="mini" hover-class="none" class="phone-green-btn score-answer-btn"
					@click="handleNext" v-if="!isLastStId">下一题</button>
				<!-- 		<button type="default" size="mini" hover-class="none" class="phone-green-btn score-answer-btn"
					@click="handleBack" v-if="isLastStId">完成</button> -->
			</view>
		</view>
		<!-- 答题卡 -->
		<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-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>

	</view>
</template>

<script setup>
	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 {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		computed
	} from "vue"
	import * as ctApi from "@/api/cuoti.js"
	const {
		checkDanxuanReply,
		checkDuoxuanReply,
		checkPanduanReply,
		checkTiankongReply,
		getLetterByIndex,
		checkJiandaReply,
		checkYueduReply
	} = useQuestionTools();


	const hisId = ref(null)
	const popupRef = ref(null)
	const yuduItemAnswer = ref(null); // 阅读小题显示答案
	const yuduIndexQa = ref(null); // 阅读小题答案

	const data = reactive({
		ksId: null,
		ksName: '',
		stTotal: 0,
		zyLevelName: '',
		userScore: '',
		ksScore: 0,
		StListForSearch: [],
		duanluo: []
	})

	const questionData = ref([]);
	const progress = reactive({
		dlIndex: 0,
		dtIndex: 0
	})

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

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

	const answerRes = computed(() => {
		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)
			} else {
				reply = '未答'
			}

			if (qa.result) {
				result = getLetterByIndex(qa.result)
			} else {
				result = '无答案'
			}
		}
		if (qa.stTypeId == 2) {
			// 多选题

			if (qa.reply && qa.reply.length) {
				reply = qa.reply.map(item => {
					if (item.trim()) {
						return getLetterByIndex(item.trim())
					}
				}).join(',')
			} else {
				reply = '未答'
			}
			if (qa.result) {
				result = qa.result.map(item => {
					if (item.trim()) {
						return getLetterByIndex(item.trim())
					}
				}).join(',')
			} else {
				result = '无答案'
			}
		}
		if (qa.stTypeId == 3) {
			// 判断题
			if (qa.reply === '') {
				reply = '未答'
			} else 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) {
			let reply = qa.reply || [];
			let result = qa.result || [];
			// 填空题
			return {
				score,
				reply,
				result,
				answer
			}
		} else if (qa.stTypeId == 5) {
			let reply = qa.reply;
			let result = qa.result;
			// 简答题
			return {
				score,
				reply,
				result,
				answer
			}
		} else {
			return {
				score,
				reply,
				result,
				answer
			}
		}
	})

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

	function onYueduChange(data) {
		yuduIndexQa.value = data;
		checkYueduJiexi()
	}

	// 校验阅读解析
	function checkYueduJiexi() {
		console.log('格式化阅读题', yuduIndexQa.value)
		let qa = yuduIndexQa.value;
		let score = qa.userScore;
		let reply = '';
		let result = '';
		let answer = qa.answer;
		if (qa.stTypeId == 1) {
			// 单选题
			if (qa.reply && qa.reply.trim() !== '') {
				reply = getLetterByIndex(qa.reply)
			} else {
				reply = '未答'
			}

			if (qa.result) {
				result = getLetterByIndex(qa.result)
			} else {
				result = '无答案'
			}
			yuduItemAnswer.value = {
				score,
				reply,
				result,
				answer
			}
		}
		if (qa.stTypeId == 2) {
			// 多选题

			if (qa.reply && qa.reply.length) {
				reply = qa.reply.map(item => {
					if (item.trim()) {
						return getLetterByIndex(item.trim())
					}
				}).join(',')
			} else {
				reply = '未答'
			}
			if (qa.result) {
				result = qa.result.map(item => {
					if (item.trim()) {
						return getLetterByIndex(item.trim())
					}
				}).join(',')
			} else {
				result = '无答案'
			}
			yuduItemAnswer.value = {
				score,
				reply,
				result,
				answer
			}
		}
		if (qa.stTypeId == 3) {
			// 判断题
			if (qa.reply === '') {
				reply = '未答'
			} else if (qa.reply == 0) {
				reply = '错误'
			} else if (qa.reply == 1) {
				reply = '正确'
			}
			if (qa.result == 0) {
				result = '错误'
			} else if (qa.result == 1) {
				result = '正确'
			}
			yuduItemAnswer.value = {
				score,
				reply,
				result,
				answer
			}
		}
		if (qa.stTypeId == 4) {
			let reply = qa.reply || [];
			let result = qa.result || [];
			// 填空题
			yuduItemAnswer.value = {
				score,
				reply,
				result,
				answer
			}
		}
		if (qa.stTypeId == 5) {
			// 简单题
			let reply = qa.reply ? '未答' : qa.reply;
			let result = qa.result;
			yuduItemAnswer.value = {
				score,
				reply,
				result,
				answer
			}
		}

	}

	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((options) => {
		hisId.value = options.hisId;
		initPage()
	})


	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';
				}
			} else if (qa.stTypeId == 5) {
				if (checkJiandaReply(qa)) {
					return 'paragraph-qa-block-done';
				} else {
					return 'paragraph-qa-block-init';
				}
			} else if (qa.stTypeId == 6) {
				if (checkYueduReply(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/Chengji/list"
		})
	}


	function formatDuanluoList() {
		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;
				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.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.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.iQa = iQa;
				uIndex++;
				order++;
				iQa++;

				data.StListForSearch.push({
					stId: iTiankong.stId,
					paragraphName: paragraph.name,
					dlIndex: iDuanluo,
					dtIndex: iTiankong.iQa,
					num: iTiankong.onlyNum
				})
			}
			order = 0;
			for (const iJianda of duanluo.jianda) {
				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,
					num: iJianda.onlyNum
				})
			}
			order = 0;
			for (const iYuedu of duanluo.yuedu) {
				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,
					num: iYuedu.onlyNum
				})
			}
			iDuanluo++;
			questionData.value.push(paragraph)

		}
	}

	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 initPage() {
		uni.setNavigationBarTitle({
			title: '错题'
		});
		ctApi.getCuotiInfo({
			hisId: hisId.value
		}).then(res => {
			data.duanluo = [res.data];
			formatDuanluoList();
		})
	}

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

	function handleOpenCard() {
		popupRef.value.open('top')
	}
</script>

<style>

</style>