dati/components/question-option/question-option.vue

<template>
	<view class="questionBankAnswer-content-menu" @tap="post_answer(item, index)" :class="{'active-bg': answerRightFlag, //// 用户答题完毕，正确答案显示，用户
		// 错误答案显示  !((copy_post_status[current_timu.id] || show_beiti) && item.right_flg)
		'kaoshi': question_type == 'exam',
		'error-bg':answerWrongFlag}">
		<!-- 用户选择错误答案显示特殊样式 -->
		<view class="questionBankAnswer-content-num" :class="{'active': answerRightFlag, //// 用户答题完毕，正确答案显示，用户
		// 错误答案显示
		'error':answerWrongFlag}">
			{{ item.answer_code === '1' ? 'A' : item.answer_code === '0' ? 'B' :
	        item.answer_code }}
			<!-- 考试不显示 -->
			<!-- 1、用户提交答案以后显示 -->
			<!-- 2、背题模式显示 -->
			<view class="questionBankAnswer-dui">
				<image v-if="answerRightFlag && question_type != 'exam'" :src="static_media.img01" class="questionBankAnswer-dui-img"></image>
				<!-- (copy_post_status[current_timu.id] || show_beiti) && item.right_flg -->
			</view>
		</view>
		<view class="questionBankAnswer-content-txt">
			<uc-parse :node="getAsw(item.answer)"></uc-parse>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			question_type: {
				type: String,
				default: 'test'
			},
			type: {
				type: String,
				default: '-1'
			},
			item: {
				type: Object,
				default: function() {
					return {}
				},
			},
			index: {
				type: Number,
				default: -1
			},
			show_beiti: {
				type: Boolean,
				default: true,
			},
			current_timu: {
				type: Object,
				default: function() {
					return {}
				},
			},
			copy_user_answer: {
				type: Object,
				default: function() {
					return {}
				},
			},
			copy_post_status: {
				type: Object,
				default: function() {
					return {}
				},
			},
			timu_index: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				answerRightFlag: false,
				answerWrongFlag: false,
			}
		},
		computed: {
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/dui.png',
				}
			},
		},
		created() {},
		methods: {
			getAsw(item) {
				item = item.replace(/^[A-Z]\./,'')
				
				return item
			},
			setAnswerStyle(copy_user_answer) {
				this.answerRightFlag = false
				this.answerWrongFlag = false
				this.computedError(this.index, copy_user_answer)
				this.computedActive(this.item, this.index, copy_user_answer)
			},
			//选项的错误状态
			computedError(index, copy_user_answer) {
				if (this.question_type == 'exam') {
					this.answerWrongFlag = false
					return
				} else if (copy_user_answer && copy_user_answer[this.current_timu.id] && copy_user_answer[this
						.current_timu.id][index]) {
					if (copy_user_answer[this.current_timu.id][index].error_flg && ((this.current_timu.type == 2 &&
							this.copy_post_status[this.current_timu.id]) || (this.current_timu.type == 1 || this
							.current_timu.type == 3))) {
						this.answerWrongFlag = true
						return
					}
					this.answerWrongFlag = false
					return
				}
				this.answerWrongFlag = false
			},
			//选项的正确状态
			computedActive(item, index, copy_user_answer) {
				if (this.question_type == 'exam') {
					if (copy_user_answer && copy_user_answer[this.current_timu.id] && copy_user_answer[this.current_timu
							.id][index].active) {
						this.answerRightFlag = true
						return
					} else {
						this.answerRightFlag = false
						return
					}
				} else if (this.show_beiti || this.copy_post_status[this.current_timu.id]) {
					//背题模式  或者答完之后的
					if (item.right_flg) {
						this.answerRightFlag = true
						return
					}
					this.answerRightFlag = false
					return
				} else if (copy_user_answer && copy_user_answer[this.current_timu.id] && copy_user_answer[
						this.current_timu.id][index].active) {
					//答题模式  答完之后的
					this.answerRightFlag = true
					return
				}
				this.answerRightFlag = false
			},
			// 提交答案
			post_answer(item, index) {
				let copy_user_answer_this = JSON.parse(JSON.stringify(this.copy_user_answer))
				// 如果背题模式，不做处理
				if (this.show_beiti) {
					return;
				}
				// 如果是判断和单选。执行以下处理
				if (this.current_timu.type == 1 || this.current_timu.type == 3) {
					this.$nextTick(() => {
						if (copy_user_answer_this[this.current_timu.id]) {
							for (let i = 0, leng = copy_user_answer_this[this.current_timu.id].length; i <
								leng; i++) {
								copy_user_answer_this[this.current_timu.id].splice(i, 1, {
									...copy_user_answer_this[this.current_timu.id][i],
									active: false,
									error_flg: false
								})
							}
							if (this.current_timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(
									item.answer_code.toString().toLowerCase().replace(/\s/g, '')) === -1) {
								copy_user_answer_this[this.current_timu.id].splice(index, 1, {
									...copy_user_answer_this[this.current_timu.id][index],
									active: true,
									error_flg: true
								})
							} else {
								copy_user_answer_this[this.current_timu.id].splice(index, 1, {
									...copy_user_answer_this[this.current_timu.id][index],
									active: true,
									error_flg: false
								})
							}
						}
						this.$emit('set_copy_user_answer', copy_user_answer_this)
						this.$emit('post_answer_req', true)
					});
				} else if (this.current_timu.type == 2) {
					// 如果是多选。执行以下处理
					if (copy_user_answer_this[this.current_timu.id]) {
						this.$emit('set_sub_button_style', 'is_duoxuan_sub', false)
						if (copy_user_answer_this[this.current_timu.id][index]) {
							if (copy_user_answer_this[this.current_timu.id][index].active) {
								copy_user_answer_this[this.current_timu.id].splice(index, 1, {
									...copy_user_answer_this[this.current_timu.id][index],
									active: false,
									error_flg: false
								})
							} else {
								if (this.current_timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(item
										.answer_code.toString().toLowerCase().replace(/\s/g, '')) === -1) {
									copy_user_answer_this[this.current_timu.id].splice(index, 1, {
										...copy_user_answer_this[this.current_timu.id][index],
										active: true,
										error_flg: true
									})
								} else {
									copy_user_answer_this[this.current_timu.id].splice(index, 1, {
										...copy_user_answer_this[this.current_timu.id][index],
										active: true,
										error_flg: false
									})
								}
							}
						}
					}
					this.$emit('set_copy_user_answer', copy_user_answer_this)
				}
			},
		}
	}
</script>