更换视频组件

src/views/share-merge-detail.vue

@@ -22,8 +22,25 @@
         <img v-show="project.status == 5" class="banner-img-5" src="../images/status-keep-on.png" />
         <img v-show="project.status == 10" class="banner-img-10" src="../images/status-end-cme.png" />
       </div>
+
       <!-- banner视频 -->
-      <CommonTcPlayer ref="tcPlayerRef" v-if="bannerType == 2" style="flex" :options="videoOptions" @sk-tip="isShowSkDialog=true"></CommonTcPlayer>
+      <div class="video-box" v-if="bannerType == 2">
+        <pica-video 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="播放结束<br />更多其他课程，请前往鹊医App学习" :isSingle="true" rightBtnText="去云鹊医App" @btnClick="btnClick" />
+          </div>
+          <!-- 未登录 -->
+          <div class="cover" v-if="!logged">
+            <course-covers coverTips="登录后马上学习课程" :isSingle="true" rightBtnText="去登录" @btnClick="goLogin" />
+          </div>
+        </pica-video>
+      </div>
+      
       <!-- <div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard" >
         <span :class="{'android': isAndroid}">继续学习</span>
       </div> -->
@@ -223,6 +240,7 @@ import { Toast } from "vant";
 import BindCardButtonShare from "@/components/cme/bind-card-button-share";
 import ChangeCard from "@/components/cme/change-card";
 import CourseCovers from "@/components/course/course-covers";
+import PicaVideo from '@/components/course/pica-video';
 
 let cataOffsetTop = 0;
 let intorOffsetTop = 0;
@@ -231,7 +249,7 @@ let titleOffsetHeight = 50;
 export default {
   data() {
     return {
-      // token: "9B62E5874DA94979A54DB3E9DFC1443F",
+      coverType: 0,
       downloadTips: "打开云鹊医APP",
       isWeb: window.__isWeb,
       isAndroid: __isAndroid,
@@ -291,7 +309,7 @@ export default {
       showLoading: false,
       projectId: "1",
       contentList: [],
-      bannerType: 1, // 1 图片 2视频
+      bannerType: 2, // 1 图片 2视频
       videoOptions: {
         mp4: "",
         autoplay: false, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
@@ -355,7 +373,8 @@ export default {
     NoMoreContent,
     BindCardButtonShare,
     ChangeCard,
-    CourseCovers
+    CourseCovers,
+    PicaVideo
   },
 
   computed: {
@@ -399,6 +418,18 @@ export default {
       });
     },
 
+    // 视频播放结束
+    onVideoEnd(opt) {
+      if (opt.type === 1) {
+        this.coverType = 2;
+      } else if (opt.type === 2) { // 试看结束
+        this.coverType = 1;
+      }
+    },
+    onReplay() {
+      this.coverType = 0;
+    },
+
     btnClick() {
       this.goLogin();
     },
@@ -760,6 +791,15 @@ export default {
           // 判断是否是mp4
           if(mp4Url.lastIndexOf('.mp4') > 0) {
             _this.bannerType = 2;
+            this.$nextTick( () => {
+              console.log('_this.$refs.picaVideo', _this.$refs.picaVideo);
+              _this.$refs.picaVideo.switchUrl({
+                url: mp4Url,
+                proved: _this.videoOptions.trySeeTime,
+                enable: true,
+              });
+            })
+
           } else {
             if (res.data.attachmentType == 2) {
               _this.videoOptions.mp4 = res.data.attachmentUrl;
@@ -1024,6 +1064,10 @@ export default {
       height: 30px;
     }
   }
+  .video-box{
+    position: relative;
+    height: 210px;
+  }
   .list-container {
     // margin-bottom: 40px;
     .sk-btn-cover {