create new page

src/App.vue

 <template>
-	<div>
+	<div class="router-container">
 		<transition name="router-fade" mode="out-in">
 			<keep-alive>
-			    <router-view v-if="$route.meta.keepAlive"></router-view>
+			  <router-view v-if="$route.meta.keepAlive"></router-view>
 			</keep-alive>
-    	</transition>
-    	<transition name="router-fade" mode="out-in">
+    </transition>
+    <transition name="router-fade" mode="out-in">
 			<router-view v-if="!$route.meta.keepAlive"></router-view>
 		</transition>
 		<!-- <svg-icon></svg-icon>	 -->
@@ -32,4 +32,7 @@
 	.router-fade-enter, .router-fade-leave-active {
 	  	opacity: 0;
 	}
+  .router-container{
+    height: 100%;
+  }
 </style>

src/main.js

@@ -7,8 +7,7 @@ const mixins = require('@/utils/mixins');
 import '@/utils/rem'					// 引入自适应
 import '@/utils/yqy-bridge'				// 移动端服务
 // import FastClick from 'fastclick'
-import vueFilters from '@/utils/filter'
-import VConsole from 'vconsole/dist/vconsole.min.js'
+import vueFilters from '@/utils/filter';
 import BuriedPoint, { sendBuriedData } from 'web-buried-point';
 import Vant from 'vant';
 import 'vant/lib/index.css';
@@ -17,7 +16,7 @@ import clipboard from 'clipboard';
 Vue.prototype.clipboard = clipboard;
 
 if (!(process.env.BUILD_ENV === 'uat' || process.env.BUILD_ENV === 'pro')) {
-	// if(!(process.env.BUILD_ENV === 'pro')) {
+	const VConsole = require('vconsole');
 	let vConsole = new VConsole() // 初始化
 }
 

src/router/router.js

@@ -3,30 +3,35 @@ import App from '../App'
 const index = r => require.ensure([], () => r(require('../views/index')), 'index')
 const merge = r => require.ensure([], () => r(require('../views/merge-detail')), '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')
 
 export default [{
-    path: '/',
-    component: App,
-    children: [
-        {
-            path: '',
-            redirect: '/index'
-        },
-        {
-            path: '/index',
-            component: index
-        },
-        {
-            path: '/home',
-            component: index
-        },
-        {
-            path: '/coop',
-            component: merge
-        },
-        {
-            path: '/test',
-            component: test
-        },
-    ]
+  path: '/',
+  component: App,
+  children: [
+    {
+        path: '',
+        redirect: '/index'
+    },
+    {
+        path: '/index',
+        component: index
+    },
+    {
+        path: '/home',
+        component: index
+    },
+    {
+        path: '/coop',
+        component: merge
+    },
+    {
+        path: '/test',
+        component: test
+    },
+    {
+      path: '/course-detail',
+      component: courseDetail
+    },
+  ]
 }]

src/style/common.scss

@@ -143,3 +143,6 @@ html,body{
 //     color: #fff !important;
 // }
 
+#app{
+  height: 100%;
+}

src/utils/index.js

@@ -73,7 +73,7 @@ export function setEventByModuleCode(itemData){
   if( modeCode === 'M001' || modeCode === 'M002' || modeCode === 'M003') {
       paramList = ''
   }else if( modeCode === 'M100' || modeCode === 'M300' ) {
-     
+
     let urlPara = getUrlParmByCode(paramList);
     paramList[0] && (paramList[0].value += urlPara);
 
@@ -121,7 +121,7 @@ export function deepCopy(obj) {
 }
 
 export function mergeObjs(...ojbs){
-  
+
 }
 
 // 跳转：在App中使用原生跳转，在浏览器中使用本地路由跳转
@@ -143,4 +143,28 @@ export function gotoPage(context, pageUrl) {
       jsonString: paramList
     });
   }
-}
\ No newline at end of file
+}
+
+function formatNum(n) {
+  return n * 1 < 10 ? `0${n}` : n;
+}
+
+// 传入秒，计算出剩余时间的时分秒
+export function formatLeftTimeObj(time, hasZero = true) {
+  if (typeof time !== 'number') {
+    time = parseInt(time)
+  }
+  // time = parseInt(time / 1000)
+  // const d = parseInt(time / 86400)
+  // time = time - d * 86400
+  const h = parseInt(time / 3600)
+  time = time - h * 3600
+  const f = parseInt(time / 60)
+  const s = parseInt(time - f * 60)
+  return {
+    // d: hasZero ? formatNum(d) : d,
+    h: hasZero ? formatNum(h) : h,
+    f: hasZero ? formatNum(f) : f,
+    s: hasZero ? formatNum(s) : s,
+  }
+}

src/views/course-detail.vue

+<template>
+  <div class="course-detail">
+    <!-- 视频 -->
+    <div class="video-box">
+      <pica-video ref="picaVideo" @onVideoEnd="onVideoEnd" />
+    </div>
+    <!-- 内容滚动 -->
+    <div class="scroll-box">
+      <div class="scroll-content">
+
+      </div>
+    </div>
+    <!-- 打开、下载App -->
+    <div class="download-box">
+      <img src="~@/images/icon-pica.png" alt="logo" />
+      <div class="content">
+        <p class="title">云鹊医</p>
+        <p class="sub-title">高效学习 轻松学医</p>
+      </div>
+      <div class="btn-download">下载</div>
+      <div class="btn-open">打开</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PicaVideo from '@/components/course/pica-video';
+
+export default {
+  components: {
+    PicaVideo
+  },
+  data() {
+    return {
+      isShowDialog: true,
+    };
+  },
+  mounted() {
+    this.$refs.picaVideo.switchUrl({
+      url: 'https://video.yunqueyi.com/TNB/002/01_01_APP_SD.mp4',
+    });
+  },
+  methods: {
+    // 视频播放结束
+    onVideoEnd() {
+
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../style/mixin";
+.course-detail{
+  position: relative;
+  height: 100%;
+  padding-top: px2rem(210px);
+  box-sizing: border-box;
+  .video-box{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: px2rem(210px);
+  }
+  .scroll-box{
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .scroll-content{
+    padding-bottom: px2rem(60px);
+  }
+  .download-box{
+    display: flex;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: px2rem(60px);
+    background-color: #fff;
+    img{
+      display: block;
+      width: px2rem(40px);
+      height: px2rem(40px);
+      margin: px2rem(10px) px2rem(10px) 0 px2rem(15px);
+    }
+    .content{
+      flex: 1;
+      width: 50px;
+      padding-top: px2rem(10px);
+    }
+    .title{
+      font-size: px2rem(16px);
+      line-height: px2rem(22px);
+    }
+    .sub-title{
+      color: #717171;
+      font-size: px2rem(12px);
+      line-height: px2rem(18px);
+    }
+    .btn-download{
+      color: #449284;
+      display: inline-block;
+      height: px2rem(30px);
+      line-height: px2rem(30px);
+      font-size: px2rem(14px);
+      padding: 0 px2rem(15px);
+      margin-right: px2rem(15px);
+      border: 1px solid #449284;
+      border-radius: px2rem(15px);
+    }
+    .btn-open{
+      color: #fff;
+      display: inline-block;
+      height: px2rem(30px);
+      line-height: px2rem(30px);
+      font-size: px2rem(14px);
+      padding: 0 px2rem(15px);
+      margin-right: px2rem(15px);
+      background-color: #449284;
+      border-radius: px2rem(15px);
+    }
+  }
+}
+</style>
+

src/views/index.vue

@@ -248,7 +248,8 @@ export default {
         this.showLoading = false;
         if (res.code == "000000") {
           this.existBind = res.data.existBind || 0;
-          this.titleTestModelList = res.data.titleTestModelList;
+          this.titleTestModelList = res.data.titleTestModelList || [];
+          let len = this.titleTestModelList.length > 0 ? (this.titleTestModelList.length - 1) : 0;
           // 如果有绑定的卡，并且之前没有做定位，则进行定位
           if (this.existBind && !this.hasResetPosition) {
             this.hasResetPosition = true;
@@ -257,8 +258,9 @@ export default {
           } else {
             this.listData =
               res.data.titleTestModelList[
-                this.currentModelIndex
+                len
               ].firstSubjectModelList;
+            this.currentModelIndex = len;
           }
         } else {
           this.message.error(res.message);