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.
100 lines
2.3 KiB
100 lines
2.3 KiB
<template>
|
|
<view class="content">
|
|
<view class="ul padding">
|
|
<view class="li" v-for="(item,index) in dataList" :key="index" @click="goPage(item)">
|
|
<view class="num" :style="{background: colorArr[index]}">{{index+1}}</view>
|
|
<view class="rightTxt">
|
|
<view class="h1">{{ item.name }}</view>
|
|
<view class="flex">
|
|
<view class="proccess">
|
|
<up-line-progress :percentage="item.percentage" height="8" activeColor="#3776FF" :showText="false"></up-line-progress>
|
|
</view>
|
|
<view class="rate">{{ item.already }}/ {{item.total}}</view>
|
|
<!-- <view class="rate">正确率 100%</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import carStore from '@/store/modules/car.js'
|
|
let usecarStore = carStore()
|
|
import { columnFid, } from '@/config/api.js'
|
|
function goPage(item) {
|
|
usecarStore.setCar('chapter', item.param)
|
|
uni.navigateTo({
|
|
url: '/pages/exercises/brushQuestions/brushQuestions'
|
|
})
|
|
}
|
|
let dataList = ref([])
|
|
async function columnFidFn() {
|
|
dataList.value = []
|
|
let obj = {
|
|
type: '4',
|
|
stepType: usecarStore.carInfo.stepType,
|
|
carType: usecarStore.carInfo.carType,
|
|
city: usecarStore.carInfo.city
|
|
}
|
|
const {data: res} = await columnFid(obj)
|
|
for(let i=0; i<res.length; i++) {
|
|
res[i].percentage = (res[i].total / res[i].already) * 100%
|
|
dataList.value.push(res[i])
|
|
}
|
|
console.log(dataList.value)
|
|
}
|
|
|
|
columnFidFn()
|
|
|
|
const colorArr = ['#3776FF', '#64C76C', '#8484FF', '#F05C1C', '#FDD650', '#6FD568', '#52C1D0']
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
.ul {
|
|
width: 100%;
|
|
.li {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 30rpx 0 0 0;
|
|
border-bottom: 1px solid #F4F4F4;
|
|
.num {
|
|
height: 34rpx;
|
|
width: 34rpx;
|
|
// padding: 10rpx 10rpx;
|
|
text-align: center;
|
|
background: #3776FF;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
line-height: 34rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
.h1 {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.rightTxt {
|
|
padding-left: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.flex {
|
|
.proccess {
|
|
margin-right: 20rpx;
|
|
width: 120rpx;
|
|
}
|
|
.rate {
|
|
font-size: 24rpx;
|
|
color: #CCCCCC;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|