iCourseInfoTest.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <template>
  2. <el-row class="p20">
  3. <el-col :span="6">
  4. <img :src="tpl.tb" width="200px" style="border-radius: 20px;" />
  5. </el-col>
  6. <el-col :span="6">
  7. <div>
  8. <p style="font-size: 24px;"> 课程信息 </p>
  9. <p class="mt10">岗位名称:{{tpl.name}} </p>
  10. <p class="mt10">课程学时:<strong style="color: red;">{{tpl.xs/10}} </strong>学时
  11. </p>
  12. <p class="mt10" v-if="tpl.examGroupId">课程年度:
  13. <strong style="color: red;">{{tpl.nd}} </strong>
  14. </p>
  15. <p class="mt10">学习情况:
  16. 完成 <strong style="color: red;">{{info.getXs/10}} </strong>
  17. 共计 <strong style="color: red;">{{info.totalXs/10}}</strong>
  18. </p>
  19. <p class="mt10" v-if="tpl.examGroupId">最高分数:
  20. <strong style="color: red;">{{info.score}} </strong>
  21. </p>
  22. <p class="mt10" v-if="tpl.examGroupId">开始时间:
  23. <strong style="color: red;">{{info.startDate}} </strong>
  24. </p>
  25. <p class="mt10" >考试备注:<br>
  26. <span style="padding:0 2rem;color: red;">
  27. 考试开始,三天内必须完成
  28. </span>
  29. <span style="padding:0 2rem;color: red;">
  30. 报名成功,80天内完成学习
  31. </span>
  32. </p>
  33. <p class="mt10">
  34. 学习截至时间:
  35. <strong style="color: red;">
  36. {{info.startDate|add80Date}}
  37. </strong>
  38. </p>
  39. <p class="mt10">
  40. 剩余考试时间:
  41. <span v-if="info.examTime>0">
  42. <span v-if="end.d>0">
  43. <span style="color: red;">{{end.d}}</span>
  44. </span>
  45. <span style="color: red;">{{end.h}}</span>
  46. <span style="color: red;">{{end.m}}</span>
  47. <span v-if="end.d==0">
  48. <span style="color: red;">{{end.s}}</span>
  49. </span>
  50. </span>
  51. <span v-else>
  52. 还未开考
  53. </span>
  54. </p>
  55. </div>
  56. </el-col>
  57. <el-col :span="9">
  58. <div>
  59. <p style="font-size: 24px;"> 考试情况 </p>
  60. <section v-for="(item,index) in setting.examList">
  61. <span style="width:240px;margin: 0px;padding: 0px;">
  62. {{item}}: <strong style="color: red;">{{info['score'+index]}} </strong>分
  63. </span>
  64. <el-button @click="startExam(index)" type="text">开始考试</el-button>
  65. </section>
  66. </div>
  67. </el-col>
  68. <el-col :span="3">
  69. <div>
  70. <el-button type="primary" style="font-size: 14px;margin-top: ;" @click="printCert">
  71. 学时证明
  72. </el-button>
  73. </div>
  74. </el-col>
  75. </el-row>
  76. </template>
  77. <script>
  78. import setting from '@/setting';
  79. import { getTime,packTime,toDate } from "@/utils/date";
  80. export default {
  81. name: "iCourseInfoTest",
  82. data() {
  83. return {
  84. setting,
  85. timer: 0,
  86. end: {
  87. d: 0,
  88. h: 0,
  89. m: 0,
  90. s: 0
  91. }
  92. }
  93. },
  94. props: ['tpl', 'info'],
  95. destroyed(){
  96. this.timer && window.clearInterval(this.timer)
  97. },
  98. created(){
  99. this.initTimer()
  100. },
  101. filters:{
  102. add80Date( date ){
  103. let val = new Date(date).getTime() + 80*86400*1000;
  104. return toDate( val )
  105. }
  106. },
  107. methods: {
  108. initTimer() {
  109. if (this.timer) {
  110. window.clearInterval(this.timer);
  111. }
  112. this.tickTimer();
  113. this.timer = window.setInterval(() => {
  114. this.tickTimer();
  115. }, 1000);
  116. },
  117. tickTimer( ) {
  118. let nowSec = getTime();
  119. let timeLast = this.info.examTime -nowSec;
  120. this.end = packTime(timeLast);
  121. if (timeLast < 0) {
  122. window.clearInterval(this.timer);
  123. }
  124. },
  125. startExam(index) {
  126. if( this.end.v <=0 ) {
  127. this.$message.errorMsg("开考超过三天,不能继续考试")
  128. return;
  129. }
  130. if( this.tpl.isClosed ==1 ) {
  131. this.$message.errorMsg("课程已经关闭", 2)
  132. return;
  133. }
  134. this.$emit("startExam", +index)
  135. },
  136. printCert() {
  137. this.$emit("printCert")
  138. }
  139. }
  140. }
  141. </script>