添加空白页和视频默认图

src/components/course/pica-video.vue

@@ -2,6 +2,7 @@
   <div
     class="pica-video"
     :style="{position: isFullScreen ? 'fixed' : ''}">
+    <template v-if="isWechat">
       <video
         :id="vid"
         :src="url"
@@ -77,6 +78,8 @@
       </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>
+