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>
						<text v-if="item.type == '1'">单选题</text>
						<text v-if="item.type == '2'">判断题</text>
						<text v-if="item.type == '3'">填空题</text>
					</view>
					<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>
				</template>
			</w-swiper>
		</view>

		<!--  左右滑动提示  -->
		<view>
			<view>
				< <text>左右滑动查看更多题目</text>>
			</view>
		</view>

		<!-- 填空 -->
		<FillItem :value="result" ref="popupRef" @blur="onBlur"></FillItem>
	</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 * 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
	} = useShuxueTest()

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

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

	function onSwiperChange(index) {
		current.value = 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>