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 { ref, nextTick, onBeforeMount } from "vue";
import { useStore } from "vuex";
const store = useStore();

const carTypeRef = ref<any>(null);
nextTick(() => {
  carTypeRef.value.scrollTo(store.state.carType);
});

const carTypeChange = (e: string) => {
  store.commit("setCatType", e);
};

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>