猫妈狗爸伴宠师小程序前端代码
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.
 
 
 
 

318 lines
6.7 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>
<questionCard
v-for="(question, index) in basicQuestions"
:key="`question-${index}`"
:index="index"
:data="prepareQuestionData(question)"
mode="display"
type="基本"
/>
</view>
<!-- 培训题部分 - 后台审核不通过时显示 -->
<view class="question-section" v-if="trainQuestions.length > 0 && baseSuccess">
<view class="section-title">培训题</view>
<questionCard
v-for="(question, index) in trainQuestions"
:key="`train-question-${index}`"
:index="index"
:data="prepareTrainQuestionData(question)"
mode="display"
type="培训"
/>
</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>
<!-- 客服组件 -->
<CustomerService />
</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'
import questionCard from '../components/questionCard.vue'
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)
// 选择题列表 (根据type字段判断)
const basicQuestions = computed(() => {
return questionList.value.filter(item => item.type === '基本')
})
// 填空题列表 (根据type字段判断)
const trainQuestions = computed(() => {
return questionList.value.filter(item => item.type === '培训')
})
onMounted(() => {
getExamData()
})
const getExamData = () => {
getAnswerBuildData(userInfo.value.userId).then(res => {
detail.value = res
questionList.value = res.answerList
examNumber.value = res.examNumber || 0
// 使用新的工具函数判断成功率,只考虑基本题目
const basicQuestionsList = res.answerList.filter(item => item.type === '基本')
baseSuccess.value = isSuccessPrecision(basicQuestionsList)
})
}
// 准备基本题数据格式
const prepareQuestionData = (question) => {
return {
id: question.id,
title: question.title,
typeAnswer: question.typeAnswer,
options: question.answerList || [],
userAnswerBaseList: question.userAnswerBaseList || [],
// 添加调试信息
rawQuestion: question
}
}
// 准备培训题数据格式
const prepareTrainQuestionData = (question) => {
return {
id: question.id,
title: question.title,
typeAnswer: question.typeAnswer,
options: question.answerList || [], // 培训题可能也有选择题
value: question.userAppletAnswerTrain?.answer || '',
answer: question.answer || '',
numberWords: question.numberWords || 0,
userAnswerBaseList: question.userAnswerBaseList || [], // 培训选择题的答案
// 添加调试信息
rawQuestion: question
}
}
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>