pet-front/otherPages/authentication/examination/errorDetail.vue

<template>
	<!-- <view>伴宠师认证</view> -->
	 <view class="page">
		<view class="box">
			<view class="content bg-fff">
				<!-- 选择题部分 -->
				<view class="question-section" v-if="basicQuestions.length > 0 && !baseSuccess">
					<view class="section-title">选择题</view>
					<view class="question__view display" v-for="(question, index) in basicQuestions" :key="index">
						<view class="size-28 mb20 question">
							{{ `${question.title}` }}
						</view>
						<view class="size-28 option" v-for="(option, oIdx) in question.answerList"
							:key="`${index}-option-${oIdx}`" 
							:class="[
								option.isTrue ? 'is-correct' : '',
								isOptionSelected(question, option.id) && !option.isTrue ? 'is-error' : ''
							]">
							{{ option.title }}
							<view class="icon icon-correct" v-if="option.isTrue">
								<up-icon name="checkmark" color="#05C160" size="35rpx"></up-icon>
							</view>
							<view class="icon icon-error" v-if="isOptionSelected(question, option.id) && !option.isTrue">
								<up-icon name="close" color="#FF2A2A" size="35rpx"></up-icon>
							</view>
						</view>
					</view>
				</view>

				<!-- 培训题部分 -->
				<view class="question-section" v-if="trainQuestions.length > 0">
					<view class="section-title">培训题</view>
					<view class="question__view display" v-for="(question, index) in trainQuestions" :key="index">
						<view class="size-28 mb20 question">
							{{ `${question.title}` }}
						</view>
						<view class="textarea">
							<view class="answer-content">{{ question.userAppletAnswerTrain?.answer || '未作答' }}</view>
							<view class="highlight" v-if="question.answer">{{ question.answer }}</view>
						</view>
					</view>
				</view>
				
				<view class="question-section" v-if="detail.reason">
					<view class="section-title">驳回原因</view>
					<view class="question__view display" style="color: #f60;font-size: 28rpx;">
						{{ detail.reason }}
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn flex-colc">
			<view class="size-22 color-777 tips-rest" v-if="!baseSuccess">
				<!-- todo -->
				剩余考试机会：<text class="highlight">{{ restTimes - examNumber }}</text>次
			</view>
			<view class="btn" @click="onClick">
				重新考试
			</view>
		</view>
	</view>

</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getAnswerBuildData, retakeExam } from '@/api/examination'
	import { useStore } from 'vuex'
	import { isOptionSelected, isAnswerCorrect, isQuestionAnswered, isSuccessPrecision } from '@/utils/exam.js'

	const store = useStore()
	const questionList = ref([])
	const detail = ref({})
	const baseSuccess = ref(false)

	const configList = computed(() => {
		return store.getters.configList
	})
	const userInfo = computed(() => {
		return store.state.user.userInfo
	})
	
	const restTimes = ref(0)
	const examNumber = ref(0)

	// 选择题列表
	const basicQuestions = computed(() => {
		return questionList.value.filter(item => item.type === '基本')
	})

	// 培训题列表
	const trainQuestions = computed(() => {
		return questionList.value.filter(item => item.type === '培训' && isQuestionAnswered(item))
	})

	onMounted(() => {
		getExamData()
	})

	const getExamData = () => {
		getAnswerBuildData(userInfo.value.userId).then(res => {
			detail.value = res
			questionList.value = res.answerList
			examNumber.value = res.examNumber || 0
			
			baseSuccess.value = isSuccessPrecision(res.answerList)
		})
	}

	onShow(() => {
		restTimes.value = parseInt(configList.value.pet_work_num.paramValueText || 0)
	})

	const onClick = () => {
		retakeExam({
			userId: userInfo.value.userId,
			type : baseSuccess.value ? 1 : 0,//1清除培训考核的答案，0清除全部
		}).then(res => {
			
			if(baseSuccess.value){
				uni.reLaunch({
					url: "/otherPages/authentication/examination/baseCompleted"
				})
			}else{
				uni.reLaunch({
					url: "/otherPages/authentication/examination/start"
				})
			}
			
		})
	}

</script>

<style lang="scss" scoped>
	$bar-height: 163rpx;

	.page {
		padding-bottom: $bar-height;
	}

	.box {
		// background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
		padding: 16rpx;

		.step {
			width: 720rpx;
			height: 32rpx;
			border-radius: 32rpx;
			background-color: #D9D9D9;

			.in {
				width: 50%;
				height: 32rpx;
				background-color: #ffbf60;
				border-radius: 32rpx;
			}
		}
	}

	.content {
		border-radius: 20rpx;
		padding: 15rpx 20rpx;

		.label {
			width: 86rpx;
			padding: 5rpx 15rpx;
			color: #fff;
			background-color: #FFBF60;
			justify-content: center;
		}
	}

	.group + .group {
		margin-top: 68rpx;
	}

	.level {
		display: flex;
	}

	.footer-btn {
		height: $bar-height;
	}
	
	.tips {
		&-rest {
			color: #707070;
			font-size: 22rpx;
			margin: 9rpx 0 13rpx 0;
			.highlight {
				color: #FF8DC6;
			}
		}
	}

	.question-section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin: 30rpx 0;
		padding-left: 20rpx;
		border-left: 8rpx solid #FFBF60;
	}

	.question {
		color: #000000;
	}

	.option {
		background-color: #F3F3F3;
		color: #707070;
		line-height: 37rpx;
		padding: 23rpx;
		border-radius: 28rpx;
		position: relative;

		&+& {
			margin-top: 20rpx;
		}

		.icon {
			position: absolute;
			right: 45rpx;
			bottom: 23rpx;
			display: none;
		}

		&.is-correct {
			background-color: rgba($color: #05C160, $alpha: 0.08);
			color: #05C160;

			.icon-correct {
				display: block;
			}
		}

		&.is-error {
			background-color: rgba($color: #FFEBCE, $alpha: 0.36);
			color: #FF2A2A;

			.icon-error {
				display: block;
			}
		}
	}

	.textarea {
		background-color: #F3F3F3;
		padding: 23rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;

		.answer-content {
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
			margin-bottom: 20rpx;
		}

		.highlight {
			color: #FF2A2A;
			font-size: 28rpx;
			line-height: 1.6;
			padding-top: 20rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
		}
	}

	.footer-btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: $bar-height;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.btn {
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FFBF60;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
	}
</style>