uniProject/pages/chanpinXuanze/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>
			<view>
				<view>当前学习进度</view>
				<view>{{data.current+1}}/{{data.total}}</view>
			</view>
			<progress :percent="data.current/data.total * 100" :border-radius="30" stroke-width="10" />
		</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>
						<button type="primary" v-if="item.stId == data.list[data.total-1].stId"
							@click="handleSubmit">交卷</button>
					</view>
				</template>
			</w-swiper>
		</view>



		<!--  左右滑动提示  -->
		<view>
			<view>
				< <text>左右滑动查看更多题目</text>>
			</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
	} = useShuxueTest(handleSeeResult, handleCheckAnswer)

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


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

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

	function onDoReplay() {

	}

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

	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>