newPlay

src/containers/center/play/index.vue

@@ -18,18 +18,20 @@
 
         <div v-if="show <3" class="lwh-ul-form mt20">
           <!-- 列表展示 -->
-          <el-table :data="showList" border stripe style="width: 100%;"  >
-            <el-table-column label="NO." prop="id" width="50" align="center">
-              <template v-slot="{$index}">
-                <span> {{$index+1}}</span>
-              </template>
+          <el-table :data="showList.slice(page*size-size, page*size)" border stripe style="width: 100%;"  >
+            <el-table-column label="课程名称" prop="name" min-width="200">
             </el-table-column>
 
-            <el-table-column label="课程名称" prop="name" min-width="200">
+            <el-table-column label="开始时间" prop="type" align="center" width="155">
+              <template v-slot="{row}">
+                <span>{{row.createAt||'-'}}</span>
+              </template>
             </el-table-column>
 
-            <el-table-column label="类型" prop="type" align="center" width="80">
-              <span>必修</span>
+            <el-table-column label="最后时间" prop="type" align="center" width="155">
+              <template v-slot="{row}">
+                <span>{{row.prevTick|toDatetime}}</span>
+              </template>
             </el-table-column>
 
             <el-table-column label="学时" prop="xs" align="center" width="80">
@@ -38,7 +40,7 @@
               </template>
             </el-table-column>
 
-            <el-table-column label="学习进度" prop="useTime" align="left" width="220">
+            <el-table-column label="学习进度" prop="useTime" align="left" width="200">
               <template v-slot="{row}">
                 <span style="display: flex;">
                   <el-progress
@@ -62,6 +64,13 @@
             </el-table-column>
 
           </el-table>
+          <el-pagination :current-page="page" :page-size="size" 
+          :page-sizes="[5, 10, 20, 50, 100]" 
+          :style="{ float: 'right', padding: '20px' }"
+           :total="showList.length" 
+           @current-change="(page)=>{this.page= page}" 
+           @size-change="(size)=>{this.size= size}"
+           layout="total, sizes, prev, pager, next, jumper"></el-pagination>
         </div>
 
         <div v-if="show ==3" class="lwh-ul-form mt20">
@@ -120,6 +129,7 @@
   import ICourseInfoXsExtra from "./components/iCourseInfoXsExtra.vue";
   import ICourseAnswerTest from "./components/iCourseAnswerTest.vue";
   import {getPercent} from '@/utils/index.js'
+  import {toDatetime} from '@/utils/date.js'
   import {delExam} from '../exam/components/util.js'
   import md5 from 'js-md5';
   export default {
@@ -137,6 +147,8 @@
         tpl:{},
         media:{},
         extraXs:{},
+        page:1,
+        size:5,
         options:{
           controls:true,
           autoplay: true, // 如果true,浏览器准备好时开始回放。
@@ -154,15 +166,7 @@
             timeDivider: true,
             durationDisplay: true,
             remainingTimeDisplay: false,
-            fullscreenToggle: true  //全屏按钮
-            // currentTimeDisplay: true, // 当前时间
-            // timeDivider: true, // 时间分割线
-            // durationDisplay: true, // 总时间
-            // progressControl: true, // 进度条
-            // remainingTimeDisplay: true, //
-            // customControlSpacer: true, //
-            // fullscreenToggle: true, // 全屏按钮
-            // volumePanel: true
+            fullscreenToggle: true
           }
         },
         list: [],
@@ -201,7 +205,8 @@
          } else if (val == '完成') {
              return val = 'el-bg-inner-done'
          }
-      }
+      },
+      toDatetime
     },
     methods: {
       changeMedia( val ){

src/utils/date.js

@@ -30,7 +30,7 @@ export function formatTimeToStr(times, pattern) {
 }
 
 export function toDatetime(times ) {
-	if( !times) return "2020-01-01 00:00:00";
+	if( !times) return "-";
     if(Number(times)) times = times*1000;
 
     var d = new Date(times).Format("yyyy-MM-dd hh:mm:ss");