exam/exam-06173-uni - reg/pages/repo/components/TrainQuItem.vue

<template>


	<view v-if="quData" class="qu-box" :class="{'sub-box': sub}">

		<view class="qu-item">
			<view>
				<text class="num">{{ quData.sort || card.sort }}</text>
				<text >【{{ quData.quType_dictText }}】</text>
			</view>
			<view class="content">
				<rich-text :nodes="quData.content | formatRichText"></rich-text>
			</view>
		</view>


		<view v-if="quData.quType==='1' || quData.quType==='2' || quData.quType==='3' " class="qu-answer">
			<view v-for="item in quData.answerList" class="item" :class="{'active':item.checked}"
				@click="handleCheck(item)">
				<view class="tag">{{ item.abc }}</view>
				<view class="content">
					<view>{{ item.content }}</view>
					<view v-if="item.image">
						<img :src="item.image" style="width: 60vw" mode="widthFix">
					</view>
				</view>

				
				<view class="right-box" v-if="item.isRight && (cardItem.answered || mode==='13')">
					<icon type="success" size="16" />
					<text>答案</text>
				</view>
			</view>
		</view>


		<view v-if="quData.quType === '4'" class="as-box">
			<view>
				<rich-text v-if="quData.analysis" :nodes="quData.analysis | formatRichText"></rich-text>
				<view v-else>暂无试题解析！</view>
			</view>
			<view v-if="mode!=='13'" style="font-size: 22rpx; color: #FF0000;">请您详细阅读解析并点击下方的`确认答案`即可完成训练</view>
		</view>


		<!-- 填空题 -->
		<view v-if="quData.quType==='5' && mode!=='13'" class="qu-answer">
			<view v-for="item in quData.answerList" :key="item.id" class="item">
				<input v-model="item.answer" :disabled="cardItem.answered" />
			</view>
		</view>

		
		<!-- 组合题显示子级 -->
		<view v-if="quData.quType=== '99' && quData.subList.length > 0">
			<view v-for="(sub,index) in quData.subList" :key="sub.id">
				<train-qu-item v-model="quData.subList[index]" :sub="true" :card="cardItem" :mode="mode"></train-qu-item>
			</view>
		</view>

		<!-- 背题模式或已答都显示答案 -->
		<view v-if="(cardItem.answered || mode==='13') && quData.quType!=='4'" class="as-box">


			<view v-if="quData.quType==='5'">
				<view>试题解析：</view>
				<view v-for="item in quData.answerList">
					<view>{{ item.content }}</view>
				</view>
			</view>

			<view v-else>
				<view>试题解析：</view>
				<rich-text v-if="quData.analysis" :nodes="quData.analysis"></rich-text>
				<view v-else>此题暂无解析内容！</view>
			</view>

		</view>


		<view
			v-if="mode!=='13' && !cardItem.answered && !sub && (quData.quType==='2' || quData.quType==='4' || quData.quType==='5' || quData.quType==='99') ">
			<button type="warn" @click="checkAnswer">确认答案</button>
		</view>
	</view>

</template>

<script>
	import { fillResult } from '@/api/repo/train'
	import TrainQuItem from './TrainQuItem.vue'

	export default {

		name: 'TrainQuItem',
		components: {
			TrainQuItem
		},
		props: {
			value: {
				type: Object,
				default: () => ({})
			},
			card: {
				type: Object,
				default: () => ({})
			},
			mode: String,
			sub: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				// 是否已答
				tags: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
					'U', 'V', 'W', 'X', 'Y', 'Z'
				],


				cardItem: {},
				// 当前题目内容
				quData: {
					quType: '',
					answerList: []
				}

			}
		},

		watch: {

			card: {
				handler() {
					this.cardItem = this.card
				}
			},

			value: {
				handler() {
					this.quData = this.value
					this.initValues()
				}
			},
			quData: {
				handler(val) {
					this.$emit('input', val)
				},
				deep: true
			}
		},

		created() {
			this.cardItem = this.card
			this.quData = this.value
			this.initValues()
		},

		methods: {
			

			// 检查答案是否正确
			checkAnswer() {
				
				// 不提交子题目
				if (this.sub) {
					return
				}
				
				console.log('提交数据', this.quData)

				// 保存答案
				fillResult(this.quData).then(res => {
					// 回调
					this.$emit('rest', res)
				})
			},


			// 初始化填入值
			initValues() {
				const answers = this.quData.answerList

				for (let i = 0; i < answers.length; i++) {
					// 动态添加属性
					this.$set(answers[i], 'abc', this.tags[i])
				}

				// 无答案不填充
				if (!this.cardItem.answers) {
					return
				}
			},

			// 选定值
			handleCheck(item) {
				
				// 不允许重复回答
				if (this.cardItem.answered) {
					return
				}

				let auto = false

				// 单选题直接保答案
				if (this.quData.quType === '1' || this.quData.quType === '3') {
					// 自动提交
					auto = true
					// 互斥答案
					const answers = this.quData.answerList
					for (let i = 0; i < answers.length; i++) {
						answers[i].checked = false
					}
				}

				// 选中或取消
				item.checked = !item.checked

				if (auto) {
					this.checkAnswer()
				}
			}

		}
	}
</script>