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"
							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 { usePageList } from "@/utils/pageList";

	import questionCard from '../components/questionCard.vue';

	const { list, getData } = usePageList()

	const restTimes = ref()

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

		list.value = [
			{
				title: '选择题',
				children: [
					{
						question: '猫咪每天在地上走路，时不时还会打滚，身上是很不干净的，最好每个星期洗次澡',
						options: [
							{
								label: '对',
								value: 0,
							},
							{
								label: '错',
								value: 1,
							},
						],
						answer: 0,
						value: 1,
					},
					{
						question: '当狗狗出现乱拉乱尿或者捣乱拆家等反映时，您会如何处理?',
						options: [
							{
								label: '暴力制止，根据情况是否严重来判断下手轻重，让狗狗知道这样做会受到惩罚',
								value: 0,
							},
							{
								label: '奖罚分明，制止后耐心引导，直到狗狗做出正确的行为，并立马给出奖励',
								value: 1,
							},
							{
								label: '狗狗也不是故意的，也不会造成什么很大的影响，默默打扫好就算了吧',
								value: 2,
							},
						],
						answer: 1,
						value: 2,
					},
					{
						question: '狗狗和猫咪一样是肉食性动物，最好可以纯肉喂养，对狗狗的身心健康有很大好处',
						options: [
							{
								label: '对',
								value: 0,
							},
							{
								label: '错',
								value: 1,
							},
						],
						answer: 1,
						value: 0,
					},
				]
			},
			{
				title: '主观题',
				children: [
					{
						question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
						reason: '字数低于700字，不予合格',
						value: '猫咪性格怕生,我耐心的与猫咪接触，和它玩耍 先建立良好的关系，再进行喂养。',
					},
					{
						question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
						reason: '字数低于700字，不予合格',
						value: '猫咪性格怕生,我耐心的与猫咪接触，和它玩耍 先建立良好的关系，再进行喂养。',
					},
					{
						question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
						reason: '字数低于700字，不予合格',
						value: '猫咪性格怕生,我耐心的与猫咪接触，和它玩耍 先建立良好的关系，再进行喂养。',
					},
				]
			}
		]
	})

	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>