|
|
@@ -1,64 +1,427 @@
|
|
|
<template>
|
|
|
- <loading v-if="loading"></loading>
|
|
|
- <view v-else class="carVideo">
|
|
|
- <topbar>
|
|
|
- <van-search shape="round" placeholder="搜索学车视频" @search='search' />
|
|
|
- </topbar>
|
|
|
- <van-tabs id='tabs' :active="active" :sticky='true'>
|
|
|
- <van-tab :title="item.chapterName" v-for="(item,index) in typeList" :key='index' class="vant-tab">
|
|
|
- <branch-one v-if="index==0" :carVideoList="item.children"></branch-one>
|
|
|
- <branch-two v-else-if="index==1" :carVideoList="item.children"></branch-two>
|
|
|
- <branch-two v-else-if="index==2" :carVideoList="item.children"></branch-two>
|
|
|
- <branch-one v-else-if="index==3" :carVideoList="item.children"></branch-one>
|
|
|
- <get-cert v-else-if="index==4"></get-cert>
|
|
|
- <branch-two v-else :carVideoList="item.children"></branch-two>
|
|
|
- </van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
+ <loading v-if="loading"></loading>
|
|
|
+
|
|
|
+ <view v-else class="carVideo">
|
|
|
+ <topbar>
|
|
|
+ <van-search shape="round" placeholder="搜索学车视频" @search="search" />
|
|
|
+ </topbar>
|
|
|
+ <view>
|
|
|
+ <swiper :indicator-dots="true" style="height: 200rpx">
|
|
|
+ <swiper-item class="swiperBanner">
|
|
|
+ <image @click="goAprilExam" class="banner" :src="banner1"></image>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item class="swiperBanner">
|
|
|
+ <image @click="goAprilExam" class="banner" :src="banner1"></image>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item class="swiperBanner">
|
|
|
+ <image @click="goAprilExam" class="banner" :src="banner1"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="carType">
|
|
|
+ <view v-for="(item, index) in carType" :key="index">
|
|
|
+ <view
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ carTypeIndex = index;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ class="col"
|
|
|
+ :class="{
|
|
|
+ col_selected: carTypeIndex == index,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <image :class="['carType-img' + index]" :src="item.img"></image>
|
|
|
+ <view class="h6"></view>
|
|
|
+ <text class="carType-title">{{ item.title }}</text>
|
|
|
+ <text class="carType-typeName">{{ item.typeName }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="point">
|
|
|
+ <view
|
|
|
+ :style="{
|
|
|
+ left: carTypeIndex * 172 + 'rpx',
|
|
|
+ }"
|
|
|
+ class="point-area"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ class=""
|
|
|
+ src="https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/triangle1@2x.png"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tab">
|
|
|
+ <van-tabs class="custom-tabs" :active="active" bind:change="onChange">
|
|
|
+ <van-tab title="科目一">
|
|
|
+ <view class="tab-container">
|
|
|
+ <tab-left :subject="1" :leftList="leftList1"></tab-left>
|
|
|
+ <tab-center :subject="1" :centerList="centerList1"></tab-center>
|
|
|
+ <tab-right :subject="1" :rightList="rightList1"></tab-right>
|
|
|
+ </view>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="科目二">
|
|
|
+ <view v-for="(item, index) in typeList[1]" :key="index">
|
|
|
+ <m-video-box
|
|
|
+ :column="[2, 1, 3][index % 3]"
|
|
|
+ :type="[2, 1, 3][index % 3] == 1 ? 'left-right' : 'top-bottom'"
|
|
|
+ :carVideoList="item"
|
|
|
+ v-if="item.children.length == 0"
|
|
|
+ />
|
|
|
+ <VideoListBox :carVideoList="item" v-else />
|
|
|
+ </view>
|
|
|
+ <!-- <view class="tab-container">
|
|
|
+ <tab-left :leftList="leftList"></tab-left>
|
|
|
+ <tab-center :centerList="centerList"></tab-center>
|
|
|
+ <tab-right :rightList="rightList"></tab-right>
|
|
|
+ </view> -->
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="科目三">
|
|
|
+ <!-- <view class="tab-container">
|
|
|
+ //不重要的 边角料
|
|
|
+ <tab-left :leftList="leftList"></tab-left>
|
|
|
+ <tab-center :centerList="centerList"></tab-center>
|
|
|
+ <tab-right :rightList="rightList"></tab-right>
|
|
|
+ </view> -->
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="科目四">
|
|
|
+ <view class="tab-container">
|
|
|
+ <tab-left :subject="4" :leftList="leftList4"></tab-left>
|
|
|
+ <tab-center :subject="4" :centerList="centerList4"></tab-center>
|
|
|
+ <tab-right :subject="4" :rightList="rightList4"></tab-right>
|
|
|
+ </view>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import branchOne from './components/branchOne.vue'
|
|
|
- import branchTwo from './components/branchTwo.vue'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- branchOne,
|
|
|
- branchTwo,
|
|
|
- },
|
|
|
- data: () => ({
|
|
|
- active: 1,
|
|
|
- typeList: [],
|
|
|
- loading: true
|
|
|
- }),
|
|
|
- async mounted() {
|
|
|
- let {
|
|
|
- data
|
|
|
- } = await this.$api.carVideo.getTreeList()
|
|
|
- this.typeList = data
|
|
|
- this.loading = false
|
|
|
- this.$nextTick(() => {
|
|
|
- this.selectComponent('#tabs').resize();
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async search(e) {
|
|
|
- let {
|
|
|
- data
|
|
|
- } = await this.$api.carVideo.getSearchList(e.detail)
|
|
|
- console.log(data)
|
|
|
- this.$utils.route.goPage('/pages/carVideo/more', null, {
|
|
|
- carVideoList: data
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import shortVideo from "./components/shortVideo.vue";
|
|
|
+import branchOne from "./components/branchOne.vue";
|
|
|
+import branchTwo from "./components/branchTwo.vue";
|
|
|
+import banner1 from "@/assets/img/banner1.jpg";
|
|
|
+import Test from "../mockExam/test.vue";
|
|
|
+import tabLeft from "./components/tabLeft.vue";
|
|
|
+import tabRight from "./components/tabRight.vue";
|
|
|
+import TabCenter from "./components/tabCenter.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ shortVideo,
|
|
|
+ branchOne,
|
|
|
+ branchTwo,
|
|
|
+ tabLeft,
|
|
|
+ TabCenter,
|
|
|
+ tabRight,
|
|
|
+ },
|
|
|
+ data: () => ({
|
|
|
+ //科目一
|
|
|
+ rightList1: [
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LocalTopics@2x.png",
|
|
|
+ text: "地方专题",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/WrongTopicCollection@2x.png",
|
|
|
+ text: "错题·收藏",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/NotesBeforeExamination@2x.png",
|
|
|
+ text: "考前须知",
|
|
|
+ path: "/otherPages/marked/index?markdown=学车必看",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LearnToSee@2x.png",
|
|
|
+ text: "学车必看",
|
|
|
+ path: "/otherPages/marked/index?markdown=学车必看",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ centerList1: [
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SelectedTestQuestions@2x.png",
|
|
|
+ text: "精选考题\n500题",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationTestTopics@2x.png",
|
|
|
+ text: "模拟考试\n仿真题目",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ leftList1: [
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SequentialPractice@2x.png",
|
|
|
+ text: "顺序练习",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/ClassificationExercise@2x.png",
|
|
|
+ text: "分类练习",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/RealExaminationRoomSimulation@2x.png",
|
|
|
+ text: "真实模拟考试",
|
|
|
+ path: "/pages/mockExam/begin?username=张宇&subject=1&type=liceCar&headimg=https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL42T648KSueEiaibrIt0jgEmgBUlRvbu1ES3VnKoBicK4GOnuYK8oeSLL0V0gmeGaWwONo78oPpvzUQ/132",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationResults@2x.png",
|
|
|
+ text: "模拟成绩",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //科目四
|
|
|
+ rightList4: [
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LocalTopics@2x.png",
|
|
|
+ text: "地方专题",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/WrongTopicCollection@2x.png",
|
|
|
+ text: "错题·收藏",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/NotesBeforeExamination@2x.png",
|
|
|
+ text: "考前须知",
|
|
|
+ path: "/otherPages/marked/index?markdown=学车必看",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LearnToSee@2x.png",
|
|
|
+ text: "学车必看",
|
|
|
+ path: "/otherPages/marked/index?markdown=学车必看",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ centerList4: [
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SelectedTestQuestions@2x.png",
|
|
|
+ text: "精选考题\n500题",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationTestTopics@2x.png",
|
|
|
+ text: "模拟考试\n仿真题目",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ leftList4: [
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SequentialPractice@2x.png",
|
|
|
+ text: "顺序练习",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/ClassificationExercise@2x.png",
|
|
|
+ text: "分类练习",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/RealExaminationRoomSimulation@2x.png",
|
|
|
+ text: "真实模拟考试",
|
|
|
+ path: "/pages/mockExam/begin?username=张宇&subject=1&type=liceCar&headimg=https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL42T648KSueEiaibrIt0jgEmgBUlRvbu1ES3VnKoBicK4GOnuYK8oeSLL0V0gmeGaWwONo78oPpvzUQ/132",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationResults@2x.png",
|
|
|
+ text: "模拟成绩",
|
|
|
+ path: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ active: 0,
|
|
|
+ carTypeIndex: 0,
|
|
|
+ carType: [
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/car@2x.png",
|
|
|
+ typeName: "轿车",
|
|
|
+ title: "C1/C2/C3",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/bus@2x.png",
|
|
|
+ typeName: "客车",
|
|
|
+ title: "A1/A2/B1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/truck@2x.png",
|
|
|
+ typeName: "货车",
|
|
|
+ title: "A2/B2",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/motorcycle@2x.png",
|
|
|
+ typeName: "摩托车",
|
|
|
+ title: "D/E/F",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ typeList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ typeName: "科目一",
|
|
|
+ pid: 0,
|
|
|
+ typeDescribe: null,
|
|
|
+ typeIcon: null,
|
|
|
+ typeSort: 0,
|
|
|
+ status: "0",
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ typeName: "科目二",
|
|
|
+ pid: 0,
|
|
|
+ typeDescribe: null,
|
|
|
+ typeIcon: null,
|
|
|
+ typeSort: 0,
|
|
|
+ status: "0",
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ typeName: "科目三",
|
|
|
+ pid: 0,
|
|
|
+ typeDescribe: null,
|
|
|
+ typeIcon: null,
|
|
|
+ typeSort: 0,
|
|
|
+ status: "0",
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ typeName: "科目四",
|
|
|
+ pid: 0,
|
|
|
+ typeDescribe: null,
|
|
|
+ typeIcon: null,
|
|
|
+ typeSort: 0,
|
|
|
+ status: "0",
|
|
|
+ children:[]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ loading: true,
|
|
|
+ banner1,
|
|
|
+ query: {},
|
|
|
+ }),
|
|
|
+
|
|
|
+ async mounted() {
|
|
|
+ let { data } = await this.$api.carVideo.getTreeList();
|
|
|
+ this.typeList = data;
|
|
|
+ this.loading = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.selectComponent("#tabs").resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goAprilExam() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/extraWeb/index?src=https://mn.zzxcx.net/#/aprilExam/test",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async search(e) {
|
|
|
+ let { data } = await this.$api.carVideo.getSearchList(e.detail);
|
|
|
+ console.log(data);
|
|
|
+ this.$utils.route.goPage("/pages/carVideo/more", null, {
|
|
|
+ carVideoList: data,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .carVideo {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .vant-tab{
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
-</style>
|
|
|
+.h6 {
|
|
|
+ height: 6rpx;
|
|
|
+}
|
|
|
+.carVideo {
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+.swiperBanner {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.banner {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 200rpx;
|
|
|
+}
|
|
|
+.carType {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 152rpx;
|
|
|
+ background: #f0f3f7;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ .col_selected {
|
|
|
+ background: #bfd8ff;
|
|
|
+ }
|
|
|
+ .col {
|
|
|
+ width: 172rpx;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ .carType-img0 {
|
|
|
+ width: 133rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ }
|
|
|
+ .carType-img1 {
|
|
|
+ width: 108rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ }
|
|
|
+ .carType-img2 {
|
|
|
+ width: 82rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ .carType-img3 {
|
|
|
+ width: 86rpx;
|
|
|
+ height: 59rpx;
|
|
|
+ }
|
|
|
+ .carType-typeName {
|
|
|
+ color: #333;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .carType-title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.point {
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ }
|
|
|
+ .point-area {
|
|
|
+ width: 25%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tab {
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ .custom-tabs {
|
|
|
+ /deep/ .van-tabs__line {
|
|
|
+ background: #498ef5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-container {
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+}
|
|
|
+.vant-tab {
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+</style>
|
