uniProject/components/questionsChengji/tiankong.vue

<template>
	<view v-if="question" class="phone-tiankong-box">
		<view class="phone-shiti-question">
			<view class="question-num">{{question.onlyNum}}、</view>
			<!-- 题干区域 -->
			<rich-text :nodes="question.name"></rich-text>
		</view>
		<!-- 选项区域 -->
		<view v-for="(item,index) in question.reply" class="tiankong-option-box" :key="index"
			:class="formatClass(index)">
			<text class="option-question">填空{{index+1}}:</text>
			<input type="text" v-model="question.reply[index]" class="option-question-text"
				:placeholder="`请输入填空${index+1}答案`">
		</view>

		<view class="phone-question-answer-box">
			<view>正确答案：
				<view class="green-color" v-for="(item,index) in data.result">{{`填空${index+1}`}} :{{item}}</view>
			</view>
			<view>您的答案：
				<view class="orange-color" v-for="(item,index) in data.reply"> {{`填空${index+1}`}}:{{item}}</view>
			</view>
			<view class="btdf-row">本题得分：<text>{{data.score}}</text>分</view>
			<view class="dajx-row">答案解析:
				<rich-text :nodes="data.answer"></rich-text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	const data = reactive({
		name: '', //题干数据
		score: '',
		result: '',
		reply: '',
		answer: '',
		contents: [], // 选项数据
	})

	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		}
	})

	watch(() => props.question, (val) => formatData(val), {
		immediate: true
	})

	function formatData(val) {
		data.reply = val.reply || [];
		data.result = val.result || [];
		data.answer = val.answer;
	
	}
	function formatClass(index) {
		if (props.showError) {
			return {
				active_right: props.question.result[index].some(item => item == props.question.reply[index] ? props
					.question.reply[index].trim() : ''),
				showError: !props.question.result[index].some(item => item == props.question.reply[index] ? props.question
					.reply[index].trim() : '')
			}
		}
	}
</script>