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>
		<!-- 选项区域 -->
		<view class="yuedu-option-box">
			<swiper class="swiper-box" @change="onSwitchChange" :current="swiperDotIndex">
				<swiper-item v-for="(item,index) in data.content" :key="index" class="swiper-item-content">
					<view class="swiper-item" :class="'swiper-item' + index" style="background-color: #ccc;">
						<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>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

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

	const swiperDotIndex = ref(0);

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

	function onSwitchChange(e) {
		console.log('eeee', e.detail,data.content[e.detail.current])
		Emits('yudu-change', data.content[e.detail.current])
	}
</script>

<style lang="scss">
	.yuedu-option-box{
		height: calc(100vh - 500rpx);display: flex;flex-direction: column;
		.swiper-box{flex: 1;}
		.swiper-item-content{overflow-y: auto;}
		}
</style>