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.testGroupId>0" class="mprocess" type="circle" :width="150" :format="formatTest"
        :stroke-width="18" :percentage="finishCount">
      </el-progress>

      <el-progress v-else-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;" >学满{{tpl.mediaXs/10}}学时 <span v-show="tpl.examGroupId>0">并考试合格</span></strong>
        </p>
        <p class="mt10" v-if="tpl.testGroupId>0">
          参与练习: <strong style="color: red;"> {{finishCount}}</strong>题，满100题可得
          <strong style="color: red;">{{tpl.testXs/10}}</strong>学时
        </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="startExamTest"
            v-if="tpl.testGroupId>0" :disabled="info.score>=60">
            在线练习
          </el-button>
          <el-button type="primary" class="mt10" style="font-size: 14px;" @click="printCert" v-if="info.isPass && tpl.tplId>0">
            学时证明
          </el-button>
        </div>
      </div>
    </el-col>

  </el-row>
</template>

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

      },
      testCount(val) {
        let finish= (+val.index1) + (+val.index2) + (+val.index3) + (+val.index4) || 0
        return finish;
      }
    },
    props: ['tpl', 'info', 'extraXs'],
    mounted(){
      this.recalcXs()
    },
    watch:{
      extraXs:{
        handler(){
          this.recalcXs()
        },
        deep:true
      }
    },
    methods: {
      recalcXs(){
        this.finishCount = (this.extraXs.index1) + (+this.extraXs.index2) + (+this.extraXs.index3) + (+this.extraXs.index4)||0
      },
      startExam() {
        if (this.tpl.isClosed == 1) {
          this.$message.errorMsg("课程已经关闭", 2)
          return;
        }
        this.$emit("startExam", 0)
      },
      startExamTest() {
        this.recalcXs()
        this.$emit("startExamTest")
      },
      printCert() {
        this.recalcXs()
        this.$emit("printCert")
      },
      formatFinish() {
        let {
          gxs,
          axs
        } = this.info;
        let {testXs}= this.tpl
        let attrch = this.finishCount>=100?testXs/10:0;
        if (!axs) axs = 1;
        return `获得${gxs+attrch}学时, 总共${axs+testXs/10}学时`;
      },
      formatExam() {
        let {
          score
        } = this.info
        if (score == -1) return `已答0次，未通过`;
        return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
      },
      formatTest() {
        let finishCount = this.finishCount
        return `练习${finishCount}题, ${finishCount>=100?'完成':'未完成'}`;
      },
      formatString(val) {
        return () => val;
      }
    }
  }
</script>