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.
 
 
 

98 lines
2.0 KiB

<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>