feat(考试):添加提交试卷提示窗

ZhangXianQiang

2024-06-19 4a91e1c8f8cc2b9363b938630d8148f9cbef3c4a

feat(考试):添加提交试卷提示窗

 src/views/exam/index.vue

@@ -40,7 +40,7 @@
              </div>

              <div class="submit-wrapper">
                <el-button type="primary" class="submit-button">提交试卷</el-button>
                <el-button type="primary" class="submit-button" @click="submitExam">提交试卷</el-button>
              </div>

            </div>
@@ -79,16 +79,32 @@


    <!-- 退出考试提示弹窗 -->
    <el-dialog v-model="dialogVisible" title="注意" width="500">
    <el-dialog v-model="quitDialog" title="注意" width="500">
      <div class="dialog-container">
        <p>请确认是否退出当前考试</p>
        <p>当前考试试卷会自动提交,后续将无法继续作答</p>
        <p>当前试卷会自动提交,后续将无法继续作答</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCancel">
            确定
          <el-button @click="quitDialog = false">继续作答</el-button>
          <el-button type="danger" @click="confirmQuit">
            确定退出
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 交卷提示弹窗 -->
    <el-dialog v-model="submitDialog" title="确认交卷?" width="500">
      <div class="dialog-container">
        <p>请确认是否提交试卷</p>
        <p>一旦交卷将无法继续作答或修改答案</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="submitDialog = false">继续作答</el-button>
          <el-button type="primary" @click="confirmSubmit">
            确认提交
          </el-button>
        </div>
      </template>
@@ -123,7 +139,8 @@
  3: AnswerAudio,
};

const dialogVisible = ref(false);
const quitDialog = ref(false);
const submitDialog = ref(false);

const prevQuestion = () => {
  currentIndex.value--;
@@ -181,15 +198,28 @@
  }
};

// 退出考试
const closeClick = () => {
  dialogVisible.value = true;
  quitDialog.value = true;
};

const confirmCancel = () => {
  dialogVisible.value = false;
const confirmQuit = () => {
  quitDialog.value = false;
  router.back();
};

// 交卷
const submitExam = () => {
  submitDialog.value = true;
}

const confirmSubmit = () => {
  submitDialog.value = false;
  router.back();
};



watchEffect(() => {
  let progress = 0;
  examDetail.value.forEach(item => {