添加承诺书

src/modules/exam/exam/views/Index.vue

@@ -14,10 +14,28 @@
         </el-card>
       </template>
     </div>
-    <el-dialog title="考前须知" :visible.sync="dialogVisible">
-      <div v-html="acitveItem.config.welcome_message" v-if="acitveItem && acitveItem.config"></div>
-      <template #footer>
-        <div style="text-align: center">
+    <el-dialog center :visible.sync="dialogVisible">
+      <div class="info" v-if="acitveItem && acitveItem.config">
+        <div style="font-size:20px; text-align: center;">{{ acitveItem.paper_title }}</div>
+        <div style="font-size:18px; text-align: center;margin: 10px 0 20px;">考试时间：{{ acitveItem.start_time }} ~ {{ acitveItem.end_time }}</div>
+        <div v-html="acitveItem.config.welcome_message"></div>
+      </div>
+      <div v-if="acitveItem && acitveItem.config">
+        <div v-if="acitveItem.config.enabled_promise">
+          <el-dialog title="考前须知" :visible.sync="innerVisible" width="70%" append-to-body center>
+            <div v-if="acitveItem && acitveItem.config" style="font-size: 18px" v-html="acitveItem.config.promise_message"></div>
+            <span slot="footer" class="dialog-footer">
+              <el-button :disabled="!isRead" type="primary" @click="enterExam">{{ noticeText }}</el-button>
+            </span>
+          </el-dialog>
+        </div>
+      </div>
+      <template #footer v-if="acitveItem && acitveItem.config">
+        <div style="text-align: center" v-if="acitveItem.config.enabled_promise">
+          <el-button type="primary" @click="innerVisible = true">考试承诺书</el-button>
+          <!-- <el-button type="primary" @click="enterExam">进入考试</el-button> -->
+        </div>
+        <div style="text-align: center" v-else>
           <el-button type="primary" @click="enterExam">进入考试</el-button>
         </div>
       </template>
@@ -30,11 +48,14 @@ import * as api from '@/api/exam.js'
 export default {
   data() {
     return {
+      noticeText: '我已阅读，开始考试（20秒）',
       courseId: '',
       courses: [],
       examList: [],
       dialogVisible: false,
-      acitveItem: {} // 当前激活的考试
+      acitveItem: {}, // 当前激活的考试
+      innerVisible: false,
+      isRead: false
     }
   },
   computed: {
@@ -139,6 +160,26 @@ export default {
         query: { exam_id: item.id, type: item.paper_type, is_create: 0 }
       })
     }
+  },
+  watch: {
+    dialogVisible: function (newVal, oldVal) {
+      console.log(this.dialogVisible)
+      let numTime = 20
+      if (this.dialogVisible && !this.isRead) {
+        clearInterval(this.noticeTimes)
+        this.noticeTimes = setInterval(() => {
+          numTime--
+          this.noticeText = `我已阅读，开始考试（${numTime}秒）`
+          if (numTime === 0) {
+            this.isRead = true
+            this.noticeText = '我已阅读，开始考试'
+            clearInterval(this.noticeTimes)
+          }
+        }, 1000)
+      } else {
+        clearInterval(this.noticeTimes)
+      }
+    }
   }
 }
 </script>