视频列表

src/api/modules/carVideo.js

@@ -138,6 +138,14 @@ class CarVideo {
 		})
 
 	}
+	//教学视频
+	studentVideoTeachingList(params){
+		return request({
+			url:"student/video/teaching/list",
+			params
+		})
+
+	}
 }
 
 

src/otherPages/courseCatalog/components/courseCatalog.vue

@@ -98,7 +98,7 @@ export default {
         url: item.videoUrl,
       });
       uni.navigateTo({
-        url: "/otherPages/playVideo/index?query=" + queryJson,
+        url: "/otherPages/playUrlVideo/index?query=" + queryJson,
       });
     },
     buyRoadCourse() {

src/otherPages/playStorageVideo/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <view class="bg">
+        <video class="video" :src="query.src" show-snapshot-button object-fit="contain" >
+
+        </video>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                query:{
+                    src:''
+                }
+             
+            }
+        },
+        onLoad(query){
+            
+            this.query.src =uni.getStorageSync('storageVideoUrl')
+            
+        }
+        
+    }
+</script>
+
+<style lang="scss" scoped>
+.bg{
+    width: 100%;
+}
+.video{
+    width: 100%;
+}
+</style>

src/otherPages/videoSubjectList/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="videoList">
+    <div class="list">
+      <div class="list-title">书籍视频解说</div>
+
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        @click="goPlayVideo(item)"
+      >
+        <div class="list-item">
+          <div style="position: relative">
+            <image
+              class="list-item-play"
+              alt=""
+              src="https://ct.zzxcx.net/ctjk/h5/videoList/play.png"
+            />
+            <image
+              mode="widthFix"
+              style="width: 44.5vw"
+              alt=""
+              :src="item.videoCover"
+            />
+          </div>
+
+          <div class="list-item-name">{{ item.videoName }}</div>
+        </div>
+      </view>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "@/api";
+import utils from "@/utils";
+export default {
+  data() {
+    return {
+      query: {},
+      list: [
+        {
+          createTime: "2023-02-20 14:46:40",
+          id: 1,
+          state: 1,
+          updateTime: "2023-02-20 15:13:57",
+          videoCover: "https://ct.zzxcx.net/ctjk/h5/videoList/km1.png",
+          videoName: "01小车科目一ABS题",
+          videoSubject: 1,
+          videoUrl:
+            "https://mp.weixin.qq.com/s?__biz=Mzg2OTkwMDU0OA==&mid=2247483656&idx=1&sn=61381ded69ebe20d8c0fedc7e77ee0ce&chksm=ce974963f9e0c075bb209fde63d128a97936eb65694d373853c6352584acc645085f42f7b9d5#rd",
+        },
+      ],
+    };
+  },
+  methods: {
+    goPlayVideo(item) {
+      let query = Object.assign({}, this.query);
+      query.paramsMode = 2
+      uni.setStorageSync("storageWebSrc", item.videoUrl);
+      uni.navigateTo({
+        url: "/pages/extraWeb/index?" + utils.mapToUrlQuery(query),
+      });
+    },
+  },
+  onLoad(query) {
+    this.query = query;
+    api.carVideo
+      .studentVideoTeachingList({
+        videoSubject: query.subject,
+      })
+      .then((res) => {
+        this.list = res.rows;
+      });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.videoList {
+  width: 750rpx;
+  .list {
+    width: 690rpx;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    position: relative;
+    padding-top: 0px;
+    justify-content: space-between;
+    .list-title {
+      width: 100%;
+      color: #0a1a33;
+      font-size: 34rpx;
+      font-weight: bold;
+      padding: 30rpx;
+      padding-left: 0rpx;
+    }
+    .list-item {
+      width: 334rpx;
+      height: auto;
+      margin-bottom: 30rpx;
+      position: relative;
+      overflow-x: hidden;
+    }
+    .list-item-name {
+      font-size: 34rpx;
+      text-align: center;
+      width: 100%;
+      overflow-x: hidden;
+      padding: 10rpx 0px;
+      color: black;
+      text-align: left;
+    }
+    .list-item-play {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60rpx;
+      height: 60rpx;
+    }
+    .list-item-title {
+      color: #fff;
+    }
+    .list-item-jiao {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+}
+
+.left40 {
+  left: 40rpx;
+}
+.top128 {
+  top: 128rpx;
+}
+.top54 {
+  top: 54rpx;
+}
+</style>

src/pages.json

@@ -47,7 +47,6 @@
         "enablePullDownRefresh": false
       }
     },
-    
     {
       "path": "pages/lightMock/index",
       "style": {
@@ -213,13 +212,25 @@
       "root": "otherPages",
       "pages": [
         {
-          "path": "marked/index",
+          "path": "videoSubjectList/index",
           "style": {}
         },
         {
-          "path": "playVideo/index",
+          "path": "marked/index",
           "style": {}
         },
+        {
+          "path": "playStorageVideo/index",
+          "style": {
+            "navigationBarTitleText": "播放视频"
+          }
+        },
+        {
+          "path": "playUrlVideo/index",
+          "style": {
+            "navigationBarTitleText": "播放视频"
+          }
+        },
         {
           "path": "teacherVideo/index",
           "style": {}
@@ -441,7 +452,7 @@
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8",
     "usingComponents": {
-      "van-empty":"./wxcomponents/vant/empty/index",
+      "van-empty": "./wxcomponents/vant/empty/index",
       "van-overlay": "./wxcomponents/vant/overlay/index",
       "van-tabbar": "./wxcomponents/vant/tabbar/index",
       "van-tabbar-item": "./wxcomponents/vant/tabbar-item/index",
@@ -479,13 +490,16 @@
       "van-grid-item": "wxcomponents/vant/grid-item/index",
       "van-nav-bar": "wxcomponents/vant/nav-bar/index"
     }
-
-   
   },
   "condition": {
     //模式配置，仅开发期间生效
     "current": 0, //当前激活的模式(list 的索引项)
     "list": [
+      {
+        "path": "otherPages/videoSubjectList/index",
+        "name": "视频列表",
+        "query": "liceCar=1&liceTruck=&liceBus=&liceMoto=&name=&gs=xc&cert=C1/C2/C3&vehicle=轿车&subject=1&title=精选考题&sort=3"
+      },
       {
         "path": "otherPages/teacherVideo/index",
         "name": "教学视频",

src/pages/extraWeb/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <web-view :src="src"></web-view>
+    <web-view :src="query.src"></web-view>
   </div>
 </template>
 
@@ -9,9 +9,10 @@ import utils from "@/utils/index";
 export default {
   data() {
     return {
-      query: {},
-      src: "",
-      params:""
+      query: {
+        src: "",
+      },
+      params: "",
     };
   },
   methods: {
@@ -19,10 +20,12 @@ export default {
   },
   onLoad(query) {
     this.query = query;
-    this.params = query.params||"{}"
-    
-    JSON.parse(this.params)
-    this.src = this.query.src+'?'+utils.mapToUrlQuery(JSON.parse(this.params||{}));
+    if (query.paramsMode == "1") {
+      this.query.src = query.src;
+    }
+    else if(query.paramsMode == "2"){
+      this.query.src = uni.getStorageSync('storageWebSrc')
+    }
   },
 };
 </script>