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

<template>
	<!-- <view>培训考核</view> -->
	<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>
					<questionCard v-for="(item, qIdx) in list" :key="`question-${qIdx}`" :index="qIdx" :data="item"
						v-model="item.value" :type="TYPE"></questionCard>
				</view>
			</view>
		</view>
		<view class="footer-btn buttom ">
			<button plain class="btn" @click="toNext" :disabled="answered < total">
				提交
			</button>
		</view>
	</view>
</template>

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

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

	const TYPE = '培训'

	const list = ref([])
	const total = ref(0)

	const initQuestion = async () => {
		try {
			let questions = (await getQuestionList({
				type: TYPE
			})).map(item => ({
				id: item.id,
				title: item.title,
				value: null,
				numberWords: item.numberWords
			}))

			list.value = questions
			total.value = questions.length

		} catch (err) {

		}
	}

	const answered = computed(() => {

		return list.value.filter(item => {

			if (item.value == null) {
				return false
			}

			if (typeof item.value == 'string') {
				return item.value.length >= (item.numberWords || 0)
			}

			return true

		}).length

		// return list.value.filter(item => item.value?.length).length
	})

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

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

	onShow(() => {
		initQuestion()
	})
</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%);
		z-index: 99;

		.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>