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

165 lines
2.9 KiB

<template>
<!-- <view>培训考核</view> -->
<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}`" :index="qIdx" :data="item"
v-model="item.value" :type="TYPE"></questionCard>
</view>
</view>
</view>
<view class="footer-btn buttom ">
<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
} 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,
numberWords: item.numberWords
}))
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 >= (item.numberWords || 0)
}
return true
}).length
// return list.value.filter(item => item.value?.length).length
})
const progress = computed(() => {
return Math.floor(answered.value / total.value * 100)
})
const toNext = async () => {
const data = []
list.value.forEach(n => {
data.push(addTrainAnswer({
userId: userId.value,
questionId: n.id,
answer : n.value,
}))
})
await Promise.all(data)
uni.navigateTo({
url: "/otherPages/authentication/examination/trainCompleted/index"
})
}
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: 99;
.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>