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

<template>
	<view class="po-r">
		<image class="bg" src="" mode=""></image>
		<view class="po-a content w-100">
			<view class="top bg-fff">
				<view class="com-title size-32 fw700 flex-rowl">
					您选择的宠物类型
				</view>
				<view>
                    <image class="mt32" 
                    style="margin-right: 10rpx;"
                    v-for="(img, inde) in petTypeImg"
                    :src="img.image" mode="widthFix"></image>
                </view>
			</view>

			<view class="text po-r bg-fff">
				<up-parse class="size-28" :content="configList.pet_raising_details.paramValueArea"></up-parse>
				<view class="po-a flex-rowl tips">
					<image class="ml16" src="@/static/images/ydd/icon1.png" mode="widthFix"></image>
					<text class="size-28 ml16">养宠考试说明</text>
				</view>
			</view>

			<view class="text po-r bg-fff mb150">
				<up-parse class="size-28" :content="configList.pet_attention_details.paramValueArea"></up-parse>
				<view class="po-a flex-rowl tips">
					<image class="ml16" src="@/static/images/ydd/icon2.png" mode="widthFix"></image>
					<text class="size-28 ml16">考试注意事项</text>
				</view>
			</view>

		</view>
		<view class="footer-btn flex-colc">
			<view class="size-22 color-777 tips-rest">
				<template v-if="canTakeExam">
					剩余考试机会：<text class="highlight">{{ restTimes - examNumber }}</text>次
				</template>
				<template v-else>
					<text class="next-exam-time">下次考试时间：{{ nextExamTime }}</text>
				</template>
			</view>
			<view class="btn" :class="{ 'btn-disabled': !canTakeExam }" @click="toNext">
				{{ canTakeExam ? '开始考试' : '暂无考试机会' }}
			</view>
		</view>

		<!-- 客服组件 -->
		<CustomerService />
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { useStore } from 'vuex'
	import { onLoad } from '@dcloudio/uni-app'
	import { insertUser, udpateUser, getUserOne } from '@/api/userTeacher'
	import dayjs from 'dayjs'
	
	const store = useStore()

	const petType = ref([])
	const restTimes = ref()
	const lastExamTime = ref('')
	
	//已考试次数
	const examNumber = ref(0)

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

	// 计算下次考试时间
	const nextExamTime = computed(() => {
		if (!lastExamTime.value) return ''
		const nextTime = dayjs(lastExamTime.value).add(1, 'year')
		return nextTime.format('YYYY年MM月DD日')
	})

	// 判断是否可以参加考试
	const canTakeExam = computed(() => {
		
		if((restTimes.value - examNumber.value) > 0){
			return true
		}
		
		if (!lastExamTime.value) return true
		const nextTime = dayjs(lastExamTime.value).add(1, 'year')
		return dayjs().isAfter(nextTime)
	})
	
	const getInfo = async () => {
		try {
			if(!userId.value) {
				return
			}
			
			const data = await getUserOne(userId.value)
			
			examNumber.value = data.examNumber || 0
			lastExamTime.value = data.examTime
			
			petType.value = data.petType.split(',').map(n => parseInt(n))
			
		} catch (err) {
			console.log('--err', err)
		}
	}
	
	const petTypeImg = computed(() => {
		return store.getters.petTypeOptions.
        filter(item => petType.value.includes(item.id))
	})
	
	onLoad((option) => {
		store.dispatch('fetchPetTypeOptions')
		getInfo()
		restTimes.value = parseInt(configList.value.pet_work_num.paramValueText || 0)
	})

	const toNext = () => {
		if (!canTakeExam.value) {
			uni.showToast({
				title: `请于${nextExamTime.value}后再来考试`,
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: "/otherPages/authentication/examination/base"
		})
	}
</script>

<style lang="scss" scoped>
	.mb150 {
		margin-bottom: 150rpx;
	}

	.text {
		padding: 50rpx 37rpx;
		border-radius: 20rpx;
		margin-top: 43px;
	}

	.tips {
		width: 302rpx;
		height: 67rpx;
		background-color: #FFEBCE;
		top: -28rpx;
		left: 20rpx;
		border-radius: 0 90rpx 0 0;

		image {
			width: 40rpx;
		}
	}

	.content {
		padding: 16rpx;
		width: 718rpx;
		left: 0;
		top: 0;
	}

	.bg {
		width: 750rpx;
		height: 432px;
		background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
	}

	.top {
		padding: 46rpx 17rpx 17rpx;
		margin: 16rpx;
		border-radius: 20rpx;

		image {
			width: 198rpx;
			height: 228rpx;
		}
	}

	.tips {
		&-rest {
			color: #707070;
			font-size: 22rpx;
			margin: 9rpx 0 13rpx 0;
			.highlight {
				color: #FF8DC6;
			}
		}
	}

	.next-exam-time {
		color: #FF2A2A;
	}

	.footer-btn {
		height: 163rpx;
		box-sizing: border-box;
		padding-bottom: 18rpx;
	}

	.btn {
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FFBF60;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;

		&-disabled {
			background: #CCCCCC;
			color: #FFFFFF;
		}
	}
</style>