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.
135 lines
3.8 KiB
135 lines
3.8 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 class="">
|
|
<questionCard
|
|
v-for="(item, qIdx) in list"
|
|
:key="`question-${qIdx}`"
|
|
:index="qIdx"
|
|
:data="item"
|
|
v-model="item.value"
|
|
></questionCard>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer-btn buttom ">
|
|
<view class="btn" @click="toNext">
|
|
提交
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { usePageList } from "@/utils/pageList";
|
|
|
|
import questionCard from '../components/questionCard.vue';
|
|
|
|
// todo
|
|
const { list, total, getData } = usePageList()
|
|
|
|
onShow(() => {
|
|
// todo: delete test data
|
|
|
|
total.value = 100
|
|
|
|
list.value = [
|
|
{
|
|
question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
|
|
value: null,
|
|
},
|
|
{
|
|
question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
|
|
value: null,
|
|
},
|
|
{
|
|
question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
|
|
value: null,
|
|
},
|
|
{
|
|
question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
|
|
value: null,
|
|
},
|
|
{
|
|
question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
|
|
value: null,
|
|
},
|
|
{
|
|
question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
|
|
value: null,
|
|
},
|
|
{
|
|
question: '喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格活泼，请问您会如何进行服务?请详细描述和上一题服务过程的不同之处(若服务宠物不包含猫咪可回答“略”)',
|
|
value: null,
|
|
},
|
|
]
|
|
|
|
})
|
|
|
|
const answered = computed(() => {
|
|
return list.value.filter(item => item.value?.length).length
|
|
})
|
|
|
|
const progress = computed(() => {
|
|
return Math.floor(answered.value / total.value * 100)
|
|
})
|
|
|
|
const toNext = () => {
|
|
uni.navigateTo({
|
|
url: "/otherPages/authentication/examination/trainCompleted/index"
|
|
})
|
|
}
|
|
|
|
</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%);
|
|
|
|
.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>
|