uniProject/pages/unitTest/index.vue

<template>
	<view class="ezy-exam-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
		<view class="ezy-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">单元测试</text>
			<view class="nav-bar-other"><text class="key-note">{{current+1}}</text>/<text>{{total}}</text></view>
		</view>
		<view class="shiti-frame-box">
			<w-swiper :list="list" :current="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>
						<yingyuDanxuan :question="ceshiData" v-if="item.type == '4'" :placeholders="item.placeholders">
						</yingyuDanxuan>
					</view>
				</template>
			</w-swiper>
			<view class="exam-submit-btn" v-if="current === list.length-1" @click="handleSubmit(uniPointsRef)"></view>
		</view>

		<!--  左右滑动  -->
		<view class="tip-mask-box" @click="handleCloseTishi" v-if="showTishi">
			<view class="exam-tip-box">左右滑动查看更多题目</view>
		</view>


		<!-- 答卷 -->
		<chengji ref="chengjiRef" :list="list" @back="handleBack" :cardId="cardId"></chengji>
		<!-- 分数弹窗 -->
		<uniPointsVue ref="uniPointsRef" @checkAnswer="checkAnswer" @goStudy="goStudyContinue" :isLastZhang="!!haveFlag"
			:studyFlag="studyFlag"></uniPointsVue>
		<!-- 填空 -->
		<FillItem :value="result" ref="popupRef" @blur="onBlur"></FillItem>

		<!-- 音频播放组件 -->
		<mtaRadio></mtaRadio>
	</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 yingyuDanxuan from "@/components/question/yingyu/danxuanCeshi.vue";
	//import yingyuDanxuan from "@/components/question/yingyu/danxuan.vue";
	import chengji from "@/components/chengji/chengji.vue";
	import uniPointsVue from '@/components/points/uni-points.vue';
	import * as httpUnit from "@/api/unitTest.js"
	import {
		catchError,
	} from "@/utils/common.js"
	import {
		useExam
	} from './useUnit';
	import {
		ref,
		reactive
	} from "vue";
	import cacheManager from "@/utils/cacheManager";
	import {
		onLoad
	} from "@dcloudio/uni-app"



	const {
		count,
		total,
		current,
		list,
		rightAnswer,
		wrongAnswer,
		jifen,
		zhangId,
		jieId,
		nianji,
		studyFlag,
		xueke,
		showTishi,
		haveFlag,
		activeZhang,
		handleSubmit,
		initPage,
		handleCloseTishi
	} = useExam();
	const cardId = Number(cacheManager.get('auth').cardId);

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

	const ceshiData = reactive({
			"stId": 378,
			"type": 4,
			"name": "<p>发音：/b/ 1231[yingyu1]</p>",
			"result": "0",
			"answer": "<p>单词book发音为/bʊk/ [yingyu5]; 单词pool的发音是/puːl/ [yingyu4]。</p>",
			"audios": "https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile1a3bd1236181491b8de49e84857a9163.MP3,https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile16b16267eafb43b6a272b8b212049ae4.MP3,https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFileb23646275ada46769e76a3ae0dba230e.MP3,https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFileeff5e2bb7a6f4a0d9bc78b503ebea846.MP3,https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile6cbe483d691b4e5eb13401e301d62c9c.mp3",
			"jiangjie": null,
			"optList": [{
				"neirong": "<p>book [yingyu2]</p>",
				"audio":"https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile1a3bd1236181491b8de49e84857a9163.MP3"
			}, {
				"neirong": "<p>pool [yingyu3]</p>",
				"audio":"https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile16b16267eafb43b6a272b8b212049ae4.MP3"
			}]
		},
		{
			"stId": 379,
			"type": 4,
			"name": "<p>判断划线部分发音是否相同。</p><p><br></p><p>park  [yingyu1]</p><p><br></p><p>cup [yingyu2]</p>",
			"result": "0",
			"answer": "<p>在单词park中，p发 /p/音 [yingyu3]；在单词cup中，p发/p/音 [yingyu4]，故发音相同。</p>",
			"audios": "https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile304fcea7440e400ca2bd0207354b2fa3.MP3,https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile052863fbfd074e718c63509db47f0f6c.MP3,https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFilefee406d7614443609b450b4f260b33e5.MP3,https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile725a16a4dea642ccaf0129ae877b4a7c.MP3",
			"jiangjie": null,
			"optList": [{
				"neirong": "<p>相同</p>",
					"audio":"https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile1a3bd1236181491b8de49e84857a9163.MP3"
			}, {
				"neirong": "<p>不同</p>",
					"audio":"https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile1a3bd1236181491b8de49e84857a9163.MP3"
			}]
		}
	);


	function getPopupRef() {
		return popupRef.value;
	}
	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 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 checkAnswer() {
		chengjiRef.value.showPopup();
	}
	// 继续学习
	async function goStudyContinue() {
		// 设置 从单元测试 到 岛 的路由参数
		activeZhang.value.nextZhang ? activeZhang.value.nextZhang.zhangId : null;
		cacheManager.updateObject('auth', {
			zhangId: activeZhang.value.nextZhang.zhangId,
		})
		uni.redirectTo({
			url: `/pages/study/index`
		})
	}

	function handleBack() {
		// 数学
		uni.redirectTo({
			url: `/pages/study/index`
		})
		uni.$emit('back-outpage')
	}

	function onSwiperChange(index) {
		current.value = index;
		uni.$emit('swiper-change', index)
	}

	function courseBjFun() {
		switch (cardId) {
			case 1:
				return 'static/images/course/couse-shuxue-bj.png'
				break;
			case 2:
				return 'static/images/course/course-yingyu-bj.png'
				break;
			default:
				break;
		}
	}
</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>