|
@@ -23,174 +23,180 @@
|
|
|
</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 { useStore } from "vuex";
|
|
|
- const store = useStore();
|
|
|
+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);
|
|
|
|
|
|
- const carTypeRef = ref<any>(null);
|
|
|
- nextTick(() => {
|
|
|
- carTypeRef.value.scrollTo(store.state.carType);
|
|
|
- });
|
|
|
+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: [
|
|
|
- {
|
|
|
+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: "科目一",
|
|
|
- query: {
|
|
|
- name: "科目一",
|
|
|
- cert: "C1/C2/C3",
|
|
|
- vehicle: "小车",
|
|
|
- subject: 1,
|
|
|
- },
|
|
|
+ cert: "C1/C2/C3",
|
|
|
+ vehicle: "小车",
|
|
|
+ subject: 1,
|
|
|
},
|
|
|
- {
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "科目四",
|
|
|
+ query: {
|
|
|
name: "科目四",
|
|
|
- query: {
|
|
|
- name: "科目四",
|
|
|
- cert: "C1/C2/C3",
|
|
|
- vehicle: "小车",
|
|
|
- subject: 4,
|
|
|
- },
|
|
|
+ cert: "C1/C2/C3",
|
|
|
+ vehicle: "小车",
|
|
|
+ subject: 4,
|
|
|
},
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "客车",
|
|
|
- cert: "A1/A3/B1",
|
|
|
- icon: "keche",
|
|
|
- query: { liceBus: 1 },
|
|
|
- sujectList: [
|
|
|
- {
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "客车",
|
|
|
+ cert: "A1/A3/B1",
|
|
|
+ icon: "keche",
|
|
|
+ query: { liceBus: 1 },
|
|
|
+ sujectList: [
|
|
|
+ {
|
|
|
+ name: "科目一",
|
|
|
+ query: {
|
|
|
name: "科目一",
|
|
|
- query: {
|
|
|
- name: "科目一",
|
|
|
- cert: "A1/A3/B1",
|
|
|
- vehicle: "客车",
|
|
|
- subject: 1,
|
|
|
- },
|
|
|
+ cert: "A1/A3/B1",
|
|
|
+ vehicle: "客车",
|
|
|
+ subject: 1,
|
|
|
},
|
|
|
- {
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "科目四",
|
|
|
+ query: {
|
|
|
name: "科目四",
|
|
|
- query: {
|
|
|
- name: "科目四",
|
|
|
- cert: "A1/A3/B1",
|
|
|
- vehicle: "客车",
|
|
|
- subject: 4,
|
|
|
- },
|
|
|
+ cert: "A1/A3/B1",
|
|
|
+ vehicle: "客车",
|
|
|
+ subject: 4,
|
|
|
},
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "货车",
|
|
|
- cert: "A2/B2",
|
|
|
- icon: "huoche",
|
|
|
- query: { liceTruck: 1 },
|
|
|
- sujectList: [
|
|
|
- {
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "货车",
|
|
|
+ cert: "A2/B2",
|
|
|
+ icon: "huoche",
|
|
|
+ query: { liceTruck: 1 },
|
|
|
+ sujectList: [
|
|
|
+ {
|
|
|
+ name: "科目一",
|
|
|
+ query: {
|
|
|
name: "科目一",
|
|
|
- query: {
|
|
|
- name: "科目一",
|
|
|
- cert: "A2/B2",
|
|
|
- vehicle: "货车",
|
|
|
- subject: 1,
|
|
|
- },
|
|
|
+ cert: "A2/B2",
|
|
|
+ vehicle: "货车",
|
|
|
+ subject: 1,
|
|
|
},
|
|
|
- {
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "科目四",
|
|
|
+ query: {
|
|
|
name: "科目四",
|
|
|
- query: {
|
|
|
- name: "科目四",
|
|
|
- cert: "A2/B2",
|
|
|
- vehicle: "货车",
|
|
|
- subject: 4,
|
|
|
- },
|
|
|
+ cert: "A2/B2",
|
|
|
+ vehicle: "货车",
|
|
|
+ subject: 4,
|
|
|
},
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "摩托车",
|
|
|
- cert: "D/E/F",
|
|
|
- icon: "motuoche",
|
|
|
- query: { liceMoto: 1 },
|
|
|
- sujectList: [
|
|
|
- {
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "摩托车",
|
|
|
+ cert: "D/E/F",
|
|
|
+ icon: "motuoche",
|
|
|
+ query: { liceMoto: 1 },
|
|
|
+ sujectList: [
|
|
|
+ {
|
|
|
+ name: "科目一",
|
|
|
+ query: {
|
|
|
name: "科目一",
|
|
|
- query: {
|
|
|
- name: "科目一",
|
|
|
- cert: "D/E/F",
|
|
|
- vehicle: "摩托车",
|
|
|
- subject: 1,
|
|
|
- },
|
|
|
+ cert: "D/E/F",
|
|
|
+ vehicle: "摩托车",
|
|
|
+ subject: 1,
|
|
|
},
|
|
|
- {
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "科目四",
|
|
|
+ query: {
|
|
|
name: "科目四",
|
|
|
- query: {
|
|
|
- name: "科目四",
|
|
|
- cert: "D/E/F",
|
|
|
- vehicle: "摩托车",
|
|
|
- subject: 4,
|
|
|
- },
|
|
|
+ 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-type {
|
|
|
+ margin: 21px 15px;
|
|
|
+ --van-tabs-line-height: 88px;
|
|
|
+ .van-tab--active {
|
|
|
.car-choose {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- .img {
|
|
|
- width: 66px;
|
|
|
- height: 22px;
|
|
|
+ &::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>
|