添加空白页和视频默认图

src/components/course/pica-video.vue

@@ -2,81 +2,84 @@
   <div
     class="pica-video"
     :style="{position: isFullScreen ? 'fixed' : ''}">
-    <video
-      :id="vid"
-      :src="url"
-      :poster="poster"
-      preload="metadata"
-      webkit-playsinline
-      playsinline
-      x5-playsinline="true"
-      x-webkit-airplay="allow"
-      x5-video-player-type="h5-page"
-      x5-video-player-fullscreen="false"
-      mtt-playsinline="true"
-      controlsList="nodownload"
-      @loadedmetadata="loadedMetaData"
-      @timeupdate="onTimeUpdate"
-      @ended="onEnded"
-      @error="onError"
-    >
-    </video>
-    <div class="video-cover" @click="showControl = !showControl"></div>
-    <!-- 控制栏 -->
-    <div class="control-box" v-show="showControl">
-      <div class="control-bar">
-        <div class="btn-play" :class="{'btn-pause': isPaused}" @click="togglePlay"></div>
-        <div class="progress-box" @click="setProgress">
-          <div class="progress-inner">
-            <div class="progress-bar" :style="progressBar"></div>
-          </div>
-          <div
-            class="progress-ball"
-            :style="{left: `${progressBall}%`}"
-            @touchstart.stop="onBallStart"
-            @touchmove.stop="onBallMove"
-            @touchend.stop="onBallEnd">
-          </div>
-        </div>
-        <div class="time-box">{{ playTime }}/{{ totalTime }}</div>
-        <!-- <div class="rate-box" @click="showRate=true">
-          倍速
-          <div class="rate-list" v-show="showRate">
+    <template v-if="isWechat">
+      <video
+        :id="vid"
+        :src="url"
+        :poster="poster"
+        preload="metadata"
+        webkit-playsinline
+        playsinline
+        x5-playsinline="true"
+        x-webkit-airplay="allow"
+        x5-video-player-type="h5-page"
+        x5-video-player-fullscreen="false"
+        mtt-playsinline="true"
+        controlsList="nodownload"
+        @loadedmetadata="loadedMetaData"
+        @timeupdate="onTimeUpdate"
+        @ended="onEnded"
+        @error="onError"
+      >
+      </video>
+      <div class="video-cover" @click="showControl = !showControl"></div>
+      <!-- 控制栏 -->
+      <div class="control-box" v-show="showControl">
+        <div class="control-bar">
+          <div class="btn-play" :class="{'btn-pause': isPaused}" @click="togglePlay"></div>
+          <div class="progress-box" @click="setProgress">
+            <div class="progress-inner">
+              <div class="progress-bar" :style="progressBar"></div>
+            </div>
             <div
-              class="rate-item"
-              :class="{'rate-active': rate === curtRate}"
-              v-for="rate in rates"
-              :key="rate"
-              @click.stop="selectRate(rate)">{{ rate }}</div>
+              class="progress-ball"
+              :style="{left: `${progressBall}%`}"
+              @touchstart.stop="onBallStart"
+              @touchmove.stop="onBallMove"
+              @touchend.stop="onBallEnd">
+            </div>
           </div>
-        </div> -->
-        <div class="btn-screen" :class="{'btn-screen-mini': isFullScreen}" @click="onFullscreen"></div>
-      </div>
-    </div>
-    <!-- 播放遮罩 -->
-    <transition name="fade">
-      <div v-show="isPaused" class="cover cover-play" @click="togglePlay"></div>
-    </transition>
-    <!-- 播放错误 -->
-    <transition name="fade">
-      <div v-show="showError" class="cover cover-error">
-        <p>播放失败，请确认网络正常或重新进入页面</p>
+          <div class="time-box">{{ playTime }}/{{ totalTime }}</div>
+          <!-- <div class="rate-box" @click="showRate=true">
+            倍速
+            <div class="rate-list" v-show="showRate">
+              <div
+                class="rate-item"
+                :class="{'rate-active': rate === curtRate}"
+                v-for="rate in rates"
+                :key="rate"
+                @click.stop="selectRate(rate)">{{ rate }}</div>
+            </div>
+          </div> -->
+          <div class="btn-screen" :class="{'btn-screen-mini': isFullScreen}" @click="onFullscreen"></div>
+        </div>
       </div>
-    </transition>
-    <!-- 接续播放 -->
-    <transition name="fade">
-      <div v-show="showResume" class="cover cover-resume">
-        <p>上次观看至{{ history > 59 ? `${parseInt(history / 60)}分钟` : `${history}秒` }}，正在续播</p>
+      <!-- 播放遮罩 -->
+      <transition name="fade">
+        <div v-show="isPaused" class="cover cover-play" @click="togglePlay"></div>
+      </transition>
+      <!-- 播放错误 -->
+      <transition name="fade">
+        <div v-show="showError" class="cover cover-error">
+          <p>播放失败，请确认网络正常或重新进入页面</p>
+        </div>
+      </transition>
+      <!-- 接续播放 -->
+      <transition name="fade">
+        <div v-show="showResume" class="cover cover-resume">
+          <p>上次观看至{{ history > 59 ? `${parseInt(history / 60)}分钟` : `${history}秒` }}，正在续播</p>
+        </div>
+      </transition>
+      <!-- 弹窗放在外部处理 -->
+      <slot></slot>
+      <!-- 试看提示 -->
+      <div class="proved-box" v-show="showProved">
+        可试看{{ proved > 59 ? `${parseInt(proved / 60)}分钟` : `${proved}秒` }}，观看完整版请来 <span @click="download">云鹊医App</span>
       </div>
-    </transition>
-    <!-- 弹窗放在外部处理 -->
-    <slot></slot>
-    <!-- 试看提示 -->
-    <div class="proved-box" v-show="showProved">
-      可试看{{ proved > 59 ? `${parseInt(proved / 60)}分钟` : `${proved}秒` }}，观看完整版请来 <span @click="download">云鹊医App</span>
-    </div>
-    <!-- 重新播放，只有试看有 -->
-    <div class="replay-box" v-show="showReplay" @click="onReplay">重新播放</div>
+      <!-- 重新播放，只有试看有 -->
+      <div class="replay-box" v-show="showReplay" @click="onReplay">重新播放</div>
+    </template>
+    <img v-else class="default-img" src="~@/images/video/course_img.png" alt="" />
   </div>
 </template>
 
@@ -126,6 +129,7 @@ export default {
       showError: false, // 播放错误
       showResume: false, // 继续播放
       showReplay: false, // 显示重播
+      isWechat: true, // 微信环境
     }
   },
   computed: {
@@ -135,6 +139,8 @@ export default {
   },
   created() {
     this.vid = `video_${this._uid}`;
+    const ua = navigator.userAgent;
+    this.isWechat = ua.match(/(MicroMessenger)\/([\d.]+)/);
   },
   mounted() {
     const player = document.getElementById(this.vid);
@@ -607,5 +613,15 @@ export default {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
   }
+  .default-img{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    transform: translate3d(-50%, -50%, 0);
+  }
 }
 </style>

src/router/router.js

@@ -5,6 +5,7 @@ const merge = r => require.ensure([], () => r(require('../views/merge-detail')),
 const shareMerge = r => require.ensure([], () => r(require('../views/share-merge-detail')), 'share-merge')
 const test = r => require.ensure([], () => r(require('../views/test-components')), 'test-components')
 const courseDetail = r => require.ensure([], () => r(require('../views/course-detail')), 'course-detail')
+const notFound = r => require.ensure([], () => r(require('../views/not-found')), 'not-found')
 
 export default [{
   path: '/',
@@ -38,5 +39,9 @@ export default [{
       path: '/course-detail',
       component: courseDetail
     },
+    {
+      path: '/not-found',
+      component: notFound
+    },
   ]
 }]

src/views/course-detail.vue

@@ -111,7 +111,7 @@ export default {
         { name: '课件' },
         { name: '讨论' },
       ],
-      curtTabIdx: 1,
+      curtTabIdx: 0,
       tabW: 0, // tab的宽度
       videoH: 0, // 视频区高度
       chapters: [], // 目录
@@ -145,11 +145,11 @@ export default {
     if (token && !info.id) {
       this.$store.dispatch('getUserInfo');
     }
-    // this.projectId = sessionStorage.getItem('projectId');
-    // if (!this.projectId) {
-    //   this.$router.push('')
-    //   return;
-    // }
+    this.projectId = sessionStorage.getItem('projectId');
+    if (!this.projectId) {
+      this.$router.replace('/not-found');
+      return;
+    }
     this.getCourseInfo();
     this.getCourseQas();
     const { height } = this.$el.querySelector('.video-box').getBoundingClientRect();
@@ -159,7 +159,8 @@ export default {
   },
   methods: {
     getCourseInfo() {
-      const { projectId = 797, courseId = 2 } = this.$route.query;
+      const { courseId = 2 } = this.$route.query;
+      const projectId = this.projectId || 797;
       this.showLoading = true;
       this.GET(`/contents/courses/${courseId}/pcCourseInfo`, { projectId }).then(res => {
         this.showLoading = false;
@@ -330,7 +331,8 @@ export default {
       });
     },
     getCourseQas() {
-      const { projectId = 797, courseId = 3 } = this.$route.query;
+      const { courseId = 3 } = this.$route.query;
+      const projectId = this.projectId || 797;
       this.GET(`/contents/courses/v2/${courseId}/qas`, { projectId, pageNo: 1, pageSize: 10 }).then(res => {
         if (res.code == "000000") {
           this.qsList  = res.data.model && res.data.model.qaPostModel || [];

src/views/not-found.vue

+<template>
+  <div class="not-found">
+    <img class="img" src="~@/images/no-content.png" alt="" />
+    <p class="tip">此课程已下架，无法查看</p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.not-found {
+  .img{
+    display: block;
+    width: 120px;
+    margin: 100px auto 0;
+  }
+  .tip{
+    font-size: 15px;
+    text-align: center;
+  }
+}
+</style>
+