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

<template>
    <el-row class="p20 waphide">
      <el-col :lg="6" :md="6" :span="6">
        <el-progress
          class="mprocess"
          type="circle"
          :width="150"
          :format="formatFinish"
          :stroke-width="18"
          :percentage="info.percent"
          >
        </el-progress>

      </el-col>

      <el-col :lg="6"  :md="6" :span="6">
        <el-progress v-if="tpl.examGroupId>0"
           class="mprocess"
           type="circle"
           :width="150"
           :format="formatExam"
           :stroke-width="18"
           :percentage="info.score"
           >
        </el-progress>

        <el-progress v-else
           class="mprocess"
           type="circle"
           :width="150"
           :format="formatString('--')"
           :stroke-width="18"
           :percentage="0"
           >
        </el-progress>
      </el-col>

      <el-col :lg="6" :md="6" :span="6">
        <img src="../../../../assets/wxapp.jpg"  width="150px"  />
      </el-col>

      <el-col :lg="6" :md="6" :span="6">
        <div>
          <p style="font-size: 24px;"> 说明 </p>
          <p class="mt10" >岗位名称：{{tpl.name}}<strong style="color: red;">{{tpl.nd}}</strong></p>
          <p class="mt10">
            学习截至时间:
            <strong style="color: red;">
            {{info.canStudyDate}}
            </strong>
          </p>
          <p class="mt10" style="color: red;" v-if="tpl.examGroupId>0" >报名成功，80天内完成学习与考试</p>
          <p class="mt10" v-if="tpl.examGroupId==0" >学完所有课程，即可打印学时证明</p>

          <div>
              <el-button type="primary" class="mt10" style="font-size: 14px;" @click="startExam" v-if="tpl.examGroupId>0" :disabled="info.score>=60">
                参加考试
              </el-button>
              <el-button type="primary" class="mt10" style="font-size: 14px;" @click="printCert" v-if="tpl.tplId>0">
                学时证明
              </el-button>
          </div>
         </div>
      </el-col>

    </el-row>
    </template>

  <script>
  import { toDate } from "@/utils/date";
  export default {
    name: "Index",
    data() {
      return {
      }
    },
    filters:{
      add80Date( date ){
        let val = new Date(date).getTime() + 80*86400*1000;
        return toDate( val )

      }
    },
    props:['tpl', 'info'],
     methods: {
        startExam(){
          if( this.tpl.isClosed ==1 ) {
             this.$message.errorMsg("课程已经关闭", 2)
             return;
          }
          this.$emit("startExam",  0)
        },
        printCert(){
            this.$emit("printCert")
         },
         formatFinish() {
        let {gxs,axs} = this.info;
        if( !axs ) axs = 1;
        return `获得${gxs}学时, 总共${axs}学时`;
      },
      formatExam() {
        let {score} = this.info
        if( score == -1 ) return `已答0次，未通过`;
        return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
      },
      formatString(val){
        return ()=> val;
      }
     }
  }
  </script>