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 >
					<questionCard 
						v-for="(item, qIdx) in list" 
						:key="`question-${qIdx}`"
						v-model="item.value"
						:index="qIdx"
						:data="item"
						:type="TYPE"
					></questionCard>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<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, getQuestionOptions } from '@/api/examination'
	import {
		addBaseAnswer,
		addTrainAnswer
	} from '@/api/examination'
	import {
		store
	} from '@/store'

	const userId = computed(() => {
		return store.state.user.userInfo.userId
	})

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, 
			answerList : item.answerList,
		}))

		// todo: 替换成批量查询接口
		for (let i = 0; i < questions.length; i++) {
			// const options = (await getQuestionOptions({ questionId: questions[i].id })).map(item => ({ id: item.id, title: item.title}))

			// questions[i].options = options
			
			questions[i].options = questions[i].answerList
			
		}

		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 >= 700
		// }
		
		return true
		
	}).length
})

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

const toNext = async () => {
	
	const data = []
	
	uni.showLoading({
		title: '提交中...'
	})
	
	list.value.forEach(n => {
		data.push(addBaseAnswer({
			userId: userId.value,
			questionId: n.id,
			answerId : n.value,
		}))
	})
	
	await Promise.all(data)
	
	uni.hideLoading()
	
	// list.value.forEach(n => {
	// 	data.push({
	// 		userId: userId.value,
	// 		questionId: n.id,
	// 		answerId : n.value,
	// 	})
	// })
	
	// await addBaseAnswer({
	// 	list : JSON.stringify(data)
	// })
	
	uni.navigateTo({
		url: "/otherPages/authentication/examination/baseCompleted"
	})
}

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: 999;
		.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>