iCourseInfo.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <el-row class="p20 waphide">
  3. <el-col :lg="6" :md="6" :span="6">
  4. <el-progress
  5. class="mprocess"
  6. type="circle"
  7. :width="150"
  8. :format="formatFinish"
  9. :stroke-width="18"
  10. :percentage="info.percent"
  11. >
  12. </el-progress>
  13. </el-col>
  14. <el-col :lg="6" :md="6" :span="6">
  15. <el-progress v-if="tpl.examGroupId>0"
  16. class="mprocess"
  17. type="circle"
  18. :width="150"
  19. :format="formatExam"
  20. :stroke-width="18"
  21. :percentage="info.score"
  22. >
  23. </el-progress>
  24. <el-progress v-else
  25. class="mprocess"
  26. type="circle"
  27. :width="150"
  28. :format="formatString('--')"
  29. :stroke-width="18"
  30. :percentage="0"
  31. >
  32. </el-progress>
  33. </el-col>
  34. <el-col :lg="6" :md="6" :span="6">
  35. <img src="../../../../assets/wxapp.jpg" width="150px" />
  36. </el-col>
  37. <el-col :lg="6" :md="6" :span="6">
  38. <div>
  39. <p style="font-size: 24px;"> 说明 </p>
  40. <p class="mt10" >岗位名称:{{tpl.name}}<strong style="color: red;">{{tpl.nd}}</strong></p>
  41. <p class="mt10">
  42. 学习截至时间:
  43. <strong style="color: red;">
  44. {{info.canStudyDate}}
  45. </strong>
  46. </p>
  47. <p class="mt10" style="color: red;" v-if="tpl.examGroupId>0" >报名成功,80天内完成学习与考试</p>
  48. <p class="mt10" v-if="tpl.examGroupId==0" >学完所有课程,即可打印学时证明</p>
  49. <div>
  50. <el-button type="primary" class="mt10" style="font-size: 14px;" @click="startExam" v-if="tpl.examGroupId>0" :disabled="info.score>=60">
  51. 参加考试
  52. </el-button>
  53. <el-button type="primary" class="mt10" style="font-size: 14px;" @click="printCert" v-if="tpl.tplId>0">
  54. 学时证明
  55. </el-button>
  56. </div>
  57. </div>
  58. </el-col>
  59. </el-row>
  60. </template>
  61. <script>
  62. import { toDate } from "@/utils/date";
  63. export default {
  64. name: "Index",
  65. data() {
  66. return {
  67. }
  68. },
  69. filters:{
  70. add80Date( date ){
  71. let val = new Date(date).getTime() + 80*86400*1000;
  72. return toDate( val )
  73. }
  74. },
  75. props:['tpl', 'info'],
  76. methods: {
  77. startExam(){
  78. if( this.tpl.isClosed ==1 ) {
  79. this.$message.errorMsg("课程已经关闭", 2)
  80. return;
  81. }
  82. this.$emit("startExam", 0)
  83. },
  84. printCert(){
  85. this.$emit("printCert")
  86. },
  87. formatFinish() {
  88. let {gxs,axs} = this.info;
  89. if( !axs ) axs = 1;
  90. return `获得${gxs}学时, 总共${axs}学时`;
  91. },
  92. formatExam() {
  93. let {score} = this.info
  94. if( score == -1 ) return `已答0次,未通过`;
  95. return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
  96. },
  97. formatString(val){
  98. return ()=> val;
  99. }
  100. }
  101. }
  102. </script>