jpcj-h5/src/views/home/children/test/index.vue

<template>
	<!-- 用户信息展示 -->
	<userData />
	<!-- 轮播图 -->
	<swiper />
	<!-- 用户做题预选界面 -->
	<van-tabs class="car-type" line-width="0" animated ref="carTypeRef" @click="carTypeChange">
		<van-tab v-for="(carTypeItem, index) in carTypeList" :key="index" :name="carTypeItem.name">
			<template #title>
				<div class="car-choose">
					<m-icon :type="carTypeItem.icon" class="img" />
					<span>{{ carTypeItem.cert }}</span>
					<span>{{ carTypeItem.name }}</span>
				</div>
			</template>
			<van-tabs class="test-type" animated>
				<van-tab :title="sujectItem.name" v-for="(sujectItem, index) in carTypeItem.sujectList" :key="index" :name="sujectItem.name">
					<component :is="sujectOne" :query="{ ...carTypeItem.query, ...sujectItem.query }"></component>
				</van-tab>
			</van-tabs>
		</van-tab>
	</van-tabs>
</template>

<script lang="ts" setup>
import sujectOne from "./components/sujectOne.vue";
import userData from "./components/userData.vue";
import swiper from "./components/swiper.vue";
import { ref, nextTick, onBeforeMount } from "vue";
import { useLogin, useUpdateUserInfo } from "@/hooks";
import { useStore } from "vuex";
import { Toast } from "vant";
import { useRouter } from "vue-router";
const store = useStore();
const carTypeRef = ref<any>(null);

nextTick(() => {
	carTypeRef.value.scrollTo(store.state.carType);
});

const carTypeChange = (e: string) => {
	store.commit("setCatType", e);
};
onBeforeMount(() => {
	// const router = useRouter();
	// console.log(router.currentRoute.value);
});
const carTypeList = ref([
	{
		name: "轿车",
		cert: "C1/C2/C3",
		icon: "jiaoche",
		query: { liceCar: 1 },
		sujectList: [
			{
				name: "科目一",
				query: {
					name: "科目一",
					cert: "C1/C2/C3",
					vehicle: "小车",
					subject: 1,
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "C1/C2/C3",
					vehicle: "小车",
					subject: 4,
				},
			},
		],
	},
	{
		name: "客车",
		cert: "A1/A3/B1",
		icon: "keche",
		query: { liceBus: 1 },
		sujectList: [
			{
				name: "科目一",
				query: {
					name: "科目一",
					cert: "A1/A3/B1",
					vehicle: "客车",
					subject: 1,
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "A1/A3/B1",
					vehicle: "客车",
					subject: 4,
				},
			},
		],
	},
	{
		name: "货车",
		cert: "A2/B2",
		icon: "huoche",
		query: { liceTruck: 1 },
		sujectList: [
			{
				name: "科目一",
				query: {
					name: "科目一",
					cert: "A2/B2",
					vehicle: "货车",
					subject: 1,
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "A2/B2",
					vehicle: "货车",
					subject: 4,
				},
			},
		],
	},
	{
		name: "摩托车",
		cert: "D/E/F",
		icon: "motuoche",
		query: { liceMoto: 1 },
		sujectList: [
			{
				name: "科目一",
				query: {
					name: "科目一",
					cert: "D/E/F",
					vehicle: "摩托车",
					subject: 1,
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "D/E/F",
					vehicle: "摩托车",
					subject: 4,
				},
			},
		],
	},
]);
</script>

<style lang="scss">
.car-type {
	margin: 21px 15px;
	--van-tabs-line-height: 88px;
	.van-tab--active {
		.car-choose {
			&::after {
				content: "";
				width: 100%;
				height: 78px;
				background-color: royalblue;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.2;
			}
			&::before {
				content: "";
				width: 0px;
				height: 0px;
				border: 10px solid #000;
				border-top-color: royalblue;
				border-bottom-color: transparent;
				border-left-color: transparent;
				border-right-color: transparent;
				position: absolute;
				bottom: 0;
				transform: translateY(50%);
				opacity: 0.2;
			}
		}
	}
	.test-type {
		--van-tabs-line-height: 44px;
	}
	.car-choose {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.img {
			width: 66px;
			height: 22px;
		}
	}
}
</style>