uniProject/components/questions/yuedu.vue

<template>
	<view v-if="question" class="phone-yuedu-box">
		<view class="phone-shiti-question">
			<view class="question-num">{{question.onlyNum}}、</view>
			<!-- 题干区域 -->
			<rich-text :nodes="question.name"></rich-text>
		</view>
		<!-- 选项区域 -->
		<swiper class="yuedu-swiper-box" @change="onSwitchChange" :current="swiperDotIndex">
			<swiper-item v-for="(item,index) in data.content" :key="index" class="yuedu-swiper-content">
				<template v-if="item.type == 'danxuan'">
					<!-- 单选 -->
				<danxuan :question="item" :key="item.stId"></danxuan>
				</template>
				<template v-if="item.type == 'duoxuan'">
					<!-- 多选 -->
					<duoxuan :question="item" :key="item.stId"></duoxuan>
				</template>
				<template v-if="item.type == 'panduan'">
					<!-- 判断 -->
					<panduan :question="item" :key="item.stId"></panduan>
				</template>
				<template v-if="item.type == 'tiankong'">
					<!-- 填空 -->
					<tiankong :question="item" :key="item.stId"></tiankong>
				</template>
				<template v-if="item.type == 'jianda'">
					<!-- 简答 -->
					<jianda :question="item" :key="item.stId"></jianda>
				</template>
			</swiper-item>
		</swiper>
		<view  class="yuedu-left-jt" @click="handleRight" :class="{disable: swiperDotIndex == 0}"></view>
		<view  class="yuedu-right-jt" @click="handleLeft" :class="{disable: swiperDotIndex == data.content.length-1}"></view>
		<view class="button-next-tip" v-if="showTishi">点击左右蓝色箭头，<br/>跳转阅读题上下小题</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		watch,
		ref,
		computed
	} from 'vue';
	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 cacheManager from '../../utils/cacheManager';
	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		},
		showTishixinxi: {
			type:Boolean,
			default: false,
		}
	})
	const data = reactive({
		content: []
	})
	const Emits = defineEmits(['yudu-change'])

	const swiperDotIndex = ref(0);
	const showTishi = ref(false);

	watch(() => props.question, (question) => {
		const danxuanlist = question.danxuan.forEach(item => item.type = 'danxuan')
		const duoxuanlist = question.duoxuan.forEach(item => item.type = 'duoxuan')
		const panduanlist = question.panduan.forEach(item => item.type = 'panduan')
		const tiankonglist = question.tiankong.forEach(item => item.type = 'tiankong')
		const jiandalist = question.jianda.forEach(item => item.type = 'jianda')
		
		
		data.content = [...question.danxuan, ...question.duoxuan, ...question.panduan, ...question.tiankong, ...
			question.jianda
		];
		data.content.map((item,index) => {
			item.onlyNum = index+1;
			return item
		})
		Emits('yudu-change', data.content[0])
	}, {
		immediate: true
	})

	watch(() => {
		if (props.showTishixinxi) {
			if (!cacheManager.get('exam-tishi')) {
				// 首次考试打开提示信息
				showTishi.value = true
			} else {
				showTishi.value = false
			}
		} else {
			showTishi.value = false
		}
	}, {
		immediate: true
	})

	function onSwitchChange(e) {
		console.log('eeee', e.detail,data.content[e.detail.current])
		Emits('yudu-change', data.content[e.detail.current])
	}
	
	function handleRight() {
		if (swiperDotIndex.value > 0) {
			swiperDotIndex.value = swiperDotIndex.value--;
		}
	}
	
	function handleLeft() {
		
		if (props.showTishixinxi) {
			// 阅读题提示
			cacheManager.set('exam-tishi', 1)
			showTishi.value = false
		}
		
		if (swiperDotIndex.value < data.content.length-1) {
			swiperDotIndex.value = swiperDotIndex.value++;
		}
	}
</script>