视频

common/commonJS.js

@@ -13,6 +13,8 @@ export default {
     //         return oss访问图片地址 + img + '?x-oss-process=image/format,webp'; }
  
     // },
+
+    
     showToast(title, icon) {
         return uni.showToast({
             title: title,

main.js

@@ -95,6 +95,8 @@ Vue.component("mescroll-body", MescrollBody);
 // Vue.component('music-play', musicPlay);
 import commonList from '@/pages/component/commonComponents/list.vue'
 Vue.component('common-list', commonList);
+import commonVideo from '@/pages/component/commonComponents/video/index.nvue'
+Vue.component('common-video', commonVideo);
 import commonGoodsList from '@/pages/component/commonComponents/goodsList.vue'
 Vue.component('common-goods-list', commonGoodsList);
 import commonCurriculumList from '@/pages/component/commonComponents/curriculum.vue'

pages/component/commonComponents/curriculumVideo.vue

@@ -2,15 +2,22 @@
   <view class="richDetail">
     <!-- 公共组件-每个页面必须引入 -->
 
-    <view class="detail_title video_box">
+    <view
+      scroll-x="true"
+      class="detail_title video_box"
+      style="background-color: #fff"
+    >
+    
       <view
         v-for="(v, i) in dataList"
-        class="video_item"
+        :class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
-        @click="handleClick(v)"
+        @click="handleClick(v,i)"
       >
+  
         【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
       </view>
     </view>
+
     <slot name="richHeadImg"></slot>
 
     <!-- <view>{{ detailInfo.content }}</view> -->
@@ -21,7 +28,7 @@
 import $http from "@/config/requestConfig.js";
 import { mapState } from "vuex";
 export default {
-  props: ["detailInfo", "dataList"],
+  props: ["detailInfo", "dataList", "currentVideo"],
   components: {},
   data() {
     return {};
@@ -160,7 +167,7 @@ export default {
   }
 
   .detail_title {
-    padding: 0 40rpx 0;
+    padding: 0 20rpx 0;
     font-size: 26rpx;
     line-height: 65rpx;
     font-weight: bold;
@@ -190,13 +197,15 @@ export default {
 
 .video_box {
   width: 100%;
-
+  // height: 100rpx;
   .video_item {
     width: 24%;
-    margin-right: 1%;
+    margin-right: 10rpx;
+    margin-bottom: 20rpx;
     float: left;
-    background: #018f89;
+    border: 2rpx solid #018f89;
-    color: #fff;
+    background: #fff;
+    color: #018f89;
     text-align: center;
     border-radius: 10rpx;
     box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
@@ -206,4 +215,8 @@ export default {
     margin-right: 0;
   }
 }
+.hot {
+  background-color: #018f89 !important;
+  color: #fff !important;
+}
 </style>

pages/component/commonComponents/video/StaticADComponent.js

@@ -0,0 +1,33 @@
+
+export default class StaticADComponent {
+  constructor(adAddress, toAddress) {
+    this.adAddress = adAddress;
+    this.toAddress = toAddress;
+    this.$html = $(html);
+  }
+
+  createEl(el) {
+    this.$html.find(".ad").attr("src", this.adAddress);
+    this.$html.attr("href", this.toAddress);
+    let $adWrapper = this.$html.find(".ad-wrapper");
+    $adWrapper.attr("href", this.toAddress);
+    $adWrapper.click(() => {
+      Aliplayer.util.stopPropagation();
+    });
+    this.$html.find(".close").click(() => {
+      this.$html.hide();
+    });
+    $(el).append(this.$html);
+  }
+
+  ready(player, e) {}
+
+  play(player, e) {
+    this.$html.hide();
+  }
+
+  pause(player, e) {
+    this.$html.show();
+  }
+}
+

pages/component/commonComponents/video/index.nvue

@@ -0,0 +1,744 @@
+<template>
+  <view class="container" style="background-color: #000; position: relative">
+     <!-- <u-icon
+      @click="goBack"
+      name="arrow-left"
+      color="#3ab3ae"
+      size="20"
+      :style="`display: inline-block; position: absolute; top: ${
+        statusBarHeight + 2
+      }px; left: ${10}px;z-index: 999;`"
+    ></u-icon>-->
+    <view style="width: 100%; height: 30vh" v-if="currentVideo.type == 1">
+      <div
+        style="background-color: #000"
+        ref="videoContent"
+        @tap="renderScript.handleClick"
+        id="url-player-test"
+        :videoData="videoData"
+        :currentVideoList="currentVideoList"
+        :firstTime="firstTime"
+        :change:videoData="renderScript.receiveMsg"
+        :change:firstTime="renderScript.receiveFirstTime"
+        :change:currentVideoList="renderScript.receiveVideoList"
+      ></div>
+      <div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
+        直接调用renderjs中的emitData的方法,传递当前播放时长
+      </div>
+      <div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
+        监听结束方法，记录播放时长
+      </div></view
+    >
+    <view style="width: 100%; height: 30vh; position: relative" v-else>
+      <video
+        @timeupdate="videoTimeUpdateEvent($event)"
+        ref="videos"
+        style="width: 100%; height: 100%"
+        autoplay
+        id="videoId"
+        object-fit="contain"
+        class="video-box"
+        :src="videoUrl"
+        :poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
+        @play="playVideo"
+      >
+        <cover-view style="position: absolute; top: 10px; z-index: 80">
+          <cover-view class="returnBack" @click="goBack">
+            <uni-icons type="back" size="26" color="#fff"></uni-icons>
+            <text class="txt">返回</text>
+          </cover-view>
+        </cover-view>
+        <!-- <cover-view v-if="isFullScreen && isControl">
+          <view class="right_title">
+            <view class="returnBack" @click="quitScreen">
+              <uni-icons type="back" size="26" color="#fff"></uni-icons>
+              <text class="txt">返回</text>
+            </view>
+            <view class="right_handle">
+            
+              <uni-icons type="star" size="30" color="#fff"></uni-icons>
+              <uni-icons type="redo-filled" size="30" color="#fff"></uni-icons>
+            </view>
+          </view>
+        </cover-view> -->
+      </video>
+    </view>
+  </view>
+</template>
+<script>
+import $http from "@/config/requestConfig.js";
+import { mapState, mapMutations } from "vuex";
+
+// importScripts('@/static/aliplayer/aliplayer-min.js')
+export default {
+  props: ["currentVideo", "currentVideoList"],
+  data() {
+    return {
+      //当前是否是全屏模式
+      isFullScreen: false,
+      isControl: true,
+      timer: null,
+      videoTitle: "",
+      videoList: [],
+      firstTime: 0,
+      options: {},
+      playAuth: "",
+      currentTime: "",
+      videoId: "",
+      videoData: {},
+      isSetFirstTime: false,
+      screenType: null,
+      videoUrl: null,
+    };
+  },
+  computed: {
+    ...mapState(["videoOssList"]),
+  },
+  watch: {
+    currentVideo: {
+      immediate: true,
+      handler(newRoute) {},
+    },
+  },
+  // //页面显示
+  mounted() {},
+  async onUnload() {
+    uni.navigateTo({
+      url: "/pages/curriculum/order/curriculum/back",
+    });
+    // #ifdef APP-PLUS
+    plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
+
+    // plus.screen.lockOrientation("portrait-primary");
+    // #endif
+    this.timer = null;
+    await this.setVideoTime();
+    this.player.dispose();
+  },
+
+  //第一次加载
+  onLoad(options) {
+    console.log(options, "这是传参");
+    // #ifdef APP-PLUS
+
+    setTimeout(() => {
+      plus.screen.unlockOrientation();
+      plus.screen.lockOrientation("landscape-primary");
+    }, 10);
+    //	#endif
+
+    // #ifdef APP-PLUS
+
+    // plus.screen.lockOrientation("portrait-primary");
+    // #endif
+    if (uni.getStorageSync("videoOssList")) {
+      this.videoList = JSON.parse(uni.getStorageSync("videoOssList"));
+    }
+
+    console.log("this.videoList at line 53:", this.videoList);
+
+    this.options = JSON.parse(options.data);
+
+    this.videoId = this.options.video;
+
+    this.timer = setInterval(() => {
+      var that = this;
+      if (this.currentTime) {
+        that.setVideoTime();
+      }
+    }, 60000 * 10);
+  },
+
+  methods: {
+    screenChange(e) {
+      let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
+      if (!fullScreen) {
+        //退出全屏
+        this.isFullScreen = false;
+      } else {
+        this.isFullScreen = true;
+      }
+    },
+    // 控制器的显示隐藏
+    controlChange(e) {
+      this.isControl = e.detail.show;
+    },
+    quitScreen() {
+      // 退出全屏
+      const ctx = this.$refs.myVideo;
+      ctx.exitFullScreen();
+    },
+    // 播放进度改变
+    videoTimeUpdateEvent(e) {
+      console.log("e at line 78:", e);
+      this.playTime = parseInt(e.detail.currentTime);
+      this.allTime = parseInt(e.detail.duration);
+      console.log("视频播放时长", this.playTime, "视频总时长", this.allTime);
+
+      this.recordTime({
+        time: this.playTime,
+      });
+    },
+    async init(data) {
+      console.log("at line 59:", "是否先走这里");
+      if (uni.getStorageSync("videoOssList")) {
+        this.videoList = JSON.parse(uni.getStorageSync("videoOssList"));
+      }
+      this.options = data.currentVideo;
+      console.log("this.options at line 64:", this.options);
+      this.videoId = this.options.video;
+      this.timer = setInterval(async () => {
+        var that = this;
+        if (this.currentTime) {
+          await that.setVideoTime();
+        }
+      }, 60000 * 10);
+      await this.getLive();
+    },
+    getData(data) {
+      console.log(
+        "data at line 这是接口拿回来的时长11111111111111111111:",
+        this.videoData.userCourseVideoPositionEntity
+      );
+      if (!this.isSetFirstTime) {
+        var netWork = this.videoData.userCourseVideoPositionEntity
+          ? this.videoData.userCourseVideoPositionEntity.position
+          : 0;
+        var list = JSON.parse(uni.getStorageSync("videoOssList"));
+        console.log("这是获取接口 设置的起始时长", netWork);
+        var index = list.findIndex((e) => e.id == this.videoData.id);
+
+        if (netWork) {
+          if (index >= 0) {
+            this.firstTime =
+              list[index].time > netWork ? list[index].time : netWork;
+          } else {
+            this.firstTime = netWork ? netWork : 0;
+          }
+        } else {
+          if (index >= 0) {
+            this.firstTime = list[index].time ? list[index].time : 0;
+          } else {
+            this.firstTime = 0;
+          }
+        }
+
+        uni.setStorageSync("videoOssList", JSON.stringify(list));
+        console.log(
+          "list at line 这是设置完第一次初始值9777777777777777777770:",
+          list
+        );
+        if (this.currentVideo.type == 0 || this.currentVideo.type == 2) {
+          this.playVideo();
+        }
+        console.log(this.firstTime, "1111111111111111111111");
+        this.isSetFirstTime = true;
+      }
+    },
+    playVideo(e) {
+      this.videoContext = uni.createVideoContext("videoId", this);
+
+      this.videoContext.seek(this.firstTime);
+      //   this.videoContext.requestFullScreen();
+    },
+    recordTime(data) {
+      this.currentTime = data.time;
+      console.log("data at line 54:", data);
+      var list = [];
+      if (uni.getStorageSync("videoOssList")) {
+        list = JSON.parse(uni.getStorageSync("videoOssList"));
+      }
+
+      console.log("list at line 56:", list);
+      console.log("点击后设置播放时长的方法list at line 65:", list);
+      var index = list.findIndex((e) => e.id == this.videoData.id);
+      if (list.length > 0 && index >= 0) {
+        list[index] = {
+          ...this.videoData,
+
+          time: data.time,
+        };
+      } else {
+        list.push({
+          ...this.videoData,
+          time: data.time,
+        });
+      }
+
+      uni.setStorageSync("videoOssList", JSON.stringify(list));
+
+      console.log(list, "走接口的方法参数");
+    },
+    // 获取数据
+    getLive() {
+      var data = {
+        ...this.options,
+      };
+
+      $http
+        .request({
+          url: `sociology/course/checkVideo`,
+          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
+          data,
+          header: {
+            //默认 无 说明：请求头
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 252111111111111111111111111111:", res);
+          if (this.currentVideo.type == 1) {
+            var playAuth = res.video.playAuth.replace(/=/g, "");
+            this.videoData = {
+              ...res.video,
+              videoId: res.video.video,
+              playAuth: playAuth,
+            };
+            this.playAuth = playAuth;
+          } else {
+            this.videoData = res.video;
+            this.videoUrl =
+              // "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/video/taiHuClass/" +
+              res.video.videoUrl;
+            this.$nextTick(async () => {
+              await this.getData();
+            });
+          }
+
+          this.$forceUpdate();
+        });
+    },
+    async handleEnd() {
+      var list = JSON.parse(JSON.stringify(uni.getStorageSync("videoOssList")));
+
+      var data = list.find((e) => e.id == this.videoData.id);
+
+      this.currentTime = data.time;
+
+      await this.setVideoTime();
+      this.timer = null;
+    },
+    setVideoTime(time) {
+      var data = {
+        videoId: this.videoData.id,
+        position: this.currentTime, //秒数
+      };
+      console.log("data at line =存储视频时长接口:", data);
+      $http
+        .request({
+          // url: "book/buyOrder/buySave",
+          url: `sociology/course/saveCoursePosition`,
+          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
+          data,
+          header: {
+            //默认 无 说明：请求头
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 185:", res);
+          //   console.log("data at line 5911111:", this.videoData);
+          this.$forceUpdate();
+        });
+    },
+    changePlayerTime(player) {
+      console.log("this.firstTime at line 106:", this.firstTime);
+      player.seek(this.firstTime);
+    },
+    goBack() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+  },
+
+  created() {},
+};
+</script>
+
+<script module="renderScript" lang="renderjs">
+import StaticADComponent from './StaticADComponent.vue'
+//  import AliplayerComponents from 'aliplayercomponents';
+/**
+  * 静态广告组件
+  */
+
+
+export default {
+/**
+* 静态广告组件
+*/
+
+ components: {
+    StaticADComponent
+  },
+    mounted() {
+        // 在适合的生命周期，通过script和link标签引入播放器sdk、css
+        console.log(this.options, '这是monted')
+        this.loadWebPlayerSDK()
+        this.loadComponent()
+    },
+    data() {
+        return {
+            player: null,
+            curTime: null,
+            curStatus: null,
+            // currentTime:null,
+        }
+    },
+
+
+    watch: {
+
+
+        curTime(val) {
+            if (this.curTime !== null && this.curStatus !== null) {
+                this.$refs.videoContent1.click()
+            }
+        }
+    },
+
+    methods: {
+
+        handleClick(event, ownerInstance) {
+            console.log('event at line 165:', event)
+//             this.player.on('ready',function(){
+//    var status=  this.player.fullscreenService.getIsFullScreen()
+//    console.log('status at line 403:', status)
+// console.log('触发点击事件',status))
+//   })
+
+            ownerInstance.callMethod('getData')
+
+        },
+        emitData(event, ownerInstance) {
+            var that = this;
+
+            ownerInstance.callMethod('recordTime', {
+                time: that.curTime,
+                status: that.curStatus
+            })
+
+        },
+        endEmitData(event, ownerInstance) {
+            var that = this;
+
+            ownerInstance.callMethod('handleEnd', )
+        },
+        getLive() {
+if(this.videoData.type==1){
+//   var StaticADComponent = Aliplayer.Component({
+//     init:function(adAddress,toAddress)
+//     {
+//       this.adAddress = adAddress;
+//       this.toAddress = toAddress;
+//       this.$html = $(html);
+//     },
+//     createEl:function(el)
+//     {
+//       this.$html.find('.ad').attr('src',this.adAddress);
+//       var $adWrapper = this.$html.find('.ad-wrapper');
+//       $adWrapper.attr('href',this.toAddress);
+//       $adWrapper.click(function(){
+//         Aliplayer.util.stopPropagation();
+//       });
+//       this.$html.find('.close').click(function(){
+//         this.$html.hide();
+//       });
+//       $(el).append(this.$html);
+//     },
+//     ready:function(player,e)
+//     {
+//     },
+//     play:function(player,e)
+//     {
+//        this.$html.hide();
+//     },
+//     pause:function(player,e)
+//     {
+//        this.$html.show();
+//     }
+// });
+
+console.log('this.currentVideoList at line 456111111111111111111111:', this.videoList)
+     var player = new Aliplayer({
+                id: "url-player-test",
+                "vid": this.videoData
+                    .videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
+                "playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
+                "encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
+                "playConfig": {
+                    "EncryptType": 'AliyunVoDEncryption'
+                },
+                width: '100%', //容器的大小
+                // videoWidth: '100vw', //容器的大小
+                // videoHeight: '100vh', //容器的大小
+                height: '30vh', //容器的大小
+                components: [
+                  {
+  name: 'BulletScreenComponent',
+  type: AliPlayerComponent.BulletScreenComponent,
+  /** Descriptions of the scrolling text component parameters: text, style, bulletPosition
+   * text: The scrolling text
+   * style: The style of the scrolling text
+   * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
+   */
+  args: ['本课程版权归天津众妙之门科技有限公司所有，翻版必究!', {fontSize: '16px', color: 'red',}, 'random']
+},
+{name:'adComponent',type:StaticADComponent,args:['http://example.aliyundoc.com/cover.png']},
+
+
+
+{
+  name: 'RotateMirrorComponent',
+  type: AliPlayerComponent.RotateMirrorComponent
+},
+
+
+],
+    //             components: [{
+    //   name: 'PlaylistComponent',
+    //   type: AliPlayerComponent.PlaylistComponent,
+    //   args: [this.currentVideoList.map(e=>{
+    //     e.name=1;
+
+
+    //     e.vid= e.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
+    //             e.playauth= this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
+    //            e.encryptType= 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
+    //             e.playConfig= {
+    //                 "EncryptType": 'AliyunVoDEncryption'
+    //             }
+
+    //   })]
+    // }],
+                skinLayout:[
+   {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
+    {name: "H5Loading", align: "cc"},
+    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
+    {name: "infoDisplay"},
+    {name:"tooltip", align:"blabs",x: 0, y: 56},
+    {name: "thumbnail"},
+    {
+      name: "controlBar", align: "blabs", x: 0, y: 0,
+      children: [
+        {name: "progress", align: "blabs", x: 0, y: 44},
+        {name: "playButton", align: "tl", x: 15, y: 12},
+        {name: "timeDisplay", align: "tl", x: 10, y: 7},
+        {name: "fullScreenButton", align: "tr", x: 10, y: 12},
+        {name:"subtitle", align:"tr",x:15, y:12},
+        {name:"setting", align:"tr",x:15, y:12},
+        {name:"prism-speed-selector", align:"tr",x:15, y:12},
+        {name: "volume", align: "tr", x: 5, y: 10}
+      ]
+    }
+  ]
+
+            }, function(player) {
+
+
+
+            });
+
+
+
+            this.player = player;
+            this.$refs.videoContent.click()
+
+var timer = setInterval(() => {
+    var that = this;
+    that.curTime = parseInt(this.player.getCurrentTime());
+    that.curStatus = this.player.getStatus()
+
+}, 1000);
+// player.on('ready',function(){
+//      player.fullscreenService.requestFullScreen()
+
+//   })
+this.player.on('ended', function() {
+    console.log('that.curTime at line 242:', this.curTime)
+    console.log('that.curStatus at line 210:', this.curStatus)
+    this.$refs.videoContent2.click()
+
+})
+}
+
+
+            // player.setRotate(90)
+
+            //全屏播放
+
+            // player.one('canplay', function() {
+            //     // console.log('canplay', this.player.tag);
+            //     player.tag.play();
+
+            // });
+
+
+
+        },
+        receiveScreenType(newValue) {
+            console.log('newValue at line 427屏幕方向111111111111:', newValue)
+
+        },
+        receiveFirstTime(newValue, oldValue, ownerVm, vm) {
+            // //数据变化
+
+            console.log('newValue111', newValue)
+
+            console.log('vm4444', vm)
+            console.log('this.firstTime at line 215:', newValue)
+            if (this.player) {
+                this.player.seek(newValue);
+            }
+
+
+        },
+        receiveVideoList(newValue, oldValue, ownerVm, vm) {
+            // //数据变化
+
+            console.log('currentVideoListcurrentVideoListcurrentVideoList', newValue)
+
+
+
+
+
+        },
+        receiveMsg(newValue, oldValue, ownerVm, vm) {
+            //数据变化
+            console.log('newValue', newValue)
+            console.log('oldValue', oldValue)
+            console.log('ownerVm', ownerVm)
+            console.log('vm', vm)
+        },
+        checkValue() {
+            console.log(this.videoId, this.authId, "1111888888")
+            if (!this.videoData.playAuth||!this.currentVideoList) {
+                setTimeout(() => {
+                    this.checkValue();
+                }, 1000);
+            } else {
+
+console.log('this.videoList at line 这是这只只是594:', this.currentVideoList)
+                this.getLive();
+            }
+        },
+        loadWebPlayerSDK() {
+            return new Promise((resolve, reject) => {
+
+
+
+                const s_tag = document.createElement('script'); // 引入播放器js
+                s_tag.type = 'text/javascript';
+                s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
+                s_tag.charset = 'utf-8';
+                s_tag.onload = () => {
+                  const s_tag1 = document.createElement('script'); // 引入播放器js
+                s_tag1.type = 'text/javascript';
+                s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js';
+                s_tag1.charset = 'utf-8';
+                s_tag1.onload = () => {
+                    this.checkValue();
+                    resolve();
+
+                }
+                document.body.appendChild(s_tag1);
+
+                }
+                document.body.appendChild(s_tag);
+
+
+
+                const l_tag = document.createElement('link'); // 引入播放器css
+                l_tag.rel = 'stylesheet';
+                l_tag.href =
+                    'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
+
+
+
+                document.body.appendChild(l_tag);
+            });
+        },
+        loadComponent() {
+            // return new Promise((resolve, reject) => {
+            //     const s_tag = document.createElement('script');
+            //     s_tag.type = 'text/javascript';
+            //     // 需要先下载组件 js 文件，放到项目 /static/ 目录下
+            //     // 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
+            //     s_tag.src = '@/static/aliplayercomponents.js';
+            //     s_tag.charset = 'utf-8';
+            //     s_tag.onload = () => {
+            //         resolve();
+            //     }
+            //     document.body.appendChild(s_tag);
+            // });
+        }
+    }
+}
+</script>
+<style>
+.container {
+  width: 100vw;
+  height: auto;
+  /deep/.pause {
+    width: 60rpx !important;
+    height: 60rpx !important;
+  }
+}
+
+.fds {
+  background-color: blue;
+  height: 600rpx;
+  position: fixed;
+  top: 60rpx;
+}
+
+.returnBack {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 88rpx;
+  padding-left: 20rpx;
+}
+
+.txt {
+  color: #fff;
+}
+
+.right_title {
+  background: #000;
+  height: 96rpx;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  margin-left: auto;
+}
+
+.return {
+  flex-direction: row;
+  align-items: center;
+  color: #fff;
+}
+
+.right_handle {
+  width: 200rpx;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-right: 20rpx;
+}
+
+cover-view {
+  display: block;
+  line-height: 1.2;
+  overflow: hidden;
+  white-space: nowrap;
+  pointer-events: auto;
+}
+cover-view {
+  visibility: visible !important;
+}
+
+cover-image {
+  visibility: visible !important;
+}
+</style>

pages/component/commonComponents/video/videoDetail.vue

@@ -0,0 +1,375 @@
+<template>
+  <view class="container commonPageBox commonDetailPage" style="position: relative;">
+     <!-- <cover-view class="image_box">
+
+
+      <image
+     
+        src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"
+        mode="aspectFit"
+        class="headImage"
+        style="background-color: #f5f5f5"
+       
+      >
+      </image>
+
+
+
+    </cover-view> -->
+    <video
+      @fullscreenchange="fullscreenchange"
+      @timeupdate="videoTimeUpdateEvent($event)"
+      ref="videos"
+      style="width: 100%; height: 100%"
+      autoplay
+      id="videoId"
+      
+      object-fit="contain"
+      class="video-box"
+      :src="videoUrl"
+      :poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
+      @play="playVideo"
+    >
+    <!-- <cover-image class="controls-play img"  src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"></cover-image>
+      
+    -->
+  </video>
+  
+  </view>
+</template>
+
+<script>
+import courseDescription from "@/pages/component/commonComponents/list";
+import price from "../price/index.vue";
+
+import $http from "@/config/requestConfig.js";
+import { mapState } from "vuex";
+export default {
+  components: {
+    courseDescription, //课程说明
+    price, //课程价格
+  },
+  data() {
+    return {
+      timer: null,
+      videoUrl: "",
+      currentTime: 0,
+      firstTime: 0,
+
+      options: {},
+      videoData: {},
+      isSetFirstTime: false,
+      currentVideoTime: "", //初始播放时长（秒）
+      urlList: {
+        detail: "sociology/course/getCourseCatalogueChapterDetail",
+        curriculumInfo: "app/phone.do?getCourseInfo",
+      },
+    };
+  },
+  async onUnload() {
+    this.timer = null;
+    // #ifdef APP-PLUS
+    uni.navigateTo({
+      url: "/pages/curriculum/order/curriculum/back",
+    });
+   
+    plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
+   
+    // plus.screen.lockOrientation("portrait-primary");
+    // #endif
+    await this.setVideoTime();
+
+    // #ifdef APP-PLUS
+    // plus.screen.lockOrientation("portrait-primary");
+    // #endif
+  },
+  onLoad(options) {
+    // uni.navigateTo({
+    //   url: "/pages/curriculum/order/curriculum/back",
+    // });
+    // #ifdef APP-PLUS
+    plus.screen.lockOrientation("landscape-primary");
+    // plus.screen.lockOrientation("portrait-primary");
+    // #endif
+
+    this.options = JSON.parse(options.data);
+    this.getLive();
+
+    this.timer = setInterval(() => {
+      var that = this;
+      if (this.currentTime) {
+        that.setVideoTime();
+      }
+    }, 60000 * 10);
+  },
+  onHide() {
+    // this.showSearchList = false
+    // this.searchList = []
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  methods: {
+    // 播放进度改变
+    videoTimeUpdateEvent(e) {
+      console.log("e at line 78:", e);
+      this.playTime = parseInt(e.detail.currentTime);
+      this.allTime = parseInt(e.detail.duration);
+      console.log("视频播放时长", this.playTime, "视频总时长", this.allTime);
+
+      this.recordTime({
+        time: this.playTime,
+      });
+    },
+
+    recordTime(data) {
+      this.currentTime = data.time;
+      console.log("data at line 54:", data);
+      var list = [];
+      if (uni.getStorageSync("videoList")) {
+        list = JSON.parse(uni.getStorageSync("videoList"));
+      }
+
+      console.log("点击后设置播放时长的方法list at line 65:", list);
+      var index = list.findIndex((e) => e.id == this.videoData.id);
+      if (list.length > 0 && index >= 0) {
+        list[index] = {
+          ...this.videoData,
+
+          time: data.time,
+        };
+      } else {
+        list.push({
+          ...this.videoData,
+          time: data.time,
+        });
+      }
+
+      uni.setStorageSync("videoList", JSON.stringify(list));
+
+      console.log(list, "走接口的方法参数");
+    },
+    //是否全屏
+    fullscreenchange(e) {
+      if (!e.target.fullScreen) {
+        uni.navigateBack({
+          delta: 1,
+        });
+        // plus.screen.lockOrientation("default");
+      }
+    },
+
+    getData(data) {
+      console.log(
+        "data at line 这是接口拿回来的时长11111111111111111111:",
+        this.videoData.userCourseVideoPositionEntity.position
+      );
+      if (!this.isSetFirstTime) {
+        var netWork = this.videoData.userCourseVideoPositionEntity
+          ? this.videoData.userCourseVideoPositionEntity.position
+          : 0;
+        var list = [];
+        if (uni.getStorageSync("videoList")) {
+          list = JSON.parse(uni.getStorageSync("videoList"));
+        }
+        console.log("这是获取接口 设置的起始时长", netWork);
+        var index = list.findIndex((e) => e.id == this.videoData.id);
+
+        if (netWork) {
+          if (index >= 0) {
+            this.firstTime =
+              list[index].time > netWork ? list[index].time : netWork;
+          } else {
+            this.firstTime = netWork ? netWork : 0;
+          }
+        } else {
+          if (index >= 0) {
+            this.firstTime = list[index].time ? list[index].time : 0;
+          } else {
+            this.firstTime = 0;
+          }
+        }
+
+        uni.setStorageSync("videoList", JSON.stringify(list));
+        console.log(
+          "list at line 这是设置完第一次初始值9777777777777777777770:",
+          list
+        );
+
+        console.log(this.firstTime, "1111111111111111111111");
+
+        this.playVideo();
+        this.isSetFirstTime = true;
+      }
+    },
+    setVideoTime(time) {
+      var data = {
+        videoId: this.videoData.id,
+        position: this.currentTime, //秒数
+      };
+      console.log("data at line =存储视频时长接口:", data);
+      $http
+        .request({
+          // url: "book/buyOrder/buySave",
+          url: `sociology/course/saveCoursePosition`,
+          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
+          data,
+          header: {
+            //默认 无 说明：请求头
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 185:", res);
+          //   console.log("data at line 5911111:", this.videoData);
+          this.$forceUpdate();
+        });
+    },
+    playVideo(e) {
+      this.videoContext = uni.createVideoContext("videoId", this);
+
+      this.videoContext.seek(this.firstTime);
+      this.videoContext.requestFullScreen();
+    },
+    async getLive() {
+      var data = {
+        ...this.options,
+      };
+      console.log("data at line 57:", data);
+      $http
+        .request({
+          // url: "book/buyOrder/buySave",
+          url: `sociology/course/checkVideo`,
+          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
+          data,
+          header: {
+            //默认 无 说明：请求头
+            "Content-Type": "application/json",
+          },
+        })
+        .then((res) => {
+          console.log("res at line 252:", res);
+          this.videoData = res.video;
+          this.videoUrl =
+            // "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/video/taiHuClass/" +
+            res.video.videoUrl;
+
+          this.$nextTick(async () => {
+            await this.getData();
+          });
+          // var playAuth = res.video.playAuth.replace(/=/g, "");
+          // this.videoData = {
+          // 	...res.video,
+          // 	videoId: res.video.video,
+          // 	playAuth: playAuth,
+          // };
+          // this.playAuth = playAuth;
+
+          console.log("data at line 5911111:", this.videoData);
+          this.$forceUpdate();
+        });
+    },
+    openVideo(data) {
+      console.log("data at line 380:", data.type);
+
+      var mynavData = JSON.stringify(data); // 这里转换成 字符串
+      if (data.type == 0) {
+        //视频云点播
+        uni.navigateTo({
+          url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
+        });
+      } else if (data.type == 1) {
+        uni.navigateTo({
+          url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
+        });
+      }
+
+      //   uni.navigateTo({
+      //     // url: '../bookShop/commodityDetail?id=' + item.id
+      //     url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
+      //   });
+    },
+    hancleModalCancel() {
+      this.show = false;
+    },
+    handleClickMore(v, i, status) {
+      console.log("i at line 357:", i);
+      this.$set(this.correlationiList[i], "isOpen", status);
+      // [i].=!this.correlationiList[i].isOpen;
+    },
+    hancleModalConfirm() {
+      var data = {
+        values: {
+          customerType: "D",
+          token: uni.getStorageSync("token"),
+          customerOid: uni.getStorageSync("customerOid"),
+          ...this.taiHuClassInfo,
+        },
+      };
+      // $mars.progressBegin('申请中...');
+      // $mars.post(customerType, 'applyRelearn', data, function (ret) {
+      //     api.hideProgress();
+
+      //     fnLoadDataGrid();
+      // });
+    },
+
+    // 检查是有权限使用搜索功能
+    checkDisable() {
+      console.log("点击了");
+    },
+    // 显示无权限弹窗
+    // showNoRights() {
+    // 	let that = this
+    // 	uni.showModal({
+    // 		content: "",
+    // 		confirmText: '好的',
+    // 		showCancel: false,
+    // 		success: function(res) {
+    // 			if (res.confirm) {
+    // 				// console.log('用户点击确定');
+    // 				that.clear()
+    // 			}
+    // 		}
+    // 	})
+    // },
+
+    // 放大图片
+    previewImage(url) {
+      console.log(url);
+      uni.previewImage({
+        urls: [url],
+        longPressActions: {
+          itemList: ["很抱歉，暂不支持保存图片到本地"],
+          success: function (res) {
+            // console.log(res,'+++++')
+          },
+        },
+      });
+    },
+  },
+  onBackPress() {
+    // #ifdef APP-PLUS
+    plus.key.hideSoftKeybord();
+    // #endif
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+
+
+
+.video-box{
+  position: relative;
+}
+.image_box{
+  background-color: red;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

pages/curriculum/cate/index.vue

@@ -19,7 +19,8 @@
     >
       <common-list
         noDataIcon="data"
-        :isCondition="true" :isLoadingHide="isLoadingHide"
+        :isCondition="true"
+        :isLoadingHide="isLoadingHide"
         @lower="onReachBottom1"
         :pagination="pagination"
         :dataList="dataList"
@@ -39,9 +40,11 @@
             mode="aspectFil"
             class="book_image"
           ></image>
-          <view class="related_courses_name hidden1">{{
+          <view
-            slotProps.row.title
+            class="related_courses_name hidden1"
-          }}</view>
+            :style="`${slotProps.row.buy ? 'color:#43A181' : ''}`"
+            >{{ slotProps.row.title }}</view
+          >
 
           <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
         </template>
@@ -59,7 +62,8 @@ export default {
     list,
   },
   data() {
-    return { isLoadingHide: false,
+    return {
+      isLoadingHide: false,
       playData: {},
       options: {},
       searchValue: "",
@@ -149,7 +153,7 @@ export default {
     },
 
     getData() {
-      this.isLoadingHide=false
+      this.isLoadingHide = false;
       this.$http
         .request({
           url: this.urlList.list,
@@ -166,8 +170,8 @@ export default {
         .then((res) => {
           console.log("res at line 289:", res);
           this.pagination.total = res.courses.total;
-          if( res.courses.total==0){
+          if (res.courses.total == 0) {
-            this.isLoadingHide=true
+            this.isLoadingHide = true;
           }
           this.dataList = [...this.dataList, ...res.courses.records];
         });
@@ -630,6 +634,7 @@ export default {
 
 .searchList {
   .item {
+  
     font-size: 28rpx;
     padding: 20rpx;
     border-bottom: 1px solid #dadbde;

pages/curriculum/order/curriculum/detail.vue

@@ -2,20 +2,60 @@
   <view class="container commonPageBox commonDetailPage">
     <!-- 公共组件-每个页面必须引入 -->
     <public-module></public-module>
-    <z-nav-bar bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
+    <z-nav-bar
-
+      bgColor="#333"
-    <view class="contentBox commonPageContentBox curriculum_box">
+      fontColor="#fff"
-      <!-- <view class="curriulum_box">
+      :title="options.navTitle"
-                <view class="curriulum_title_box">
+    ></z-nav-bar>
-                    <view class="curriulum_title">{{ curriculumData.courseTitle
-                        }} 介绍</view>
-                    <view class="buy">购买</view>
 
+    <view
+      class="contentBox curriculum_box"
+      :style="`height:calc(100% - ${60 + statusBarHeight}px !important;`"
+    >
+      <view :style="`background:#000`">
+        <common-video
+          v-if="isfresh"
+          ref="commonVideo"
+          :currentVideo="currentVideo"
+          :currentVideoList="videoArray"
+        >
+        </common-video>
+        <view style="height: 30vh" v-else></view>
       </view>
 
-            </view> -->
+      <!-- <common-sticky
-      <view class="curriculum_content">
+        style=""
-        <common-rich-detail :detailInfo="curriculumData">
+        itemStyle="width:auto; height: 80rpx;font-size:20rpx;color:#fff"
+        :list="ordersTabs"
+        label="name"
+        :currentCateIndex="currentCateIndex"
+        @handleselectCate="ordersTabCLi"
+      ></common-sticky> -->
+
+      <scroll-view
+        :style="`height:calc(100% - 30vh - 40rpx) ;`"
+        scroll-y="true"
+        class="scroll-Y"
+        style="background-color: #fff"
+      >
+        <view class="PM_font" style="padding: 20rpx;font-size: 40rpx;color: #3ab3ae;">视频教学</view>
+        <view class="scroll-view-item">
+          <view style="padding: 20rpx; margin-bottom: 40rpx">
+            {{ curriculumData.title }}
+          </view>
+          <common-curriculum-video
+            v-if="videoArray.length > 0"
+            :detailInfo="curriculumData"
+            :currentVideo="currentVideo"
+            :dataList="videoArray"
+            @open="changeVideo"
+          >
+          </common-curriculum-video>
+        </view>
+
+        <view class="PM_font" style="padding: 20rpx;font-size: 40rpx;color: #333;">文章简介</view>
+        <view class="scroll-view-item">
+          <common-rich-detail :detailInfo="{ ...curriculumData, title: '' }">
             <template #richHeadImg>
               <image
                 :src="curriculumData.imgUrl"
@@ -26,100 +66,13 @@
               <!-- <image :src="detailInfo.imgUrl" v-if="detailInfo.imgUrl" mode="widthFix" class="headImage"></image> -->
             </template>
           </common-rich-detail>
+        </view>
+      </scroll-view>
       <p class="aui-text-danger" style="text-align: center">
         本课程版权归天津众妙之门科技有限公司所有，翻版必究!
       </p>
-      </view>
 
-      <!-- <view :class="`priceDetail`" v-if="this.statusList[this.currentStatusIndex].type == 'price'">
+      <!-- <view class="small_class_teaching_box" v-if="medicalCasesList.length > 0">
-
-                <scroll-view scroll-y="true" class="scroll-Y">
-                    <price ref="priceDetail" type="price" :oid="this.statusList[this.currentStatusIndex].oid"></price>
-
-                </scroll-view>
-
-
-
-
-            </view>
-            <view :class="`priceDetail`" v-else-if="this.statusList[this.currentStatusIndex].type == 'purchaseNotice'">
-
-                <scroll-view scroll-y="true" class="scroll-Y">
-                    <price ref="purchaseNotice" :oid="this.statusList[this.currentStatusIndex].oid"></price>
-
-                </scroll-view>
-
-
-
-
-            </view>
- -->
-
-      <!-- <view :class="`dataList `">
-
-                <courseDescription :isCondition="true" :dataList="dataList" @hancleClick="gotoDetail" label="title">
-                    <template slot="labelSlot" slot-scope="slotProps">
-                        <text :class="`${slotProps.row.viewFlg == 1 ? 'aui-text-success' : ''}`">{{ slotProps.row.title
-                            }}</text>
-
-                   
-
-
-                    </template>
-
-                    <template slot="leftSlot" slot-scope="slotProps">
-                  
-
-
-
-                    </template>
-                    <template slot="rightSlot" slot-scope="slotProps">
-                   
-
-
-
-                        <text class="fdButtonBox aui-text-success" v-if="slotProps.row.conditions != '03'">试听</text>
-
-
-
-                        <view>
-
-
-                        </view>
-
-                    </template>
-
-                </courseDescription>
-
-
-
-
-
-            </view> -->
-
-      <view class="small_class_teaching_box" v-if="videoArray.length > 0">
-        <view class="small_class_teaching_top">
-          <view class="small_class_teaching_top_left">
-            <image
-              src="@/static/icon/course_ic.png"
-              mode="aspectFil"
-              class="icon1"
-            ></image>
-            <text style="font-weight: 700">视频教学</text>
-          </view>
-        </view>
-        <view class="small_class_teaching_content">
-          <common-curriculum-video
-            :detailInfo="curriculumData"
-            :dataList="videoArray"
-            @open="openVideo"
-          >
-          </common-curriculum-video>
-          <!-- <curriculum-mp3 v-if="isOpenMp3" :detailInfo="curriculumData" :dataList="videoArray" @open="openVideo" ref="mp3Detail">
-					</curriculum-mp3> -->
-        </view>
-      </view>
-      <view class="small_class_teaching_box" v-if="medicalCasesList.length > 0">
         <view class="small_class_teaching_top">
           <view class="small_class_teaching_top_left">
             <image
@@ -159,11 +112,9 @@
                 slotProps.row.title
               }}</view>
 
-              <!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
              </template>
 
             <template slot="rightSlot" slot-scope="slotProps">
-              <!-- {{ slotProps.row.bxType }} -->
          
               <text class="aui-text-danger">
                 ￥{{ slotProps.row.courseFee }}</text
@@ -198,7 +149,6 @@
                 style="display: inline-block; margin-right: 10rpx"
               ></u-icon>
             </template>
-            <!-- <image src="@/static/icon/course_ic.png" mode="aspectFil" class="icon1"></image> -->
             <text
               :style="`color:${v.color ? v.color : '#71d5a1'}`"
               class="title"
@@ -255,7 +205,7 @@
             style="display: inline-block; margin-left: 10rpx"
           ></u-icon>
         </view>
-      </view>
+      </view> -->
     </view>
 
     <!-- <u-modal
@@ -286,6 +236,10 @@ export default {
   },
   data() {
     return {
+      isfresh: false,
+      currentCateIndex: 0,
+      currentVideo: {},
+      videoList: {},
       isOpenMp3: false,
       praise: "",
       reward: "",
@@ -304,8 +258,8 @@ export default {
       curriculumInfo: {},
       fdButtonStyle: {
         width: "120rpx",
-        "border-color": "$themeColor",
+        "border-color": "#000",
-        color: "$themeColor",
+        color: "#000",
         float: "right",
         "margin-right": "20rpx",
         "margin-left": "30rpx",
@@ -316,28 +270,15 @@ export default {
       playData: {},
       taiHuClassInfo: {},
       searchValue: "",
-      teachingList: [
+      ordersTabs: [
         {
-          title: "临床实践",
+          name: "视频教学",
 
-          type: "02",
+          type: "1",
-          apiUrl: "app/phoneDoctor.do?getTaiHuToShine",
         },
         {
-          title: "学习问答",
+          name: "文章简介",
-          type: "03",
+          type: "2",
-          oid: "8a9fb99809e4428888aad6b56a3096a6",
-        },
-        {
-          title: "学习心得",
-
-          type: "01",
-        },
-        {
-          title: "在线作业",
-
-          type: "04",
-          oid: "d0f47071c2194e94845fbb373d06f59d",
         },
       ], // 一级分类标题1
       cateList: [], // 一级分类标题1
@@ -345,7 +286,7 @@ export default {
       dataList: [], // 方剂标题
       allDataList: [], // 方剂标题
       currentStatusIndex: 0, // 当前选中的一级分类
-      currentCateIndex: 0, // 当前选中的一级分类
+
       curTwoCateIndex: 0, // 当前选中的二级分类
       searchList: [], // 搜索结果数组
       showSearchList: false,
@@ -374,6 +315,7 @@ export default {
     // this.searchList = []
   },
   onShow() {
+    this.currentCateIndex = 0;
     // #ifdef APP-PLUS
     plus.screen.unlockOrientation(); //解除锁定屏幕方向
     plus.screen.lockOrientation("portrait-primary");
@@ -383,26 +325,42 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
-    openVideo(data) {
+    ordersTabCLi(data) {
+      console.log("i at line 312:", data);
+      this.currentCateIndex = data.index;
+      this.$forceUpdate();
+    },
+    initVideo() {
+      this.isfresh = false;
+      this.$nextTick(() => {
+        this.isfresh = true;
+        setTimeout(() => {
+          this.$refs.commonVideo.init({
+            currentVideo: this.currentVideo,
+            currentVideoList: this.videoArray,
+          });
+        }, 200);
+      });
+    },
+    changeVideo(data) {
+      this.currentVideo = data;
+      this.initVideo();
       this.isOpenMp3 = false;
       console.log("data at line 380111111111111111111:", data.type);
 
-      var mynavData = JSON.stringify(data); // 这里转换成 字符串
+      // var mynavData = JSON.stringify(data); // 这里转换成 字符串
-      console.log(
+
-        mynavData,
+      // if (data.type == 0 || data.type == 2) {
-        "mynavDatamynavDatamynavDatamynavDatamynavDatamynavDatamynavDatass"
+      //   //1 mp4 2 mp3
-      );
+      //   uni.navigateTo({
-      if (data.type == 0 || data.type == 2) {
+      //     url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
-        //1 mp4 2 mp3
+      //   });
-        uni.navigateTo({
+      // } else if (data.type == 1) {
-          url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
+      //   //视频云点播
-        });
+      //   uni.navigateTo({
-      } else if (data.type == 1) {
+      //     url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
-        //视频云点播
+      //   });
-        uni.navigateTo({
+      // }
-          url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
-        });
-      } 
 
       //   else if (data.type == 2) {
       //     //mp3
@@ -461,6 +419,7 @@ export default {
     getCourseDescriptionData() {
       var data = {
         id: this.options.id,
+        load: false,
         // id: "16457",
       };
       var that = this;
@@ -480,6 +439,10 @@ export default {
         .then(async (res) => {
           that.curriculumData = res.data.detail;
           that.videoArray = res.data.videos;
+          if (that.videoArray.length > 0) {
+            this.currentVideo = that.videoArray[0];
+            this.initVideo();
+          }
           // if (res.obj.correlatedList && res.obj.correlatedList.length > 0) {
           //   this.relatedCoursesList =
           //     res.obj.correlatedList && res.obj.correlatedList.length > 0
@@ -912,7 +875,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/style/mixin.scss';
+@import "@/style/mixin.scss";
 .u-grid-list {
   // height: 40rpx;
 }
@@ -932,7 +895,7 @@ export default {
 }
 
 .contentBox {
-  height: calc(100% - 50px);
+  height: 100vh;
 
   .statusList {
     padding: 10rpx;
@@ -1094,7 +1057,6 @@ export default {
 }
 
 .commonDetailPage {
-
 }
 
 .curriulum_box {
@@ -1133,7 +1095,7 @@ export default {
 .small_class_teaching_box {
   width: 100%;
   margin-top: 20rpx;
-  background: #B7E0E2;
+  background: #b7e0e2;
 
   .small_class_teaching_top {
     padding: 20rpx 20rpx 0 10rpx;
@@ -1182,7 +1144,7 @@ export default {
         background: #cef8ea;
         text-align: center;
         border-radius: 10rpx;
-        box-shadow: 0px 0px 6rpx 0px #E9DCCC;
+        box-shadow: 0px 0px 6rpx 0px #e9dccc;
       }
     }
 
@@ -1290,7 +1252,7 @@ export default {
   background: #f4fffb;
 
   border-radius: 10rpx;
-  box-shadow: 0px 0px 6rpx 0px #E9DCCC;
+  box-shadow: 0px 0px 6rpx 0px #e9dccc;
 }
 
 .dashang_box {

pages/curriculum/order/curriculum/index.vue

@@ -21,7 +21,7 @@
         v-if="
           cateList.length > 0 &&
           cateList[currentCateIndex].isBuy == 0 &&
-          vip == '0'
+          vip.type == '0'
         "
       >
         <template slot="rightSlot" slot-scope="slotProps">
@@ -33,7 +33,8 @@
                 ? ''
                 : 'aui-text-danger fdButtonBoxRed'
             } `"
-            >{{
+          >
+            {{
               cateList[currentCateIndex].type == 0 ? "开始学习" : "立即购买"
             }}</text
           >
@@ -41,18 +42,28 @@
           <view> </view>
         </template>
       </u-alert>
+      <u-alert
+        style="position: fixed; width: 100%; z-index: 10"
+        type="warning"
+        @click="handleClickGetGoodsList"
+        :title="`尊贵的VIP会员,您的有效期到 ${vip.endTime.split(' ')[0]}`"
+        :show-icon="true"
+        v-if="cateList.length > 0 && vip.type != 0"
+      >
+      </u-alert>
       <view
         v-if="curriculumData.image"
         :style="`height: auto !important;${
-          cateList.length > 0 &&
+          (cateList.length > 0 &&
             cateList[currentCateIndex].isBuy == 0 &&
-          vip == '0'
+            vip.type == '0') ||
+          vip.type != 0
             ? 'padding-top:80rpx'
             : ''
         }`"
       >
         <image
-        style="width: 100%;"
+          style="width: 100%"
           :src="curriculumData.image"
           mode="widthFix"
           @click="previewImage(curriculumData.image)"
@@ -116,7 +127,7 @@
               type="locked-filled"
               color="#b0b0b0"
               size="24"
-              v-if="slotProps.data.isBuy == 0 && vip == '0'"
+              v-if="slotProps.data.isBuy == 0 && vip.type == '0'"
               style="display: inline-block; margin-left: 10rpx"
             ></uni-icons>
           </template>
@@ -182,7 +193,7 @@
 
             <text
               class="fdButtonBox aui-text-success"
-              v-if="slotProps.row.isAudition == 1 && vip == '0'"
+              v-if="slotProps.row.isAudition == 1 && vip.type == '0'"
               >试听</text
             >
 
@@ -418,7 +429,7 @@ export default {
         "margin-left": "30rpx",
       },
       modalInfo: {},
-      vip: "0",
+      vip: {},
 
       show: false,
       playData: {},
@@ -510,8 +521,8 @@ export default {
     getUserInfo() {
       this.$http.post("common/user/getUserInfo").then((res) => {
         console.log("res at line 505:", res);
-        if (res.result.vip) {
+        if (res.result.userVip) {
-          this.vip = res.result.vip;
+          this.vip = res.result.userVip;
         }
       });
     },
@@ -699,11 +710,11 @@ export default {
       if (
         this.cateList[this.currentCateIndex].isBuy == 1 ||
         v.isAudition == 1 ||
-        this.vip != "0"
+        this.vip.type != "0"
       ) {
         uni.navigateTo({
           // url: '../bookShop/commodityDetail?id=' + item.id
-          url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&detailOid=${v.detailOid}`,
+          url: `/pages/curriculum/order/curriculum/detail?navTitle=${this.options.navTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&detailOid=${v.detailOid}`,
         });
       } else {
         this.$commonJS.showToast("请先购买课程");