uniProject/components/questionsChengji/panduan.vue

<template>
	<view class="phone-panduan-box">
		<view class="phone-shiti-question">
			<view class="question-num">{{question.onlyNum}}、</view>
			<!-- 题干区域 -->
			<rich-text :nodes="question.name"></rich-text>
		</view>
		<!-- 选项区域 -->
		<radio-group @change="radioChange" class="panduan-option-box">
			<label class="option-question" :class="formatClass('1')">
				<radio value="1" :disabled="showError" :checked="question.reply == '1'"/>
				<view>正确</view>
			</label>
			<label class="option-question" :class="formatClass('0')"> 
				<radio value="0" :disabled="showError" :checked="question.reply == '0'"/>
				<view>错误</view>
			</label>
		</radio-group>
		
		<view class="phone-question-answer-box">
			<view class="phone-line-title">答案解析</view>
			<view class="btdf-row">本题得分：<text>{{data.score}}</text>分</view>
			<view class="zqda-row">正确答案：<text>{{data.result}}</text></view>
			<view class="ndda-row">您的答案：<text>{{data.reply}}</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 props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		}
	})
	const data = reactive({
		name: '', //题干数据
		score: '',
		result: '', 
		reply: '', 
		answer: '', 
	})
	watch(() => props.question, (val) => formatData(val), {
		immediate: true
	})
	
	function formatData(val) {
		
		console.log('val',val);
		
		if (val) {
			data.name = val.name;
			if (val.reply === '') {
				data.reply = '未答'
			} else if (val.reply == 0) {
				data.reply = '错误'
			} else if (val.reply == 1) {
				data.reply = '正确'
			}
			if (val.result == 0) {
				data.result = '错误'
			} else if (val.result == 1) {
				data.result = '正确'
			}
			data.answer = val.answer;
			data.score = val.score;
		
		}
	}
	function radioChange(e) {                                                                                                                              
		if (props.showError) {
			return;
		}
		props.question.reply = e.detail.value;
	}
	
	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
			}
		}
	}
</script>