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

<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>
        <p class="mt10" >考试备注：<br>
          <span style="padding:0 2rem;color: red;">
            考试开始，三天内必须完成
          </span>
          <span style="padding:0 2rem;color: red;">
            报名成功，80天内完成学习
          </span>
        </p>
        <p class="mt10">
          学习截至时间:
          <strong style="color: red;">
          {{info.startDate|add80Date}}
          </strong>
        </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>

        <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-row>
</template>

<script>
  import setting from '@/setting';
  import { getTime,packTime,toDate } from "@/utils/date";
  export default {
    name: "iCourseInfoTest",
    data() {
      return {
        setting,
        timer: 0,
        end: {
          d: 0,
          h: 0,
          m: 0,
          s: 0
        }
      }
    },
    props: ['tpl', 'info'],
    destroyed(){
      this.timer &&  window.clearInterval(this.timer)
    },
    created(){
      this.initTimer()
    },
    filters:{
      add80Date( date ){
        let val = new Date(date).getTime() + 80*86400*1000;
        return toDate( val )

      }
    },
    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) {
        if( this.end.v <=0 ) {
          this.$message.errorMsg("开考超过三天，不能继续考试")
          return;
        }
        if( this.tpl.isClosed ==1 ) {
          this.$message.errorMsg("课程已经关闭", 2)
          return;
        }
        this.$emit("startExam", +index)
      },
      printCert() {
        this.$emit("printCert")
      }
    }
  }
</script>