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.
167 lines
3.2 KiB
167 lines
3.2 KiB
<template>
|
|
<view class="page">
|
|
<view class="bg"></view>
|
|
|
|
<view class="content">
|
|
|
|
<view class="box">
|
|
<view class="">
|
|
<view class="flex-rowc color-fff size-28">
|
|
{{ `答题进度 ${answerCount}/${total}` }}
|
|
</view>
|
|
<up-line-progress :percentage="progress" activeColor="FFBF60" inactiveColor="#D9D9D9" height="16rpx" :showText="false"></up-line-progress>
|
|
</view>
|
|
|
|
<view class="content bg-fff">
|
|
<view class="label size-22">
|
|
选择题
|
|
</view>
|
|
<view class="">
|
|
<view v-for="(item, qIdx) in list" :key="`question-${qIdx}`">
|
|
<view class="size-28 mt32 mb20">
|
|
{{ item.question }}
|
|
</view>
|
|
<view class="size-28 color-777 p20 daan"
|
|
v-for="(option, oIdx) in item.options"
|
|
:key="`${qIdx}-option-${oIdx}`"
|
|
>
|
|
{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer-btn">
|
|
<view class="btn">
|
|
提交
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onShow, onReachBottom } from '@dcloudio/uni-app'
|
|
import { usePageList } from "@/utils/pageList";
|
|
|
|
const answerCount = ref(0)
|
|
const total = ref(0)
|
|
|
|
|
|
// todo
|
|
const { list, getData, getMore } = usePageList()
|
|
|
|
onShow(() => {
|
|
// todo fetch
|
|
answerCount.value = 30
|
|
total.value = 100
|
|
|
|
list.value = [
|
|
{
|
|
question: '猫咪每天在地上走路，时不时还会打滚，身上是很不干净的，最好每个星期洗次澡',
|
|
options: [
|
|
{
|
|
label: '对',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '错',
|
|
value: 1,
|
|
},
|
|
]
|
|
},
|
|
{
|
|
question: '当狗狗出现乱拉乱尿或者捣乱拆家等反映时，您会如何处理?',
|
|
options: [
|
|
{
|
|
label: '暴力制止，根据情况是否严重来判断下手轻重，让狗狗知道这样做会受到惩罚',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '奖罚分明，制止后耐心引导，直到狗狗做出正确的行为，并立马给出奖励',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '狗狗也不是故意的，也不会造成什么很大的影响，默默打扫好就算了吧',
|
|
value: 2,
|
|
},
|
|
]
|
|
},
|
|
{
|
|
question: '3、狗狗和猫咪一样是肉食性动物，最好可以纯肉喂养，对狗狗的身心健康有很大好处',
|
|
options: [
|
|
{
|
|
label: '对',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '错',
|
|
value: 1,
|
|
},
|
|
]
|
|
},
|
|
]
|
|
return
|
|
|
|
getData()
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
// todo: fetch more
|
|
return
|
|
getMore()
|
|
})
|
|
|
|
const progress = computed(() => {
|
|
return Math.floor(answerCount.value / total.value)
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
width: 100vw;
|
|
& > .bg {
|
|
width: 100%;
|
|
height: 298rpx;
|
|
background: linear-gradient(178deg,#ffbf60 2%, #ffbf60 5%, #f2f2f2 63%);
|
|
}
|
|
|
|
& > .content {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: #FFBF60;
|
|
background-color: rgb(255, 241, 240);
|
|
}
|
|
|
|
.daan {
|
|
background-color: #F3F3F3;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.p20 {
|
|
padding: 20px;
|
|
}
|
|
|
|
.box {
|
|
padding: 16rpx;
|
|
|
|
.content {
|
|
border-radius: 20rpx;
|
|
padding: 15rpx 20rpx;
|
|
|
|
.label {
|
|
padding: 5rpx 15rpx;
|
|
color: #fff;
|
|
background-color: #FFBF60;
|
|
}
|
|
}
|
|
}
|
|
</style>
|