nbjk-xcx/src/pages/carVideo/index.vue

<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> -->
    <!-- #ifdef MP-WEIXIN -->
    <topbar>
      <userInfoHead :userData="userData"></userInfoHead>
    </topbar>
    <!-- #endif -->
 
    <view>
      <swiper :indicator-dots="false" style="height: 200rpx">
        <swiper-item class="swiperBanner">
          <image
            class="banner"
            src="https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/banner.png"
          ></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="carType">
      <view
        v-for="(item, index) in carType"
        @click="changeVehicle(item)"
        :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://ndata.zzxcx.net/ctjk/mp-wx/carVideo/triangle1@2x.png"
        ></image>
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN-->
    <!-- (废弃) -->
    <!-- <view class="tab">
      <van-tabs animated class="custom-tabs " :active="active" id="tabs" @change="changeSubject" :sticky="true">
        <van-tab class="uni-app-fontsize-paragraph" v-if="xcx_video_open" title="教学视频">
          <subjectVideoSelect></subjectVideoSelect>
        </van-tab>
        <van-tab title-style="font-size:36rpx;" title="科目一">
          <view class="tab-container">
            <tab-left :subject="1" :query="tabQuery" :leftList="leftList1"></tab-left>
            <tab-center :subject="1" :query="tabQuery" :centerList="centerList1"></tab-center>
            <tab-right :subject="1" :query="tabQuery" :rightList="rightList1"></tab-right>
          </view>
        </van-tab>
        <van-tab title-style="font-size:36rpx;" title="科目四">
          <view class="tab-container">
            <tab-left :query="tabQuery" :subject="4" :leftList="leftList4"></tab-left>
            <tab-center :query="tabQuery" :subject="4" :centerList="centerList4"></tab-center>
            <tab-right :query="tabQuery" :subject="4" :rightList="rightList4"></tab-right>
          </view>
        </van-tab>
      </van-tabs>
    </view> -->
    <view class="subject">
      <view class="subject-tab">
        <view
          class="subject-slider"
          :class="{
            left0: active == 0,
            right0: active == 1,
          }"
        ></view>
        <view
          @click="
            () => {
              active = 0;
              tabQuery.subject = 1;
            }
          "
          class="subject-tabs"
        >
          <span v-if="active == 0">科目一</span>
          <span style="color: #498ef5" v-else>科目一</span>
        </view>
        <view
          @click="
            () => {
              active = 1;
              tabQuery.subject = 4;
            }
          "
          class="subject-tabs"
        >
          <span v-if="active == 1">科目四</span>
          <span style="color: #498ef5" v-else>科目四</span>
        </view>
      </view>
    </view>
    <view class="tab">
      <scroll-view
        @scrolltoupper="
          () => {
            active = 0;
            tabQuery.subject = 1;
          }
        "
        @scrolltolower="
          () => {
            active = 1;
            tabQuery.subject = 4;
          }
        "
        scroll-with-animation
        :scroll-into-view="'tab-container' + active"
        enhanced
        style="width: 100%; white-space: nowrap"
        enable-flex
        :scroll-x="true"
      >
        <view
          id="tab-container0"
          style="display: inline-block; white-space: nowrap"
        >
          <view class="tab-container">
            <tab-left
              :subject="1"
              :query="tabQuery"
              :leftList="leftList1"
            ></tab-left>
            <tab-center
              :subject="1"
              :query="tabQuery"
              :centerList="centerList1"
            ></tab-center>
            <tab-right
              :subject="1"
              :query="tabQuery"
              :rightList="rightList1"
            ></tab-right>
          </view>
        </view>

        <view
          id="tab-container1"
          style="display: inline-block; white-space: nowrap"
        >
          <view class="tab-container">
            <tab-left
              :query="tabQuery"
              :subject="4"
              :leftList="leftList4"
            ></tab-left>
            <tab-center
              :query="tabQuery"
              :subject="4"
              :centerList="centerList4"
            ></tab-center>
            <tab-right
              :query="tabQuery"
              :subject="4"
              :rightList="rightList4"
            ></tab-right>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- #endif -->

    <!-- <view class="splitLine"> </view>
    <view v-if="tabQuery.name !== '教学视频'" class="two">
      <view
        @click="
          goPath(
            '/otherPages/selectRulePaper/index',
            {
              title: '新规秘卷',
            },
            true
          )
        "
        class="two-item"
      >
        <image
          class=""
          src="https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/xingui.png"
        ></image>
        <text style="color: #fff; font-size: 46rpx; top: 34rpx" class="twp-text"
          >新规秘卷</text
        >
        <text
          style="color: #fff; font-size: 30rpx; top: 104rpx"
          class="twp-text"
          >考前秘籍 直击考点</text
        >
      </view>
    </view> -->
    <!-- <view v-if="active == 0 || active == 3">
      <van-cell
        v-if="active == 0"

        @click="clickCell(recomVideos0)"
        :title="'科目一教学视频'"
        is-link
        value="更多"
      />
      <van-cell
        v-if="active == 3"
        @click="clickCell(recomVideos3)"
        :title="'科目四教学视频'"
        is-link
        value="更多"
      />
      <view v-if="active == 0" class="video-box">
        <m-video-topbottom
          @click="returnData(item)"
          :carVideoItem="item"
          v-for="(item, index) in recomVideos0.list"
          :key="index"
        />
      </view>
      <view v-if="active == 3" class="video-box">
        <m-video-topbottom
          @click="returnData(item)"
          :carVideoItem="item"
          v-for="(item, index) in recomVideos3.list"
          :key="index"
        />
      </view>
    </view> -->
  </view>
</template>

<script>
import shortVideo from "./components/shortVideo.vue";
import branchOne from "./components/branchOne.vue";
import branchTwo from "./components/branchTwo.vue";

import tabLeft from "./components/tabLeft.vue";
import tabRight from "./components/tabRight.vue";
import TabCenter from "./components/tabCenter.vue";
import VideoListBox from "./components/videoListBox.vue";
import userInfoHead from "./components/userInfoHead.vue";
import utils from "@/utils/index";
import api from "@/api";
import subjectVideoSelect from "./components/subjectVideoSelect.vue";
import userInfoAuth from "./components/userInfoAuth.vue";
export default {
  components: {
    userInfoAuth,
    shortVideo,
    branchOne,
    branchTwo,
    tabLeft,
    TabCenter,
    tabRight,
    VideoListBox,
    userInfoHead,
    subjectVideoSelect,
  },
  data: () => ({
    userInfoAuthVisible: false,
    xcx_video_open: 0,
    subjectMap: ["科目一", "科目二", "科目三", "科目四"],
    recomVideos0: [],
    recomVideos3: [],
    tabQuery: {
      liceCar: 1,
      liceTruck: "",
      liceBus: "",
      liceMoto: "",
      name: "科目一",
      gs: "xc",
      cert: "C1/C2/C3",
      vehicle: "小车",
      subject: 1,
      title: "顺序练习",
      sort: 3,
    },
    //科目一
    rightList1: [
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/LocalTopics@2x.png",
        text: "地方专题",
        path: "/otherPages/classifyArea/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/WrongTopicCollection@2x.png",
        text: "错题·收藏",
        path: "/otherPages/collection/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/NotesBeforeExamination@2x.png",
        text: "考前须知",
        path: "/otherPages/marked/index?markdown=考前须知",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/learnToSee@2x.png",
        text: "学车必看",
        path: "/otherPages/marked/index?markdown=学车必看",
      },
    ],
    centerList1: [
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/selectedTestQuestions@2x.png",
        text: "精选考题",
        path: "/otherPages/classifyChoose/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/simulationTestTopics@2x.png",
        text: "模拟考试",
        path: "/otherPages/beforeMockExam/index",
      },
    ],
    leftList1: [
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/sequentialPractice@2x.png",
        text: "顺序练习",
        path: "/otherPages/classifyOrder/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/classificationExercise@2x.png",
        text: "分类练习",
        path: "/otherPages/classifyKind/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/newRulesPaper@2x.png",
        text: "新规秘卷",
        path: "/otherPages/selectRulePaper/index",
      },

      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/simulationResults@2x.png",
        text: "模拟成绩",
        path: "/otherPages/testScores/index",
      },
    ],
    //科目四
    rightList4: [
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/localTopics%402x.png",
        text: "地方专题",
        path: "/otherPages/classifyArea/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/wrongTopicCollection%402x.png",
        text: "错题·收藏",
        path: "/otherPages/collection/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/notesBeforeExamination%402x.png",
        text: "考前须知",
        path: "/otherPages/marked/index?markdown=学车必看",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/learnToSee@2x.png",
        text: "学车必看",
        path: "/otherPages/marked/index?markdown=学车必看",
      },
    ],
    centerList4: [
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/selectedTestQuestions@2x.png",
        text: "精选考题",
        path: "/otherPages/classifyChoose/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/simulationTestTopics@2x.png",
        text: "模拟考试",
        path: "/otherPages/beforeMockExam/index",
      },
    ],
    leftList4: [
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/sequentialPractice@2x.png",
        text: "顺序练习",
        path: "/otherPages/classifyOrder/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/classificationExercise@2x.png",
        text: "分类练习",
        path: "/otherPages/classifyKind/index",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/newRulesPaper@2x.png",
        text: "新规秘卷",
        path: "/otherPages/selectRulePaper/index",
      },

      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/simulationResults@2x.png",
        text: "模拟成绩",
        path: "/otherPages/testScores/index",
      },
    ],
    active: 0,
    carTypeIndex: 0,
    carType: [
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/xc.png",
        typeName: "小车",
        title: "C1/C2/C3",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/kc.png",
        typeName: "客车",
        title: "A1/A3/B1",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/hc.png",
        typeName: "货车",
        title: "A2/B2",
      },
      {
        img: "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/mtc.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,
    query: {},
  }),
  computed: {
    userData() {
      console.log(this.$store.state);
      return this.$store.state.user.userInfo || {};
    },
  },
  onReady() {
    // const query = tt.createSelectorQuery();
    // // 选择 ttml 中的示例按钮，并添加一个对它布局信息的查询
    // query.select("#btn").boundingClientRect();
    // // 选择显示区域，并查询它的滚动位置信息
    // query.selectViewport().scrollOffset();
  },

  async mounted() {
    this.loading = false;
    api.system.systemConfigConfigKey("xcx_video_open").then((res) => {
      this.xcx_video_open = Number(res.data);
      this.$nextTick(() => {
        // 需要延迟

        api.user.getInfo().then((res) => {
          uni.setStorageSync("userInfo", res.data);
          this.$store.commit("SET_USERINFO", res.data);
          // if (!res.data.nickName) {
          //   uni.showModal({
          //     title: "新用户更新信息",
          //     confirmText: "去更新",
          //     success: function (res) {
          //       if (res.confirm) {
          //        uni.navigateTo({
          //         url:"/otherPages/userInfoAuth/index"
          //        })
          //       } else if (res.cancel) {

          //       }
          //     }
          //   })
        });
      });
      this.$store.dispatch("GetRoadExamVip");
    });

    // api.user.getInfo().then(res => {
    //   uni.setStorageSync("userInfo", res.data);
    //   this.$store.commit('SET_USERINFO', res.data)
    //   // if (!res.data.nickName) {
    //   //   uni.showModal({
    //   //     title: "新用户更新信息",
    //   //     confirmText: "去更新",
    //   //     success: function (res) {
    //   //       if (res.confirm) {
    //   //        uni.navigateTo({
    //   //         url:"/otherPages/userInfoAuth/index"
    //   //        })
    //   //       } else if (res.cancel) {

    //   //       }
    //   //     }
    //   //   })

    //   // }
    // })
    // this.$nextTick(() => {
    //   this.selectComponent("#tabs").resize();
    // });
  },
  methods: {
    clickCell(carVideoList) {
      this.$utils.route.goPage(
        `/pages/carVideo/moreVideo?active=${this.active}`,
        null,
        {
          carVideoList: carVideoList,
          active: this.active,
        }
      );
    },
    goPath(url, extraQuery = {}, needVip = false) {
      uni.navigateTo({
        url:
          url + "?" + utils.mapToUrlQuery({ ...this.tabQuery, ...extraQuery }),
      });
    },
    scrollTabs(e) {
      console.log(e);
    },
    changeVehicle(item) {
      this.tabQuery.vehicle = item.typeName;
      this.tabQuery.cert = item.title;
      switch (item.typeName) {
        case "小车":
          this.tabQuery.liceCar = 1;
          this.tabQuery.liceTruck = "";
          this.tabQuery.liceBus = "";
          this.tabQuery.liceMoto = "";
          this.tabQuery.gs = "xc";
          break;
        case "货车":
          this.tabQuery.liceCar = "";
          this.tabQuery.liceTruck = 1;
          this.tabQuery.liceBus = "";
          this.tabQuery.liceMoto = "";
          this.tabQuery.gs = "hc";
          break;
        case "客车":
          this.tabQuery.liceCar = "";
          this.tabQuery.liceTruck = "";
          this.tabQuery.liceBus = 1;
          this.tabQuery.liceMoto = "";
          this.tabQuery.gs = "kc";
          break;
        case "摩托车":
          this.tabQuery.liceCar = "";
          this.tabQuery.liceTruck = "";
          this.tabQuery.liceBus = "";
          this.tabQuery.liceMoto = 1;
          this.tabQuery.gs = "mtc";
          break;
        default:
          break;
      }
    },
    changeSubject(e) {
      this.tabQuery.subject = e.detail.title == "科目一" ? 1 : 4;
      this.tabQuery.name = e.detail.title;
    },
    goLightMock(e) {
      uni.navigateTo({
        url: "/pages/lightMock/index",
      });
    },
    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>
.splitLine {
  width: 750rpx;
  height: 20rpx;
  background: #f2f3f5;
}

.subject {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40rpx;

  .subject-tab {
    width: 546rpx;
    height: 80rpx;
    background: #e3edfc;
    border-radius: 46rpx;
    position: relative;
    display: flex;

    .subject-tabs {
      width: 50%;
      height: 100%;
      line-height: 80rpx;
      color: #fff;
      text-align: center;
      font-size: 40rpx;
      z-index: 11;
    }

    .subject-slider {
      border-radius: 46rpx;
      background: -webkit-linear-gradient(left, #26a1ee, #498ef5);
      width: 300rpx;
      height: 100%;
      position: absolute;

      z-index: 10;
    }
  }
}

.two {
  width: 100%;
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;

  .two-item {
    position: relative;

    .twp-text {
      position: absolute;
      top: 32rpx;
      left: 30rpx;
      font-size: 32rpx;
    }

    image {
      width: 690rpx;
      height: 192rpx;
    }
  }
}

.tabTitle {
  width: 690rpx;
  margin: 0 auto;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 66rpx;
  height: 66rpx;
  position: relative;
  box-sizing: border-box;

  .tabTitle-row {
    width: 172rpx;
  }

  .rect {
    width: 25%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4rpx;

    .rect-color {
      width: 60%;
      height: 4rpx;
      margin: 0 auto;
      background: red;
    }
  }
}

swiper-item {
  overflow-y: scroll;
}

.h6 {
  height: 6rpx;
}

.carVideo {
  position: relative;
  background: #fff;
  min-height: 100vh;
  width: 100%;
}

.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: $uni-app-fontsize-paragraph;
    }

    .carType-title {
      color: #333;
      font-size: $uni-app-fontsize-paragraph;
    }
  }
}

.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: 100%;
  margin: 0 auto;
  display: inline-block;
  font-size: $uni-app-fontsize-paragraph;
  white-space: nowrap;

  #tabs {
    height: 800rpx;
  }

  .custom-tabs {
    /deep/ .van-tabs__line {
      background: #498ef5;
    }
  }

  .tab-container {
    width: 750rpx;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    padding: 0 30rpx;
  }
}

.vant-tab {
  height: 100px;
}

.video-box {
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  width: 690rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30rpx;
  z-index: 0;
  justify-content: space-between;

  .custom-video-topbottom ::v-deep .video-item {
    margin-right: 0;
    margin-bottom: 0;
  }
}

.left0 {
  left: 0;
}

.right0 {
  right: 0;
}
</style>