You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
219 lines
4.7 KiB
219 lines
4.7 KiB
<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>
|
|
</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>
|