uniProject/pages/xinshuxue/unitTest.vue

<template>
	<view class="ezy-exam-page">
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">单元测试</text>
		</view>

		<view class="exam-body">
			<view class="xx-jd-box">
				<view class="xx-row" v-if="data.total">
					<view>当前学习进度</view>
					<view class="text-row">
						<text class="dq-jd-text">{{data.current+1}}</text>
						<text class="dq-jd-line">/</text>{{data.total}}
					</view>
				</view>
				<progress :percent="(data.current+1)/data.total * 100" class="exam-progress-box" stroke-width="10"
					backgroundColor="#3c7dfd" activeColor="#ffd11c" />
			</view>


			<view class="shiti-frame-box">
				<w-swiper :list="data.list" :current="data.current" class="ezy-exam-swiper" @change="onSwiperChange">
					<template v-slot:default="{item}">
						<view class="body" v-if="item.mta_show">
							<danxuan :question="item" v-if="item.type == '1'"></danxuan>
							<panduan :question="item" v-if="item.type == '2'"></panduan>
							<tiankong :question="item" v-if="item.type == '3'" :placeholders="item.placeholders">
							</tiankong>
							<!-- 交卷按钮 -->
							<view class="shiti-jj-btn" v-if="item.stId == data.list[data.total-1].stId"
								@click="handleSubmit"></view>
						</view>
					</template>
				</w-swiper>
				<!--  左右滑动提示  -->
				<view class="swiper-tip-box">
					左右滑动查看更多题目
				</view>
			</view>
		</view>




		<!-- 填空 -->
		<FillItem :value="result" ref="popupRef" @blur="onBlur"></FillItem>

		<unitResultVue ref="uniResRef" @check-answer="onCheckAnswer" @do-replay="onDoReplay"></unitResultVue>

		<unitAnswerVue :list="data.list" ref="uniAnsRef" @back="handleBack"></unitAnswerVue>
	</view>
</template>

<script setup>
	import mtaRadio from '@/components/question/yingyu/mtaRadio.vue'
	import FillItem from "@/components/question/FillItem.vue";
	import wSwiper from '@/components/wSwiper/wSwiper.vue';
	import danxuan from "@/components/question/danxuan.vue";
	import panduan from "@/components/question/panduan.vue";
	import tiankong from "@/components/question/tiankong.vue";
	import unitResultVue from './components/unitResult.vue';
	import unitAnswerVue from "./components/unitAnswer.vue";

	import * as httpApi from "@/api/chanpinShuxue.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useShuxueTest
	} from "./components/useShuxueUnitTest.js"
	const {
		data,
		handleSubmit,
		updateRightWrong,
		resetStart
	} = useShuxueTest(handleSeeResult, handleSeeResultClose)

	const curTiankong = ref(null);
	const result = ref('');
	const popupRef = ref(null);
	const uniResRef = ref(null);
	const uniAnsRef = ref(null);

	function handleSeeResultClose() {
		uniResRef.value.closePopup()
	}

	function handleSeeResult() {
		uniResRef.value.showPopup({
			right: data.rightAnswer,
			wrong: data.wrongAnswer
		})
	}

	function handleCheckAnswer() {
		uniResRef.value.showPopup({
			jieId: data.jieId
		})
	}

	function onDoReplay() {
		resetStart()
	}

	function onCheckAnswer() {
		uniAnsRef.value.showPopup();
	}


	onLoad(() => {
		uni.$on('tiankong-fillItem', (val) => {
			const {
				index,
				question
			} = val;
			curTiankong.value = val;
			result.value = question.reply[index];
			const dom = getPopupRef();
			dom && dom.showPopup();
		})

		uni.$on('unitShuxueTest-submit', val => {
			updateRightWrong(val)
		})
	})

	function getPopupRef() {
		return popupRef.value;
	}

	function onBlur({
		result
	}) {
		if (curTiankong.value) {
			uni.$emit('tiankong-setResult', {
				index: curTiankong.value.index,
				stId: curTiankong.value.question.stId,
				result
			});
		}
		const dom = getPopupRef();
		dom && dom.handleClear();
	}

	function handleBack() {
		uni.navigateBack()
	}

	function onSwiperChange(index) {
		data.current = index;
		uni.$emit('swiper-change', index)
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
	}
</style>