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">
					<sujectOne v-if="index == 0"  :query="{ ...carTypeItem.query, ...sujectItem.query, title: '模拟考试' }"></sujectOne>
					 <sujectTwo v-if="index == 1" ></sujectTwo>
					<sujectThree v-if="index == 2" :query="{ ...carTypeItem.query, ...sujectItem.query, title: '模拟考试' }"></sujectThree>
					<sujectOne v-if="index == 3"  :query="{ ...carTypeItem.query, ...sujectItem.query, title: '模拟考试' }"></sujectOne>
				</van-tab>
			</van-tabs>
		</van-tab>
	</van-tabs>
</template>

<script lang="ts" setup>
import sujectOne from "./components/sujectOne.vue";
import sujectTwo from "./components/sujectTwo.vue";
import sujectThree from "./components/sujectThree.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 useWxSign from "@/hooks/wx/sign";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { openApi } from "@/api/index";
import wx from "weixin-js-sdk-ts";
const store = useStore();
const carTypeRef = ref<any>(null);
const { createWxConfig } = useWxSign();
openApi
	.jspapi({
		url: '',
	})
	.then((res) => {
		// let wxConfig = {
		// 	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
		// 	appId: res.data.data.appId as string, // 必填，公众号的唯一标识
		// 	timestamp: res.data.data.timestamp as number, // 必填，生成签名的时间戳
		// 	nonceStr: res.data.data.nonceStr as string, // 必填，生成签名的随机串
		// 	signature: res.data.data.signature as string, // 必填，签名
		// 	jsApiList: ["previewImage"], // 必填，需要使用的JS接口列表
		// 	openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
		// };
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
			appId: res.data.data.appId as string, // 必填，公众号的唯一标识
			...createWxConfig(res.data.data.ticket as string),
			jsApiList: ["previewImage"], // 必填，需要使用的JS接口列表
			openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
		});
		wx.error(({errMsg})=>{
			// alert('灯光模拟和视频无法跳转')
		})
	});
//打印环境变量
console.log(import.meta.env.MODE, "环境变量");
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,
					gs:"xc"
				},
			},
			{
				name: "科目二",
				query: {
					name: "科目二",
					cert: "C1/C2/C3",
					vehicle: "小车",
					subject: 2,
					gs:"xc"
				},
			},
			{
				name: "科目三",
				query: {
					name: "科目三",
					cert: "C1/C2/C3",
					vehicle: "小车",
					subject: 3,
					gs:"xc"
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "C1/C2/C3",
					vehicle: "小车",
					subject: 4,
					gs:"xc"
				},
			},
		],
	},
	{
		name: "客车",
		cert: "A1/A3/B1",
		icon: "keche",
		query: { liceBus: 1 },
		sujectList: [
			{
				name: "科目一",
				query: {
					name: "科目一",
					cert: "A1/A3/B1",
					vehicle: "客车",
					subject: 1,
					gs:"kc"
				},
			},
			{
				name: "科目二",
				query: {
					name: "科目二",
					cert: "A1/A3/B1",
					vehicle: "客车",
					subject: 1,
					gs:"kc"
				},
			},
			{
				name: "科目三",
				query: {
					name: "科目三",
					cert: "A1/A3/B1",
					vehicle: "客车",
					subject: 4,
					gs:"kc"
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "A1/A3/B1",
					vehicle: "客车",
					subject: 4,
					gs:"kc"
				},
			},
		],
	},
	{
		name: "货车",
		cert: "A2/B2",
		icon: "huoche",
		query: { liceTruck: 1 },
		sujectList: [
			{
				name: "科目一",
				query: {
					name: "科目一",
					cert: "A2/B2",
					vehicle: "货车",
					subject: 1,
					gs:"hc"
				},
			},
			{
				name: "科目二",
				query: {
					name: "科目二",
					cert: "A2/B2",
					vehicle: "货车",
					subject: 2,
					gs:"hc"
				},
			},
			{
				name: "科目三",
				query: {
					name: "科目三",
					cert: "A2/B2",
					vehicle: "货车",
					subject: 3,
					gs:"hc"
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "A2/B2",
					vehicle: "货车",
					subject: 4,
					gs:"hc"
				},
			},
		],
	},
	{
		name: "摩托车",
		cert: "D/E/F",
		icon: "motuoche",
		query: { liceMoto: 1 },
		sujectList: [
			{
				name: "科目一",
				query: {
					name: "科目一",
					cert: "D/E/F",
					vehicle: "摩托车",
					subject: 1,
					gs:"mtc"
				},
			},
			{
				name: "科目二",
				query: {
					name: "科目二",
					cert: "D/E/F",
					vehicle: "摩托车",
					subject: 2,
					gs:"mtc"
				},
			},
			{
				name: "科目三",
				query: {
					name: "科目三",
					cert: "D/E/F",
					vehicle: "摩托车",
					subject: 3,
					gs:"mtc"
				},
			},
			{
				name: "科目四",
				query: {
					name: "科目四",
					cert: "D/E/F",
					vehicle: "摩托车",
					subject: 4,
					gs:"mtc"
				},
			},
		],
	},
]);
</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>