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

<template>
	<view class="page">
		<view class="bg"></view>

		<view class="content">

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

				<view class="content bg-fff">
					<view class="label size-22">
						选择题
					</view>
					<view class="">
						<view v-for="(item, qIdx) in list" :key="`question-${qIdx}`">
							<view class="size-28 mt32 mb20">
								{{ item.question }}
							</view>
							<view class="size-28 color-777 p20 daan"
								v-for="(option, oIdx) in item.options"
								:key="`${qIdx}-option-${oIdx}`"
							>
								{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-btn">
				<view class="btn">
					提交
				</view>
			</view>

		</view>
	</view>
</template>

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

const answerCount = ref(0)
const total = ref(0)


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

onShow(() => {
	// todo fetch
	answerCount.value = 30
	total.value = 100

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

	getData()
})

onReachBottom(() => {
	// todo: fetch more
	return
	getMore()
})

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

</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		& > .bg {
			width: 100%;
			height: 298rpx;
			background: linear-gradient(178deg,#ffbf60 2%, #ffbf60 5%, #f2f2f2 63%);
		}

		& > .content {
			position: absolute;
			top: 0;
			width: 100%;
		}
	}

	.active {
		color: #FFBF60;
		background-color: rgb(255, 241, 240);
	}

	.daan {
		background-color: #F3F3F3;
		border-radius: 50rpx;
	}

	.p20 {
		padding: 20px;
	}

	.box {
		padding: 16rpx;

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

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