questionbankvue3/pages/index/index.vue

<template>
	<view class="content">
		<up-navbar title="选择类型" @rightClick="rightClick" :autoBack="true"></up-navbar>
		<view class="tit">请选择需要学习的题库类型</view>
		<view class="ul">
			<view class="li" v-for="(item,index) in tabData" :key="index" @click="chooseCar(item)" :class="{active: item.id==currentCar.id}">
				<view class="checkBox" v-if="item.id==currentCar.id">
					<image src="@/static/images/dg.png" mode=""></image>
				</view>
				<view class="icon">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="name">{{item.title}}</view>
				<view class="carType" v-for="(item2,index2) in item.descriptionArr" :key="index2">{{ item2 }}</view>
			</view>
		</view>
		
		<view class="btnBox">
			<oneBtn text="确 定" @oneBtnClick="oneBtnClick"></oneBtn>
		</view>
	</view>
</template>

<script setup>
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()

	import {
		ref,
		reactive
	} from 'vue';
	import { loginApi, questbanktypeApi, } from '@/config/api.js'
	import {
		onLoad,
		onReady,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	
	const rightClick = () => {  
	    console.log('rightClick');  
	};  
	const tabData = ref([
		{name: '小车',  type: 'C1/C2/C3', style: 'width: 114rpx;height: 61rpx;', icon: new URL('@/static/images/car4.png', import.meta.url).href, id: '1'},
		{name: '货车',  type: 'A2/B2', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car2.png', import.meta.url).href, id: '1'},
		{name: '客车',  type: 'A1/B1/A3', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car1.png', import.meta.url).href, id: '1'},
		{name: '摩托车',  type: 'D/E/F', style: 'width: 102rpx;height: 73rpx;', icon: new URL('@/static/images/car3.png', import.meta.url).href, id: '1'},
	])
	const currentCar = ref('')
	function chooseCar(item) {
		currentCar.value = item
		usecarStore.setCar('carType', item.carType)
		usecarStore.setCar('carTypeName', item.title)
	}
	
	function oneBtnClick() {
		uni.navigateTo({
			url: '/pages/exercises/theoryStudy/theoryStudy'
		})
	}
	onLoad(async (option)=>{
		let phone = option.phone?option.phone:'18267103167'
		await loginFn(phone)
		questbanktypeFn()
	})
	// 请求登录
	async function loginFn(phone) {
		const res = await loginApi({
			"type": 1,
			"username": phone,
		})
		console.log(res)
		res.data.phone = phone
		uni.setStorageSync('loginInfo', res.data);
	}
	// 车型请求
	async function questbanktypeFn() {
		const {data: res} = await questbanktypeApi()
		let arr = res.map(item=>{
			item.descriptionArr = item.description.split(':')
			return item
		})
		tabData.value = arr
		currentCar.value = res[0]
	}
	
	onPullDownRefresh(()=>{
		questbanktypeFn().then(()=>{
			uni.stopPullDownRefresh()
		}).catch(()=>{
			uni.stopPullDownRefresh()
		})
	})
	
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.btnBox {
		position: fixed;
		bottom: 70rpx;
		left: 0;
		padding: 20px;
		width: 100%;
	}
	.content {
		width: 100%;
		padding-top: 100rpx;
		
	  up-navbar {
	
	  }
	
	  .tit {
		padding: 40rpx 20rpx;
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
	  }
	
	  .ul {
		  display: flex;
		  flex-wrap: wrap;
		  padding: 0 20px;
		  justify-content: space-between;
	    .li {
			width: 190rpx;
			// height: 190rpx;
			padding: 20rpx 0;
			border-radius: 10rpx;
			position: relative;
			display: flex;align-items: center;margin: 30rpx 0rpx 0 0 ;flex-direction: column;
			&.active {
				background: #EDF8FF;
			}
	      .checkBox {
			  position: absolute;
			  top: 0;
			  right: 0;
			  width: 36rpx;
			  height: 36rpx;
			  background: #4DBEFF;
			  border-radius: 0px 10rpx 0px 10rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
	        image {
				display: block;
				width: 32rpx;
				height: 23rpx;
	        }
	      }
	
	      .icon {
	        width: 106rpx;
			height: 68rpx;
	      }
	
	      .name {
			font-size: 28rpx;
			margin: 4rpx 0;
			
	      }
	
	      .carType {
			font-size: 24rpx;
			color: #ccc;
			padding: 4rpx;
	      }
	    }
	  }
	}
</style>