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.
295 lines
6.3 KiB
295 lines
6.3 KiB
<template>
|
|
<!-- <view>伴宠师认证</view> -->
|
|
<view class="page">
|
|
<view class="box">
|
|
<view class="content bg-fff">
|
|
<!-- 选择题部分 -->
|
|
<view class="question-section" v-if="basicQuestions.length > 0 && !baseSuccess">
|
|
<view class="section-title">选择题</view>
|
|
<view class="question__view display" v-for="(question, index) in basicQuestions" :key="index">
|
|
<view class="size-28 mb20 question">
|
|
{{ `${question.title}` }}
|
|
</view>
|
|
<view class="size-28 option" v-for="(option, oIdx) in question.answerList"
|
|
:key="`${index}-option-${oIdx}`"
|
|
:class="[
|
|
option.isTrue ? 'is-correct' : '',
|
|
isOptionSelected(question, option.id) && !option.isTrue ? 'is-error' : ''
|
|
]">
|
|
{{ option.title }}
|
|
<view class="icon icon-correct" v-if="option.isTrue">
|
|
<up-icon name="checkmark" color="#05C160" size="35rpx"></up-icon>
|
|
</view>
|
|
<view class="icon icon-error" v-if="isOptionSelected(question, option.id) && !option.isTrue">
|
|
<up-icon name="close" color="#FF2A2A" size="35rpx"></up-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 培训题部分 -->
|
|
<view class="question-section" v-if="trainQuestions.length > 0">
|
|
<view class="section-title">培训题</view>
|
|
<view class="question__view display" v-for="(question, index) in trainQuestions" :key="index">
|
|
<view class="size-28 mb20 question">
|
|
{{ `${question.title}` }}
|
|
</view>
|
|
<view class="textarea">
|
|
<view class="answer-content">{{ question.userAppletAnswerTrain?.answer || '未作答' }}</view>
|
|
<view class="highlight" v-if="question.answer">{{ question.answer }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="question-section" v-if="detail.reason">
|
|
<view class="section-title">驳回原因</view>
|
|
<view class="question__view display" style="color: #f60;font-size: 28rpx;">
|
|
{{ detail.reason }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer-btn flex-colc">
|
|
<view class="size-22 color-777 tips-rest" v-if="!baseSuccess">
|
|
<!-- todo -->
|
|
剩余考试机会：<text class="highlight">{{ restTimes - examNumber }}</text>次
|
|
</view>
|
|
<view class="btn" @click="onClick">
|
|
重新考试
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { getAnswerBuildData, retakeExam } from '@/api/examination'
|
|
import { useStore } from 'vuex'
|
|
import { isOptionSelected, isAnswerCorrect, isQuestionAnswered, isSuccessPrecision } from '@/utils/exam.js'
|
|
|
|
const store = useStore()
|
|
const questionList = ref([])
|
|
const detail = ref({})
|
|
const baseSuccess = ref(false)
|
|
|
|
const configList = computed(() => {
|
|
return store.getters.configList
|
|
})
|
|
const userInfo = computed(() => {
|
|
return store.state.user.userInfo
|
|
})
|
|
|
|
const restTimes = ref(0)
|
|
const examNumber = ref(0)
|
|
|
|
// 选择题列表
|
|
const basicQuestions = computed(() => {
|
|
return questionList.value.filter(item => item.type === '基本')
|
|
})
|
|
|
|
// 培训题列表
|
|
const trainQuestions = computed(() => {
|
|
return questionList.value.filter(item => item.type === '培训' && isQuestionAnswered(item))
|
|
})
|
|
|
|
onMounted(() => {
|
|
getExamData()
|
|
})
|
|
|
|
const getExamData = () => {
|
|
getAnswerBuildData(userInfo.value.userId).then(res => {
|
|
detail.value = res
|
|
questionList.value = res.answerList
|
|
examNumber.value = res.examNumber || 0
|
|
|
|
baseSuccess.value = isSuccessPrecision(res.answerList)
|
|
})
|
|
}
|
|
|
|
onShow(() => {
|
|
restTimes.value = parseInt(configList.value.pet_work_num.paramValueText || 0)
|
|
})
|
|
|
|
const onClick = () => {
|
|
retakeExam({
|
|
userId: userInfo.value.userId,
|
|
type : baseSuccess.value ? 1 : 0,//1清除培训考核的答案，0清除全部
|
|
}).then(res => {
|
|
|
|
if(baseSuccess.value){
|
|
uni.reLaunch({
|
|
url: "/otherPages/authentication/examination/baseCompleted"
|
|
})
|
|
}else{
|
|
uni.reLaunch({
|
|
url: "/otherPages/authentication/examination/start"
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$bar-height: 163rpx;
|
|
|
|
.page {
|
|
padding-bottom: $bar-height;
|
|
}
|
|
|
|
.box {
|
|
// background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
|
|
padding: 16rpx;
|
|
|
|
.step {
|
|
width: 720rpx;
|
|
height: 32rpx;
|
|
border-radius: 32rpx;
|
|
background-color: #D9D9D9;
|
|
|
|
.in {
|
|
width: 50%;
|
|
height: 32rpx;
|
|
background-color: #ffbf60;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
border-radius: 20rpx;
|
|
padding: 15rpx 20rpx;
|
|
|
|
.label {
|
|
width: 86rpx;
|
|
padding: 5rpx 15rpx;
|
|
color: #fff;
|
|
background-color: #FFBF60;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.group + .group {
|
|
margin-top: 68rpx;
|
|
}
|
|
|
|
.level {
|
|
display: flex;
|
|
}
|
|
|
|
.footer-btn {
|
|
height: $bar-height;
|
|
}
|
|
|
|
.tips {
|
|
&-rest {
|
|
color: #707070;
|
|
font-size: 22rpx;
|
|
margin: 9rpx 0 13rpx 0;
|
|
.highlight {
|
|
color: #FF8DC6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.question-section {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin: 30rpx 0;
|
|
padding-left: 20rpx;
|
|
border-left: 8rpx solid #FFBF60;
|
|
}
|
|
|
|
.question {
|
|
color: #000000;
|
|
}
|
|
|
|
.option {
|
|
background-color: #F3F3F3;
|
|
color: #707070;
|
|
line-height: 37rpx;
|
|
padding: 23rpx;
|
|
border-radius: 28rpx;
|
|
position: relative;
|
|
|
|
&+& {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.icon {
|
|
position: absolute;
|
|
right: 45rpx;
|
|
bottom: 23rpx;
|
|
display: none;
|
|
}
|
|
|
|
&.is-correct {
|
|
background-color: rgba($color: #05C160, $alpha: 0.08);
|
|
color: #05C160;
|
|
|
|
.icon-correct {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.is-error {
|
|
background-color: rgba($color: #FFEBCE, $alpha: 0.36);
|
|
color: #FF2A2A;
|
|
|
|
.icon-error {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.textarea {
|
|
background-color: #F3F3F3;
|
|
padding: 23rpx;
|
|
border-radius: 16rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.answer-content {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.highlight {
|
|
color: #FF2A2A;
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
padding-top: 20rpx;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.footer-btn {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: $bar-height;
|
|
background: #fff;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.btn {
|
|
width: 600rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #FFBF60;
|
|
color: #fff;
|
|
border-radius: 40rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
</style>
|