questionbankvue3/pages/exercises/categoryExercises/categoryExercises.vue

<template>
	<view class="content padding">
		<view class="con" v-for="(item,index) in dataList" :key="index">
			<view class="h5">{{ item.name }}</view>
			<view class="ul">
				<view class="li" v-for="(item2,index) in item.pidList" :key="index" @click="goPage(item2)">
					<view class="icon">
						<image :src="item2.cover" mode=""></image>
					</view>
					<view class="text">{{ item2.name }}</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('knowType', item.param)
		uni.navigateTo({
			url: '/pages/exercises/brushQuestions/brushQuestions'
		})
	}
	
	
	 
	let dataList = ref([])
	async function columnFidFn() {
		dataList.value = []
		let obj = {
			type: '3',
			stepType: usecarStore.carInfo.stepType,
			carType: usecarStore.carInfo.carType
		}
		const {data: res} = await columnFid(obj)
		for(let i=0; i<res.length; i++) {
			res[i].pidList = await columnPidFn(res[i].id)
			dataList.value.push(res[i])
		}
		console.log(dataList.value)
	}
	
	columnFidFn()
	async function columnPidFn(pid) {
		const {data: res} = await columnPid(pid)
		return res
	}
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
	  .con {
		  padding: 50rpx 0 20rpx 0;
		  
	    .h5 {
			font-weight: bold;
			margin-bottom: 10rpx;
			font-size: 32rpx;
	    }
	
	    .ul {
			display: flex;
			flex-wrap: wrap;
	      .li {
			  width: 25%;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  padding: 30rpx 0;
	        .icon {
	          width: 68rpx;
	          height: 68rpx;
	          // box-shadow: 0px 2rpx 5rpx 0px rgba(239,143,76,0.5);
	          border-radius: 26rpx;
			  overflow: hidden;
	        }
	
	        .text {
				font-weight: 500;
				margin-top: 20rpx;
				font-size: 28rpx;
				white-space: nowrap;
	        }
	      }
	    }
	  }
	}
</style>