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

<template>
	<!-- <view>伴宠师认证</view> -->
	 <view class="page">
		<view class="box">
			<view class="content bg-fff">
				<view class="group" v-for="(group, gIdx) in list" :key="`group-${gIdx}`">
					<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
						{{ group.title }}
					</view>
					<view class="">
						<questionCard 
							v-for="(item, qIdx) in group.children" 
							:key="`${gIdx}-question-${qIdx}`"
							:index="qIdx"
							:data="item"
							:type="item.type"
							mode="display"
						></questionCard>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn flex-colc">
			<view class="size-22 color-777 tips-rest">
				<!-- todo -->
				剩余考试机会：<text class="highlight">{{ restTimes }}</text>次
			</view>
			<view class="btn" @click="onClick">
				重新考试
			</view>
		</view>
	</view>

</template>

<script setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getQuestionList, getQuestionOptions, answeBaseByQuestionId, answeTrainByQuestionId } from '@/api/examination'

	import questionCard from '../components/questionCard.vue';
	
	const list = ref([
		{
			title: '选择题',
			children: [],
		},
		{
			title: '主观题',
			children: [],
		},
	])

	const initList = async () => {
		try {
			
			let groups = [
				{ title: '选择题', children: [], },
				{ title: '主观题', children: [], },
			]
			
			let questions = await getQuestionList()

			for (let i = 0; i < questions.length; i++) {
				const { id, title, type } = questions[i]

				let data = { id, title, type }

				if (type === '基本') {
					const options = (await getQuestionOptions({ questionId: id })).map(item => ({ id: item.id, title: item.title}))
					data.options = options
					
					// todo: 替换成批量查询接口
					const { answer, answerId, isTrue } = await answeBaseByQuestionId({ questionId: id })

					if (isTrue) {
						continue
					}

					data.answer = answer.id
					data.value = answerId
					data.isTrue = isTrue

					groups[0].children.push(data)

				} else {

					// todo: 替换成批量查询接口
					const { answer, remark } = await answeTrainByQuestionId({ questionId: id })

					if (!remark) {
						continue
					}

					data.answer = remark
					data.value = answer

					groups[1].children.push(data)
				}
			}

			list.value = groups
			
			console.log('--list', list.value)
		} catch (err) {
			console.log('--initList--err', err)
		}
	}

	const restTimes = ref()

	onShow(() => {
		// todo: fetch
		restTimes.value = 3

		initList()
	})

	const onClick = () => {
		uni.reLaunch({
			url: "/otherPages/authentication/examination/start"
			// todo: check
			// url: "/otherPages/authentication/list/index"
    })
	}
</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;
			}
		}
	}
</style>