questionbankvue3/pages/exercises/chapter/chapter.vue

<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, columnPid } 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
		}
		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>