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

<template>
	<view class="page">

		<view class="header">
			<view class="flex-rowl color-fff size-28 title">
				{{ `答题进度 ${answered}/${total}` }}
			</view>
			<up-line-progress class="progress" :percentage="progress" activeColor="#FFBF60" inactiveColor="#D9D9D9" height="16rpx" :showText="false"></up-line-progress>
		</view>

		<view class="box">
			<view class="content bg-fff">
				<view>
					<view class="label size-22">
						选择题
					</view>
				</view>
				<view class="">
					<questionCard 
						v-for="(item, qIdx) in list" 
						:key="`question-${qIdx}`"
						:index="qIdx"
						:data="item"
						v-model="item.value"
					></questionCard>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btn" @click="toNext">
				提交
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { usePageList } from "@/utils/pageList";

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

// todo
const { list, total, getData } = usePageList()

onShow(() => {
	// todo: delete test data

	total.value = 100

	list.value = [
		{
			question: '猫咪每天在地上走路，时不时还会打滚，身上是很不干净的，最好每个星期洗次澡',
			options: [
				{
					label: '对',
					value: 0,
				},
				{
					label: '错',
					value: 1,
				},
			],
			value: null,
		},
		{
			question: '当狗狗出现乱拉乱尿或者捣乱拆家等反映时，您会如何处理?',
			options: [
				{
					label: '暴力制止，根据情况是否严重来判断下手轻重，让狗狗知道这样做会受到惩罚',
					value: 0,
				},
				{
					label: '奖罚分明，制止后耐心引导，直到狗狗做出正确的行为，并立马给出奖励',
					value: 1,
				},
				{
					label: '狗狗也不是故意的，也不会造成什么很大的影响，默默打扫好就算了吧',
					value: 2,
				},
			],
			value: null,
		},
		{
			question: '狗狗和猫咪一样是肉食性动物，最好可以纯肉喂养，对狗狗的身心健康有很大好处',
			options: [
				{
					label: '对',
					value: 0,
				},
				{
					label: '错',
					value: 1,
				},
			],
			value: null,
		},
		{
			question: '猫咪每天在地上走路，时不时还会打滚，身上是很不干净的，最好每个星期洗次澡',
			options: [
				{
					label: '对',
					value: 0,
				},
				{
					label: '错',
					value: 1,
				},
			],
			value: null,
		},
		{
			question: '当狗狗出现乱拉乱尿或者捣乱拆家等反映时，您会如何处理?',
			options: [
				{
					label: '暴力制止，根据情况是否严重来判断下手轻重，让狗狗知道这样做会受到惩罚',
					value: 0,
				},
				{
					label: '奖罚分明，制止后耐心引导，直到狗狗做出正确的行为，并立马给出奖励',
					value: 1,
				},
				{
					label: '狗狗也不是故意的，也不会造成什么很大的影响，默默打扫好就算了吧',
					value: 2,
				},
			],
			value: null,
		},
		{
			question: '狗狗和猫咪一样是肉食性动物，最好可以纯肉喂养，对狗狗的身心健康有很大好处',
			options: [
				{
					label: '对',
					value: 0,
				},
				{
					label: '错',
					value: 1,
				},
			],
			value: null,
		},
	]

})

const answered = computed(() => {
	return list.value.filter(item => item.value !== null).length
})

const progress = computed(() => {
	return Math.floor(answered.value / total.value * 100)
})

const toNext = () => {
	uni.navigateTo({
		url: "/otherPages/authentication/examination/baseCompleted"
	})
}

</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 144rpx;
	}

	.header {
		padding: 0 36rpx;
		position: sticky;
		top: 0;
		background-image: linear-gradient(180deg, #FFBF60 0, #ffbf60 2%, #ffbf60 8%, #f2f2f2 90%);

		.progress {
			margin-top: 19rpx;
		}
	}

	.box {
		margin-top: 31rpx;
		padding: 16rpx;

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

			.label {
				display: inline-block;
				padding: 5rpx 15rpx;
				color: #fff;
				background-color: #FFBF60;
			}
		}
	}
</style>