uniProject/components/question/yingyu/danxuan.vue

<template>
	<view v-if="question" class="ezy-yingyu-danxuan-box">
		<!-- 标题区域 -->
		<view class="yingyu-danxuan-title"></view>
		<!-- 题干区域 -->
		<textReplaceIconVue :question="question" :text="question.name" :placeholders="placeholders">
		</textReplaceIconVue>
		<!-- 选项区域 -->
		<view v-for="(item,index) in data.contents" class="yingyu-danxuan-option-box" :class="formatClass(index)" :key="index" @click="onSelect(index)">
			<text class="option-change">{{item.number}}</text>
			<textReplaceIconVue :question="question" :text="item.label" :placeholders="placeholders" @itemclick="onSelect(index)">
			</textReplaceIconVue>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	import {
		useQuestionTools
	} from "../useQuestionTools"

	import textReplaceIconVue from './textReplaceIcon.vue'
	
	const {
		getLetterByIndex
	} = useQuestionTools();
	
	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		},
		placeholders: { // 占位符
			type: Array,
			required: true
		},
	})
	const data = reactive({
		name: '', //题干数据
		contents: [], // 选项数据
	})
	watch(() => props.question, (val) => formatData(val), {
		immediate: true
	})
	
	function formatClass(index) {
		if (props.showError) {
			return {
				active_right: props.question.result == index,
				showError: props.question.reply == index && props.question.result != index
			}
		} else {
			return {
				active: props.question.reply == index
			}
		}
	}
	
	function formatData(val) {
		if (val) {
			data.name = val.name;
			data.contents = val.optList.map((item, index) => {
				return {
					label: item,
					number: getLetterByIndex(index)
				}
			})
		}
	}
	
	function onSelect(index) {
		console.log('onSelect',index)
		if (props.showError) {
			return;
		}
		props.question.reply = index;
	}

</script>