dati/components/question-answer/question-answer.vue

<template>
	<view class="questionBankAnswer-jiexi">
		<!--如果答对加class=dui-->
		<view class="questionBankAnswer-jiexi-daan"
			:class="[answer_type(timu_order-1) == 1  ? 'dui' : 'cuo',current_timu.type == 5 ? 'jianda' : '']">
			<view class="questionBankAnswer-jiexi-daan-flex">
				<view class="dui_jd_b">{{current_timu.type == 5 ? '参考答案' : '正确答案'}}</view>
				<view class="questionBankAnswer-jiexi-daan-flex-dui"
					v-if="current_timu.right_answer == 1 || current_timu.right_answer == 0">
					{{ current_timu.right_answer == 1 ? '对' : '错' }}
				</view>
				<view v-else-if="current_timu.type != 4" class="questionBankAnswer-jiexi-daan-flex-dui"
					:style="{'font-size':(current_timu.type > 3 ?'16px':'30px')}">
					<uc-parse :node="current_timu.right_answer"></uc-parse>
				</view>
				<view v-else-if="current_timu.type == 4" class="questionBankAnswer-jiexi-daan-flex-dui"
					:style="{'font-size':(current_timu.type > 3 ?'16px':'30px')}"
					v-html="current_timu.right_answer.split('|').join(',')">
				</view>
			</view>
			<view class="questionBankAnswer-jiexi-flex" v-if="myAnswer">
				<view v-if="current_timu.type != 5" class="questionBankAnswer-jiexi-daan-line"></view>
				<view class="questionBankAnswer-jiexi-daan-flex">
					<view>我的答案</view>
					<view style="word-break: break-all;"
						:class="[(copy_post_answer_right[current_timu.id] || answer_type(timu_order-1) == 1)?'questionBankAnswer-jiexi-daan-flex-dui':'questionBankAnswer-jiexi-daan-flex-cuo']"
						:style="{'font-size':(current_timu.type > 3 ?'16px':'30px')}">{{myAnswer}}
					</view>
				</view>
			</view>
		</view>
		<view class="questionBankAnswer-jiexi-jx" v-if="current_timu.area != '' && current_timu.area != null">
			<view class="questionBankAnswer-jiexi-jx-title">试题解析</view>
			<view>
				<uc-parse :node="current_timu.area"></uc-parse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			timu_order: {
				type: Number,
				default: 0
			},
			show_beiti: {
				type: Boolean,
				default: true,
			},
			current_timu: {
				type: Object,
				default: function() {
					return {}
				},
			},
			timu_list: {
				type: Array,
				default: function() {
					return [];
				},
			},
			copy_post_answer_right: {
				type: Object,
				default: function() {
					return {}
				},
			},
		},
		data() {
			return {
				myAnswer: ''
			}
		},

		methods: {
			//我的答案处的背景颜色
			answer_type(index) {
				if (this.show_beiti || this.timu_list[index].state == 2) {
					return 1
				}
				return 0
			},
			my_answer(copy_user_answer) {
				let answers = copy_user_answer[this.current_timu.id] || [];
				if (this.current_timu.type <= 3) {
					let answer = '';
					if (answers && answers.length > 0) {
						for (let i = 0, leng = answers.length; i < leng; i++) {
							if (answers[i].active) {
								answer += answers[i].answer_code
							}
						}
					}
					if (answer === '1') {
						answer = '对'
					} else if (answer === '0') {
						answer = '错'
					}
					this.myAnswer = answer
				} else {
					if (answers && answers.length == 0) {
						this.myAnswer = ''
						// || (this.current_timu.my_answer_arr || []).join(',')
					} else {
						this.myAnswer = answers.join(',')
					}
				}
			},
		}
	}
</script>

<style>
</style>