exam/exam-06173-uni/pages/paper/components/QuItemShow.vue

<template>

	<view v-if="quData && quData.id" class="qu-box" :class="{'sub-box': sub}">
		<view class="qu-item">
			<text class="sort">{{ quData.sort }}</text>
			<text>【{{ quData.quType_dictText }}】<text class="score"> {{ quData.score }}分</text></text>
			<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' || quData.quType==='5' " class="qu-answer">
		
			<view v-for="an in quData.answerList" class="item"
				:class="{'true':an.checked && an.isRight, 'wrong': an.checked && !an.isRight}">
				<view class="tag">{{ an.abc }}</view>
				<view class="content">
					<view>{{ an.content }}</view>
					<view v-if="an.image">
						<image :src="an.image" style="width:80vw" mode="aspectFit">
					</view>
				</view>
				<view class="right-box" v-if="an.isRight">
					<icon type="success" size="16" />
					<text>答案</text>
				</view>
			</view>
		</view>

		
		<!-- 组合题题干无 -->
		<view v-if="quData.quType!=='99'" class="as-box">
			
			
			<view class="rest-box" v-if="quData.isRight">
				<icon type="success" size="16" color="#09BB07" /> 
				<text class="text">
					答对了，得分：{{quData.actualScore}}
				</text>
				
			</view>
			
			<view class="rest-box" v-if="!quData.isRight">
				<icon type="warn" size="16" color="#FF0000" /> 
				<text class="text">
					答错了，得分：{{quData.actualScore}}
				</text>
			</view>
			
			
			<view v-if="quData.quType==='4'">
				<view>我的回答：</view>
				<view>
					<rich-text :nodes="quData.answer | formatRichText"></rich-text>
				</view>
				
			</view>
			
			<view v-if="quData.quType==='5'">
				<view>我的回答：</view>
				<view v-for="an in quData.answerList" v-if="an.answer">
					{{ an.answer }}
				</view>
			</view>
			
		</view>


		

	
		<view v-if="quData.quType==='99' && quData.subList.length>0">
			<view v-for="sub in quData.subList">
				<qu-item-show :value="sub" :sub="true"></qu-item-show>
			</view>
		</view>
		
		
		<view v-if="quData.analysis" class="as-box">
			<view class="title">试题解析：</view>
			<rich-text :nodes="quData.analysis | formatRichText"></rich-text>
		</view>
		
		
		<view class="split" v-if="!sub"></view>

	</view>



</template>

<script>
	import QuItemShow from './QuItemShow.vue'

	export default {
		name: 'QuItemShow',
		components:{
			QuItemShow
		},
		props: {
			value: {
				type: Object
			},
			sub: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				// 当前试题内容
				quData: {
					quType: '',
					answerList: []
				}

			}
		},

		watch: {

			// 检测查询变化
			value: {
				handler() {
					this.quData = this.value
				}
			}
		},

		created() {
			this.quData = this.value
		},

		methods: {


		}
	}
</script>