Просмотр исходного кода

修复首页科目切换的一系列问题

JXDS18FUJT 2 лет назад
Родитель
Сommit
06e72d6393
2 измененных файлов с 169 добавлено и 95 удалено
  1. 1 1
      src/otherPages/beforeMockExam/index.vue
  2. 168 94
      src/pages/carVideo/index.vue

+ 1 - 1
src/otherPages/beforeMockExam/index.vue

@@ -11,7 +11,7 @@
       <div class="title">考试说明</div>
       <div class="class">
         <span>考试科目</span>
-        <span>{{ query.name }}</span>
+        <span>{{ query.subject==1?'科目一':'科目四' }}</span>
       </div>
       <div class="class">
         <span>考试题库</span>

+ 168 - 94
src/pages/carVideo/index.vue

@@ -2,7 +2,6 @@
   <loading v-if="loading"></loading>
 
   <view v-else class="carVideo">
-
     <!-- <topbar>
       <van-search shape="round" placeholder="搜索学车视频" @search="search" />
     </topbar>
@@ -44,20 +43,30 @@
     <view>
       <swiper :indicator-dots="false" style="height: 200rpx">
         <swiper-item class="swiperBanner">
-          <image class="banner" src="https://ct.zzxcx.net/ctjk/mp-wx/carVideo/banner.png"></image>
+          <image
+            class="banner"
+            src="https://ct.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,
-}">
+      <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>
@@ -66,10 +75,16 @@
       </view>
     </view>
     <view class="point">
-      <view :style="{
-        left: carTypeIndex * 172 + 'rpx',
-      }" class="point-area">
-        <image class="" src="https://ct.zzxcx.net/ctjk/mp-wx/carVideo/triangle1@2x.png"></image>
+      <view
+        :style="{
+          left: carTypeIndex * 172 + 'rpx',
+        }"
+        class="point-area"
+      >
+        <image
+          class=""
+          src="https://ct.zzxcx.net/ctjk/mp-wx/carVideo/triangle1@2x.png"
+        ></image>
       </view>
     </view>
     <!-- #ifdef MP-WEIXIN-->
@@ -97,45 +112,104 @@
     </view> -->
     <view class="subject">
       <view class="subject-tab">
-        <view class="subject-slider" :class="{
-          'left0': active == 0,
-          'right0': active == 1
-        }"></view>
-        <view @click="() => {
-          active = 0
-        }" class="subject-tabs">
+        <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>
+          <span style="color: #498ef5" v-else>科目一</span>
         </view>
-        <view @click="() => {
-          active = 1
-        }" class="subject-tabs">
-           <span v-if="active == 1">科目四</span>
-          <span style="color: #498EF5;" v-else>科目四</span>
+        <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
-      }" @scrolltolower="() => {
-  active = 1
-}" 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;">
+      <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>
+            <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
+          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>
+            <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>
@@ -143,25 +217,33 @@
 
     <!-- #endif -->
 
-    <view class="splitLine">
-
-    </view>
+    <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://ct.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
+        @click="
+          goPath(
+            '/otherPages/selectRulePaper/index',
+            {
+              title: '新规秘卷',
+            },
+            true
+          )
+        "
+        class="two-item"
+      >
+        <image
+          class=""
+          src="https://ct.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
@@ -212,9 +294,9 @@ import userInfoHead from "./components/userInfoHead.vue";
 import freeUseBg from "@/assets/img/freeUseBg.png";
 import newRulesBg from "@/assets/img/newRulesPaperBg.png";
 import utils from "@/utils/index";
-import api from '@/api'
-import subjectVideoSelect from './components/subjectVideoSelect.vue'
-import userInfoAuth from './components/userInfoAuth.vue';
+import api from "@/api";
+import subjectVideoSelect from "./components/subjectVideoSelect.vue";
+import userInfoAuth from "./components/userInfoAuth.vue";
 export default {
   components: {
     userInfoAuth,
@@ -226,7 +308,7 @@ export default {
     tabRight,
     VideoListBox,
     userInfoHead,
-    subjectVideoSelect
+    subjectVideoSelect,
   },
   data: () => ({
     userInfoAuthVisible: false,
@@ -298,7 +380,7 @@ export default {
       {
         img: "https://ct.zzxcx.net/ctjk/mp-wx/carVideo/realExaminationRoomSimulation@2x.png",
         text: "真实考场模拟",
-        path: '/pages/extraHorWeb/index',
+        path: "/pages/extraHorWeb/index",
       },
 
       {
@@ -356,7 +438,7 @@ export default {
       {
         img: "https://ct.zzxcx.net/ctjk/mp-wx/carVideo/realExaminationRoomSimulation@2x.png",
         text: "真实考场模拟",
-        path: '/pages/extraHorWeb/index',
+        path: "/pages/extraHorWeb/index",
       },
 
       {
@@ -437,7 +519,7 @@ export default {
   }),
   computed: {
     userData() {
-      console.log(this.$store.state)
+      console.log(this.$store.state);
       return this.$store.state.user.userInfo || {};
     },
   },
@@ -450,16 +532,15 @@ export default {
   },
 
   async mounted() {
-
     this.loading = false;
-    api.system.systemConfigConfigKey('xcx_video_open').then(res => {
-      this.xcx_video_open = Number(res.data)
+    api.system.systemConfigConfigKey("xcx_video_open").then((res) => {
+      this.xcx_video_open = Number(res.data);
       this.$nextTick(() => {
         // 需要延迟
 
-        api.user.getInfo().then(res => {
+        api.user.getInfo().then((res) => {
           uni.setStorageSync("userInfo", res.data);
-          this.$store.commit('SET_USERINFO', res.data)
+          this.$store.commit("SET_USERINFO", res.data);
           // if (!res.data.nickName) {
           //   uni.showModal({
           //     title: "新用户更新信息",
@@ -474,10 +555,9 @@ export default {
           //       }
           //     }
           //   })
-        })
-
-      })
-    })
+        });
+      });
+    });
 
     // api.user.getInfo().then(res => {
     //   uni.setStorageSync("userInfo", res.data);
@@ -497,7 +577,6 @@ export default {
     //   //     }
     //   //   })
 
-
     //   // }
     // })
     // this.$nextTick(() => {
@@ -506,13 +585,16 @@ export default {
   },
   methods: {
     clickCell(carVideoList) {
-      this.$utils.route.goPage(`/pages/carVideo/moreVideo?active=${this.active}`, null, {
-        carVideoList: carVideoList,
-        active: this.active
-      });
+      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 }),
@@ -558,7 +640,7 @@ export default {
       }
     },
     changeSubject(e) {
-      this.tabQuery.subject = e.detail.title == '科目一' ? 1 : 4;
+      this.tabQuery.subject = e.detail.title == "科目一" ? 1 : 4;
       this.tabQuery.name = e.detail.title;
     },
     goLightMock(e) {
@@ -586,7 +668,7 @@ export default {
 .splitLine {
   width: 750rpx;
   height: 20rpx;
-  background: #F2F3F5;
+  background: #f2f3f5;
 }
 
 .subject {
@@ -598,7 +680,7 @@ export default {
   .subject-tab {
     width: 546rpx;
     height: 80rpx;
-    background: #E3EDFC;
+    background: #e3edfc;
     border-radius: 46rpx;
     position: relative;
     display: flex;
@@ -615,17 +697,14 @@ export default {
 
     .subject-slider {
       border-radius: 46rpx;
-      background: -webkit-linear-gradient(left, #26A1EE, #498EF5);
-      ;
+      background: -webkit-linear-gradient(left, #26a1ee, #498ef5);
       width: 300rpx;
       height: 100%;
       position: absolute;
 
       z-index: 10;
     }
-
   }
-
 }
 
 .two {
@@ -636,8 +715,6 @@ export default {
   flex-wrap: wrap;
   background: #fff;
 
-
-
   .two-item {
     position: relative;
 
@@ -798,9 +875,7 @@ swiper-item {
   font-size: $uni-app-fontsize-paragraph;
   white-space: nowrap;
 
-
   #tabs {
-
     height: 800rpx;
   }
 
@@ -817,7 +892,6 @@ swiper-item {
     align-content: flex-start;
     align-items: flex-start;
     padding: 0 30rpx;
-
   }
 }