考试开始三天内完成

src/App.vue

@@ -28,7 +28,7 @@
   export default {
     name: 'App',
     methods:{
-      ...mapActions("user", ["loadTypeList"]),
+      ...mapActions("cache", ["loadTypeList"]),
     },
     created(){
       this.loadTypeList()

src/containers/center/play/components/iCourseInfoTest.vue

@@ -1,74 +1,129 @@
-
 <template>
-     <el-row class="p20">
-      <el-col :span="6">
-       <img :src="tpl.tb"  width="200px" style="border-radius: 20px;"  />
-      </el-col>
-      <el-col :span="6">
-        <div>
-          <p style="font-size: 24px;"> 课程信息 </p>
-          <p class="mt10" >岗位名称：{{tpl.name}} </p>
-          <p class="mt10" >课程学时：<strong style="color: red;">{{tpl.xs/10}} </strong>学时
-          </p>
-          <p class="mt10" v-if="tpl.examGroupId" >课程年度：
-            <strong style="color: red;">{{tpl.nd}} </strong>
-          </p>
-          <p class="mt10" >学习情况：
-            完成 <strong style="color: red;">{{info.getXs/10}} </strong>
-            共计 <strong style="color: red;">{{info.totalXs/10}}</strong>
-          </p>
-          <p class="mt10" v-if="tpl.examGroupId" >最高分数：
-            <strong style="color: red;">{{info.score}} </strong>
-             分
-          </p>
-          <p class="mt10" v-if="tpl.examGroupId" >开始时间：
-            <strong style="color: red;">{{info.startDate}} </strong>
-          </p>
-          
-        </div>
-      </el-col>
+  <el-row class="p20">
+    <el-col :span="6">
+      <img :src="tpl.tb" width="200px" style="border-radius: 20px;" />
+    </el-col>
+    <el-col :span="6">
+      <div>
+        <p style="font-size: 24px;"> 课程信息 </p>
+        <p class="mt10">岗位名称：{{tpl.name}} </p>
+        <p class="mt10">课程学时：<strong style="color: red;">{{tpl.xs/10}} </strong>学时
+        </p>
+        <p class="mt10" v-if="tpl.examGroupId">课程年度：
+          <strong style="color: red;">{{tpl.nd}} </strong>
+        </p>
+        <p class="mt10">学习情况：
+          完成 <strong style="color: red;">{{info.getXs/10}} </strong>
+          共计 <strong style="color: red;">{{info.totalXs/10}}</strong>
+        </p>
+        <p class="mt10" v-if="tpl.examGroupId">最高分数：
+          <strong style="color: red;">{{info.score}} </strong>
+          分
+        </p>
+        <p class="mt10" v-if="tpl.examGroupId">开始时间：
+          <strong style="color: red;">{{info.startDate}} </strong>
+        </p>
+        <p class="mt10" >考试备注：<br>
+          <span style="padding:0 2rem;color: red;">
+            考试开始，三天内必须完成
+          </span>
+        </p>
+        <p class="mt10">
+          剩余考试时间:
+          <span  v-if="info.examTime>0">
+            <span v-if="end.d>0">
+              <span style="color: red;">{{end.d}}</span>
+              天
+            </span>
+            <span style="color: red;">{{end.h}}</span>
+            时
+            <span style="color: red;">{{end.m}}</span>
+            分
+            <span v-if="end.d==0">
+              <span style="color: red;">{{end.s}}</span>
+              秒
+            </span>
+          </span>
+          <span v-else>
+            还未开考
+          </span>
+        </p>
+
+      </div>
+    </el-col>
 
-      <el-col :span="9">
-        <div>
-          <p style="font-size: 24px;"> 考试情况 </p>
+    <el-col :span="9">
+      <div>
+        <p style="font-size: 24px;"> 考试情况 </p>
 
-          <section  v-for="(item,index) in setting.examList" >
-                <span style="width:240px;margin: 0px;padding: 0px;">
-                    {{item}}: <strong style="color: red;">{{info['score'+index]}} </strong>分
-                </span>
-                <el-button @click="startExam(index)" type="text">开始考试</el-button>
-          </section>
-        </div>
-      </el-col>
+        <section v-for="(item,index) in setting.examList">
+          <span style="width:240px;margin: 0px;padding: 0px;">
+            {{item}}: <strong style="color: red;">{{info['score'+index]}} </strong>分
+          </span>
+          <el-button @click="startExam(index)" type="text">开始考试</el-button>
+        </section>
+      </div>
+    </el-col>
 
-      <el-col :span="3">
-        <div>
-          <el-button type="primary"   style="font-size: 14px;margin-top: ;" @click="printCert">
-            学时证明
-          </el-button>
-         </div>
-      </el-col>
+    <el-col :span="3">
+      <div>
+        <el-button type="primary" style="font-size: 14px;margin-top: ;" @click="printCert">
+          学时证明
+        </el-button>
+      </div>
+    </el-col>
 
-    </el-row>
-    </template>
+  </el-row>
+</template>
 
-    <script>
-    import setting  from '@/setting';
+<script>
+  import setting from '@/setting';
+  import { getTime,packTime } from "@/utils/date";
   export default {
     name: "iCourseInfoTest",
     data() {
       return {
-          setting
+        setting,
+        timer: 0,
+        end: {
+          d: 0,
+          h: 0,
+          m: 0,
+          s: 0
+        }
       }
     },
-    props:['tpl', 'info'],
-     methods: {
-         startExam(index){
-             this.$emit("startExam",  +index)
-         },
-        printCert(){
-            this.$emit("printCert")
-         }
-     }
+    props: ['tpl', 'info'],
+    destroyed(){
+      this.timer &&  window.clearInterval(this.timer)
+    },
+    created(){
+      this.initTimer()
+    },
+    methods: {
+      initTimer() {
+        if (this.timer) {
+          window.clearInterval(this.timer);
+        }
+        this.tickTimer();
+        this.timer = window.setInterval(() => {
+          this.tickTimer();
+        }, 1000);
+      },
+      tickTimer(  ) {
+        let nowSec = getTime();
+        let timeLast =  this.info.examTime -nowSec;
+        this.end = packTime(timeLast);
+        if (timeLast < 0) {
+          window.clearInterval(this.timer);
+        }
+      },
+      startExam(index) {
+        this.$emit("startExam", +index)
+      },
+      printCert() {
+        this.$emit("printCert")
+      }
+    }
   }
-  </script>
+</script>

src/utils/date.js

@@ -60,9 +60,23 @@ export function getDate( days ) {
 export function time2str( mt ){
   let  timestamp4 = new Date( mt*1000 );
   return timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
-} 
+}
 
 export function str2time( str ){
   let  timestamp4 = new Date( str );
   return parseInt(timestamp4.getTime()/1000);
-} 
+}
+
+export function getTime(){
+    return parseInt( Date.now()/1000);
+}
+
+export function packTime( mytime ){
+    if( mytime < 0) mytime = 0;
+    let obj = {v: mytime};
+	  obj.d = parseInt(mytime / 86400);
+    obj.h =  parseInt( (mytime %86400)/ 3600);
+    obj.m =  parseInt( (mytime %3600)/60);
+    obj.s = mytime % 60;
+    return obj;
+}