security_study_h5/examination/question.vue

<template>
	<view class="pages">
		<view class="page-wrap">
			<text class="topic-type">{{answerResult.topicType|filterTopicType}}</text>
			<!-- 题目类型: 1-单选题 2-多选题 3-判断题 -->
			<view class="question-wrap">
				<view class="question">{{answerResult.content}}</view>
				<view class="choice u-flex" 
					:class="{
						selected:  answerResult.resultAnswer&&answerResult.resultAnswer.includes(choice.split(':')[0]),
						answer:answerResult.answer.includes(choice.split(':')[0])
					}"
					v-for="(choice,index) in answerResult.choiceList" :key="index">
					<view class="sort">
						{{choice.split(":")[0]}}
					</view>
					<view class="answer">
						{{choice.split(":")[1]}}
					</view>
					<view class="status"></view>
				</view>
			</view>
			<view class="answers u-flex u-row-between">
				<view class="">
					正确答案：
					<text class="answer">{{answerResult.answer}}</text> 
				</view>
				<view class="">
					已选答案：
					<text class="answer" style="color: #009AEF;">{{answerResult.resultAnswer||'没做'}}</text> 
				</view>
			</view>
			<view class="analysis">答案解析：{{answerResult.answerAnalysis}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paperScoreId:'',
				paperTopicId:'',
				answerResult:{}
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.paperScoreId = page.paperScoreId;
			this.paperTopicId = page.paperTopicId;
			this.findAnswerResult();
		},
		methods: {
			findAnswerResult(){
				this.$u.api.findAnswerResult({paperScoreId:this.paperScoreId,paperTopicId:this.paperTopicId}).then(res=>{
					this.answerResult = res.data;
					// console.log('findAnswerResult',res.data);
				}).catch(err=>{
					console.log('findAnswerResult',err);
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #F5F9FC;
	}
</style>
<style lang="scss" scoped>
.topic-type{
	background: rgba(0,154,239,0.2);
	border-radius: 8rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #009AEF;
	line-height: 36rpx;
	padding: 5rpx 14rpx;
}
.question-wrap{
	margin-top: 20rpx;
	margin-bottom: 38rpx;
	.question{
		font-size: 34rpx;
		font-weight: 600;
		line-height: 48rpx;
		margin-bottom: 40rpx;
	}
	.choice{
		padding: 36rpx 40rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		.sort{
			text-transform: uppercase;
			font-weight: 600;
		}
		.answer{
			padding-left: 18rpx;
			margin-left: 20rpx;
			border-left: 1px solid #ccc;
			flex: 1;
		}
		.status{
			width: 32rpx;
			height: 32rpx;
			background: #F5F9FC;
			border-radius: 50%;
		}
		&.selected{
			border: 1px solid #FFB100;
			.status{
				background-color: #FFB100;
			}
		}
		&.answer{
			border: 1px solid #009AEF;
			.status{
					background-color: #009AEF;

			}
		}
	}
}
.answers{
	font-size: 32rpx;
	font-weight: 400;
	color: #333333;
	line-height: 44rpx;
	margin-bottom: 22rpx;
	.answer{
		font-weight: 600;
		color: #333;
	}
}
.analysis{
	font-size: 30rpx;
	font-weight: 400;
	color: #999999;
	line-height: 52rpx;
}
</style>