添加视频组件

src/views/share-merge-detail.vue

@@ -23,13 +23,39 @@
         <img v-show="project.status == 10" class="banner-img-10" src="../images/status-end-cme.png" />
       </div>
       <!-- banner视频 -->
-      <CommonTcPlayer
+      <!-- <CommonTcPlayer
         ref="tcPlayerRef"
         v-if="bannerType == 2"
         style="flex"
         :options="videoOptions"
         @sk-tip="isShowSkDialog=true"
-      ></CommonTcPlayer>
+      ></CommonTcPlayer> -->
+
+      <pica-video v-if="bannerType == 2" ref="picaVideo" @onVideoEnd="onVideoEnd" @onReplay="onReplay">
+        <!-- 试看结束 -->
+        <div class="cover" v-if="logged && coverType === 1">
+          <course-covers coverTips="试看结束<br />请来云鹊医App学习完整课程" :isSingle="true" rightBtnText="学习完整课程" @btnClick="btnClick" />
+        </div>
+        <!-- 付费课程，下载App -->
+        <div class="cover" v-if="logged && coverType === 2">
+          <course-covers coverTips="本课程为付费课程，请来云鹊医App学习" :isSingle="true" rightBtnText="去云鹊医App" @btnClick="btnClick" />
+        </div>
+        <!-- 下一个提示 -->
+        <div class="next-countdown" v-if="coverType === 3">3秒后播放下一节</div>
+        <!-- 未学完提示 -->
+        <div class="cover" v-if="logged && coverType === 4">
+          <course-covers coverTips="您已学习至最后一节<br />但本课程中仍有未学完的内容" :isSingle="true" rightBtnText="继续学完本课程" @btnClick="btnClick" />
+        </div>
+        <!-- 已学完，无考试 -->
+        <div class="cover" v-if="logged && coverType === 5">
+          <course-covers coverTips="您已完成全部学习<br />来云鹊医App参加考试巩固学习成果" leftBtnText="返回项目" @btnClick="btnClick" />
+        </div>
+        <!-- 未登录 -->
+        <div class="cover" v-if="!logged">
+          <course-covers coverTips="登录后马上学习课程" :isSingle="true" rightBtnText="去登录" @btnClick="goLogin" />
+        </div>
+      </pica-video>
+
       <!-- <div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard">
         <span :class="{'android': isAndroid}">继续学习</span>
       </div> -->
@@ -200,6 +226,7 @@ import BindCardButtonShare from "@/components/cme/bind-card-button-share";
 import ChangeCard from "@/components/cme/change-card";
 import CourseCovers from "@/components/course/course-covers";
 import DownloadButton from "@/components/course/download-button";
+import PicaVideo from '@/components/course/pica-video';
 
 let cataOffsetTop = 0;
 let intorOffsetTop = 0;
@@ -208,6 +235,7 @@ let titleOffsetHeight = 50;
 export default {
   data() {
     return {
+      coverType: 0,
       // token: "9B62E5874DA94979A54DB3E9DFC1443F",
       downloadTips: "打开云鹊医APP",
       isWeb: window.__isWeb,
@@ -320,7 +348,8 @@ export default {
     BindCardButtonShare,
     ChangeCard,
     CourseCovers,
-    DownloadButton
+    DownloadButton,
+    PicaVideo
   },
 
   computed: {
@@ -356,6 +385,62 @@ export default {
   methods: {
     ...mapActions(["setUserInfo", "goLogin"]),
 
+
+    // 视频播放结束
+    onVideoEnd(opt) {
+      if (opt.type === 1) {
+        let chapters = deepCopy(this.chapters);
+        let curtI = 0;
+        let curtJ = 0;
+        let curtIndex = 0;
+        let count = 0;
+        let prev; // 第一个未完成的
+        for (let i = 0; i < chapters.length; i++) {
+          let lectures = chapters[i]['lectures'];
+          for (let j = 0; j < lectures.length; j++) {
+            count += 1;
+            let lecture = lectures[j];
+            if (this.curtLectureId === lecture.lectureId) {
+              curtIndex = count;
+              curtI = i;
+              curtJ = j;
+              lecture.progress = 1;
+              lecture.statusText = '已学习';
+              lecture.btnText = '复习课程';
+            }
+            if (!prev && lecture.progress < 1) {
+              prev = { ...lecture }
+            }
+          }
+        }
+        if (curtIndex === count) { // 最后一个
+          if (prev) {
+            this.coverType = 4;
+            this.prev = prev;
+          } else {
+            this.coverType = 5;
+            this.course.status = 3;
+          }
+        } else { // 3秒后播放下一个
+          let next = chapters[curtI]['lectures'][curtJ + 1] || chapters[curtI + 1]['lectures'][0];
+          this.coverType = 3;
+          setTimeout(() => {
+            this.selectLecture(next);
+          }, 3000)
+        }
+        this.chapters = chapters;
+      } else if (opt.type === 2) { // 试看结束
+        this.coverType = 1;
+      }
+    },
+    onReplay() {
+      this.coverType = 0;
+    },
+    goLogin() {
+      this.$store.dispatch('goLogin');
+    },
+
+
     btnClick() {
       this.goLogin();
     },