首页新增视频模块

src/otherPages/buyVip/index.vue

@@ -1,5 +1,6 @@
 <template>
   <view>
+    <!--#ifdef MP-WEIXIN  -->
     <m-nav-bar title="开通会员" :transparent="true" />
     <div v-if="!isIos" class="buyvip-box">
       <img class="top-img" :src="topImg" alt="头部背景" />
@@ -42,7 +43,11 @@
       </div>
       <div style="height: 60px"></div>
     </div>
-    <view class="" style="width: 100%; text-align: center;display:flex;flex-wrap:wrap" v-if="isIos">
+    <view
+      class=""
+      style="width: 100%; text-align: center; display: flex; flex-wrap: wrap"
+      v-if="isIos"
+    >
       <input
         class="active-input"
         v-model="activeCode"
@@ -50,21 +55,126 @@
         placeholder="请输入激活码"
       />
       <button class="active-sure">确定</button>
-      <view class="" style="color:#b6b6b6;text-align:center;width:100%;margin-top:15rpx;">如有疑问,请联系客服</view>
+      <view
+        class=""
+        style="
+          color: #b6b6b6;
+          text-align: center;
+          width: 100%;
+          margin-top: 15rpx;
+        "
+        >如有疑问,请联系客服</view
+      >
     </view>
+    <!-- #endif -->
+
+    <!-- #ifdef MP-TOUTIAO -->
+    <userHead></userHead>
+    <view class="content">
+      <view class="vip">
+        <view
+          class="vip-item"
+          style="background: #e1e9f5; border: 2rpx solid #498ef5"
+          @click="
+            () => {
+              vipCodeVisible = true;
+            }
+          "
+        >
+          <view class="vip-item-icon"> <image :src="jihuoma"></image> </view>
+          <text style="font-size: 26rpx; color: #498ef5; margin-left: 18rpx"
+            >激活码激活</text
+          >
+        </view>
+        <view
+          v-if="ios_vip_open || !isIos"
+          class="vip-item"
+          style="background: #feeaee; border: 2px solid #fe2c55"
+        >
+          <view>
+            <view @click="buy" style="display: flex; align-items: center">
+              <view class="vip-item-icon"> <image :src="douyin"></image> </view>
+
+              <text style="font-size: 26rpx; color: #fe2c55; margin-left: 18rpx"
+                >抖音充值激活\n
+                <text
+                  ><text style="font-size: 36rpx">{{ price }}元</text>
+                  <text
+                    style="margin-left: 12rpx; text-decoration: line-through"
+                    >{{ orginPrice }}元</text
+                  ></text
+                >
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <van-overlay :show="vipCodeVisible">
+      <view class="popUps">
+        <view class="content">
+          <view
+            @click="
+              () => {
+                vipCodeVisible = false;
+              }
+            "
+            class="close"
+          >
+            <van-icon name="cross" size="24px" />
+          </view>
+
+          <view
+            style="
+              width: 100%;
+              text-align: center;
+              font-size: 30rpx;
+              margin-top: 20rpx;
+            "
+            >提示</view
+          >
+          <view
+            style="
+              width: 100%;
+              text-align: center;
+              color: #5c6066;
+              font-size: 26rpx;
+              margin-top: 40rpx;
+            "
+            >您还未开通系统，请输入激活码开通！</view
+          >
+          <input
+            v-model="vipCode"
+            placeholder-style="font-size:13px"
+            class="content-input"
+            placeholder="请输入激活码"
+          />
+          <view @click="sendVipCode" class="content-open"> 立即开通 </view>
+        </view>
+      </view>
+    </van-overlay>
+    <!-- #endif -->
   </view>
 </template>
 
 <script>
 import topImg from "./top-background.png";
 import api from "@/api/index";
+import userHead from "./component/userHead.vue";
+import douyin from "@/assets/img/douyin.png";
+import jihuoma from "@/assets/img/jihuoma.png";
 export default {
-
   data() {
     return {
       isIos: false,
+      douyin,
+      jihuoma,
       activeCode: "",
       ios_vip_open: 0,
+      price: 0,
+      orginPrice: 0,
+      vipCodeVisible: false,
+      vipCode: "",
       goodsList: [
         {
           searchValue: null,
@@ -130,6 +240,8 @@ export default {
   },
   methods: {
     buy(e) {
+      let that = this;
+      //#ifdef MP-WEIXIN
       api.buy
         .studentXcxWxPrepareOrder({
           dictCode: this.goodsList[this.goodsIndex].dictCode,
@@ -137,8 +249,36 @@ export default {
         .then((res) => {
           uni.requestPayment({
             ...res.data,
+            success(res) {
+              that.$store.dispatch("GetInfo");
+            },
           });
         });
+      //#endif
+      //#ifdef MP-TOUTIAO
+      api.buy.studentTtPrepareOrder().then((res) => {
+        uni.pay({
+          orderInfo: res.data,
+          service: 5,
+          success(res) {},
+        });
+        that.$store.dispatch("GetInfo");
+      });
+
+      //#endif
+    },
+    sendVipCode() {
+      api.code
+        .studentVipCode({
+          vipCode: this.vipCode,
+        })
+        .then((res) => {
+          uni.showToast({
+            title: res.msg,
+            icon: "none",
+          });
+          this.$store.dispatch("GetInfo");
+        });
     },
   },
   mounted() {
@@ -148,10 +288,23 @@ export default {
       this.ios_vip_open = Number(res.data);
     });
     this.isIos = systemInfo.platform == "ios";
-    // this.isIos = true;
+    //#ifdef MP-WEIXIN
     api.buy.systemDictDataType("vip_type_price").then((res) => {
       this.goodsList = res.data;
     });
+    //#endif
+    //#ifdef MP-TOUTIAO
+    this.goodsIndex = 0;
+    api.buy.systemConfigConfigKey("vip_price").then((res) => {
+      this.price = res.data;
+    });
+    api.buy.systemConfigConfigKey("vip_price_original").then((res) => {
+      this.orginPrice = res.data;
+    });
+    //#endif
+  },
+  components: {
+    userHead,
   },
 };
 // import { getVipPrice, prepareOrder } from "@/api";
@@ -173,7 +326,7 @@ export default {
   height: 70rpx;
   line-height: 70rpx;
 }
-.active-sure{
+.active-sure {
   margin: 0 auto;
   width: 200rpx;
   height: 70rpx;
@@ -327,7 +480,78 @@ export default {
 
       &:active {
         background-color: red;
-     
+      }
+    }
+  }
+}
+.popUps {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+
+  .content {
+    width: 590rpx;
+    height: 480rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    display: flex;
+    justify-content: center;
+    align-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    position: relative;
+    .close {
+      position: absolute;
+      right: 30rpx;
+    }
+    .content-input {
+      width: 500rpx;
+      height: 60rpx;
+      background: rgba(242, 243, 245, 0.39);
+      border: 2rpx solid #e8e8e8;
+      opacity: 1;
+      border-radius: 30rpx;
+      padding-left: 15rpx;
+      margin-top: 40rpx;
+    }
+    .content-open {
+      width: 200rpx;
+      height: 60rpx;
+      font-size: 26rpx;
+      background: #498ef5;
+      border-radius: 30rpx;
+      margin-top: 40rpx;
+      color: #fff;
+      line-height: 60rpx;
+      text-align: center;
+    }
+  }
+}
+.content {
+  padding-top: 20rpx;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  .vip {
+    display: flex;
+    justify-content: space-between;
+    .vip-item {
+      width: 334rpx;
+      height: 200rpx;
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      align-items: center;
+      border-radius: 20rpx;
+      .vip-item-icon {
+        width: 42rpx;
+        height: 48rpx;
+        > image {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
   }

src/pages.json

@@ -183,6 +183,19 @@
         "navigationStyle": "default"
         // #endif
       
+      }
+    },
+    {
+      "path": "pages/carVideo/moreVideo",
+      "style": {
+        "disableScroll": true,
+        // #ifdef MP-WEIXIN
+        "navigationStyle": "custom"
+        // #endif
+        // #ifdef MP-TOUTIAO
+        "navigationStyle": "default"
+        // #endif
+      
       }
     }
   ],
@@ -480,6 +493,16 @@
         "path":"otherPages/selectRulePaper/index",
         "query": "liceCar=1&liceTruck=&liceBus=&liceMoto=&name=%E7%A7%91%E7%9B%AE%E4%B8%80&gs=xc&cert=C1%2FC2%2FC3&vehicle=%E8%BD%BF%E8%BD%A6&subject=1&title=%E7%B2%BE%E9%80%89%E8%80%83%E9%A2%98&sort=3&__id__=1"
       },
+      {
+        "name":"公众号看视频",
+        "path":"pages/carVideo/videoList",
+        "query": "liceCar=1&liceTruck=&liceBus=&liceMoto=&name=%E7%A7%91%E7%9B%AE%E4%B8%80&gs=xc&cert=C1%2FC2%2FC3&vehicle=%E8%BD%BF%E8%BD%A6&subject=1&title=%E7%B2%BE%E9%80%89%E8%80%83%E9%A2%98&sort=3&__id__=1"
+      },
+      {
+        "name":"查看更多视频",
+        "path":"pages/carVideo/moreVideo",
+        "query": "liceCar=1&liceTruck=&liceBus=&liceMoto=&name=%E7%A7%91%E7%9B%AE%E4%B8%80&gs=xc&cert=C1%2FC2%2FC3&vehicle=%E8%BD%BF%E8%BD%A6&subject=1&title=%E7%B2%BE%E9%80%89%E8%80%83%E9%A2%98&sort=3&__id__=1"
+      },
       {
         "name":"pdf列表",
         "path":"otherPages/pdfList/index",

src/pages/carVideo/components/branchOne.vue

@@ -32,6 +32,7 @@
 		methods: {
 			async sidebarOnChange(e) {
 				this.activeKey = e.detail
+				console.log(e.detail,this.carVideoList)
 				const {data} = await this.$api.carVideo.getCarVideoList(this.carVideoList[this.activeKey].id)
 				this.currentList=data
 			}

src/pages/carVideo/index.vue

@@ -290,9 +290,13 @@
       </view>
       <view
         @click="
-          goPath('/otherPages/selectRulePaper/index', {
-            title: '新规秘卷',
-          },true)
+          goPath(
+            '/otherPages/selectRulePaper/index',
+            {
+              title: '新规秘卷',
+            },
+            true
+          )
         "
         class="two-item"
       >
@@ -300,6 +304,39 @@
         <text style="color: #3b917a" 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>
 
@@ -332,6 +369,8 @@ export default {
     freeUseBg,
     newRulesBg,
     subjectMap: ["科目一", "科目二", "科目三", "科目四"],
+    recomVideos0: [],
+    recomVideos3: [],
     tabQuery: {
       liceCar: 1,
       liceTruck: "",
@@ -548,6 +587,8 @@ export default {
     let { data } = await this.$api.carVideo.getTreeList();
     console.log(data);
     this.typeList = data;
+    this.recomVideos0 = data[0].children[0];
+    this.recomVideos3 = data[3].children[0];
     this.loading = false;
     this.$store.dispatch("GetInfo");
 
@@ -556,13 +597,19 @@ export default {
     // });
   },
   methods: {
+    clickCell(carVideoList) {
+      this.$utils.route.goPage(`/pages/carVideo/moreVideo?active=${this.active}`, null, {
+        carVideoList: carVideoList,
+        active:this.active
+      });
+    },
     goPath(url, extraQuery = {}, needVip = false) {
-      console.log(this.$store.getters.isVip)
+      console.log(this.$store.getters.isVip);
       if (needVip && !this.$store.getters.isVip) {
         uni.showToast({
-          title:"需要vip才能使用该功能",
-          icon:"none"
-        })
+          title: "需要vip才能使用该功能",
+          icon: "none",
+        });
         return;
       }
       uni.navigateTo({
@@ -797,4 +844,19 @@ swiper-item {
 .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;
+  }
+}
 </style>

src/pages/carVideo/moreVideo.vue

@@ -0,0 +1,82 @@
+<template>
+  <view>
+    <branchOne
+      v-if="!loading && active == 0"
+      :carVideoList="typeList[0].children"
+    ></branchOne>
+    <branchOne
+      v-if="!loading && active == 3"
+      :carVideoList="typeList[3].children"
+    ></branchOne>
+  </view>
+</template>
+
+<script>
+import branchOne from "./components/branchOne.vue";
+export default {
+  data() {
+    return {
+      query: {},
+      active: 0,
+      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,
+    };
+  },
+  onLoad(query) {
+    this.query = query;
+    this.active = query.active;
+  },
+  components: {
+    branchOne,
+  },
+  async mounted() {
+    let { data } = await this.$api.carVideo.getTreeList();
+    this.typeList = data;
+    this.loading = false;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>

src/pages/carVideo/videoList.vue

@@ -44,7 +44,7 @@ export default {
   },
   async onReady() {
 
-    await this.$store.dispatch("Login");
+    // await this.$store.dispatch("Login");
     await this.$store.dispatch("GetInfo");
   },
   data: () => ({