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>
					<questionCard 
						v-for="(question, index) in basicQuestions" 
						:key="`question-${index}`"
						:index="index"
						:data="prepareQuestionData(question)"
						mode="display"
						type="基本"
					/>
				</view>

				<!-- 培训题部分 - 后台审核不通过时显示 -->
				<view class="question-section" v-if="trainQuestions.length > 0 && baseSuccess">
					<view class="section-title">培训题</view>
					<questionCard 
						v-for="(question, index) in trainQuestions" 
						:key="`train-question-${index}`"
						:index="index"
						:data="prepareTrainQuestionData(question)"
						mode="display"
						type="培训"
					/>
				</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>

		<!-- 客服组件 -->
		<CustomerService />
	</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'
	import questionCard from '../components/questionCard.vue'

	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)

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

	// 填空题列表 (根据type字段判断)
	const trainQuestions = computed(() => {
		return questionList.value.filter(item => item.type === '培训')
	})

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

	const getExamData = () => {
		getAnswerBuildData(userInfo.value.userId).then(res => {
			detail.value = res
			questionList.value = res.answerList
			examNumber.value = res.examNumber || 0
			
			// 使用新的工具函数判断成功率，只考虑基本题目
			const basicQuestionsList = res.answerList.filter(item => item.type === '基本')
			baseSuccess.value = isSuccessPrecision(basicQuestionsList)
		})
	}

	// 准备基本题数据格式
	const prepareQuestionData = (question) => {
		return {
			id: question.id,
			title: question.title,
			typeAnswer: question.typeAnswer,
			options: question.answerList || [],
			userAnswerBaseList: question.userAnswerBaseList || [],
			// 添加调试信息
			rawQuestion: question
		}
	}

	// 准备培训题数据格式
	const prepareTrainQuestionData = (question) => {
		return {
			id: question.id,
			title: question.title,
			typeAnswer: question.typeAnswer,
			options: question.answerList || [], // 培训题可能也有选择题
			value: question.userAppletAnswerTrain?.answer || '',
			answer: question.answer || '',
			numberWords: question.numberWords || 0,
			userAnswerBaseList: question.userAnswerBaseList || [], // 培训选择题的答案
			// 添加调试信息
			rawQuestion: question
		}
	}

	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>