labsop_h5/src/view/exam/cover.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-11 18:02:10
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-18 14:56:23
 * @FilePath: \vant-demo-master\vant\vue3-ts\src\view\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <h4 class="mt10 mb10">{{ state.form.name }}</h4>
    <van-cell-group>
      <van-cell title="考生姓名" :value="state.form.userName" />
      <van-cell title="考试总分" :value="`${state.form.totalScore}分`" />
      <van-cell title="及格分数" :value="`${state.form.passScore}分`" />
      <van-cell title="考试时间" :value="formatDate(new Date(state.form.startTime), 'YYYY-mm-dd HH:MM')" />
      <van-cell title="答题时间" :value="`${state.form.duration}分钟`" />
      <van-cell title="考试次数" :value="`${state.form.examineCount}/${state.form.totalCount}`" />
    </van-cell-group>
    <van-button type="primary" class="mt10" @click="startExam">开始考试</van-button>
  </div>
</template>

<script name="home" lang="ts" setup>
  import to from 'await-to-js'
  import { computed, onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { formatDate } from '/@/utils/formatTime'
  import { useDictApi } from '/@/api/system/dict'
  import { showConfirmDialog, showNotify } from 'vant'
  import { useTrainingApi } from '/@/api/training/index'
  const router = useRouter()
  const trainingApi = useTrainingApi()
  const state = reactive({
    form: {
      name: '',
      userName: '',
      examId: 0,
      examCover: '',
      epId: 0,
      duration: 0,
      totalScore: 0,
      passScore: 0,
      totalCount: 0,
      startTime: '',
      endTime: '',
      examineCount: 0
    }
  })
  const onClickRight = () => {
    router.go(-1)
  }
  const initExam = async () => {
    const [err, res]: ToResponse = await to(trainingApi.getMineExamResultInfo({ id: 233 }))
    if (err) return
    state.form = res?.data
  }
  const startExam = async () => {
    if (state.form.epId == 0) {
      showNotify({
        message: '该考试未配置试卷，请联系管理员配置试卷',
        type: 'warning'
      })
  	} else {
  		// 进入试卷获取试卷的前置条件
  		checkEnterTestPaper();
  	}
  }
  const checkEnterTestPaper = () => {
  	trainingApi.enterExam({ examId: state.form.examId }).then((res: any) => {
  		if (res.code == 200) {
  			localStorage.setItem('currentStartTime', res.data.currentStartTime);
  			localStorage.setItem('duration', state.form.duration + '');
        router.push({
          path: '/exam',
          query: {
            answerId: res.data.answerId,
            epId: state.form.epId,
          }
        })
  		}
  	});
  }
  onMounted(() => {
    initExam()
  })
</script>

<style lang="scss" scoped>
  .app-container {
    display: flex;
    flex-direction: column;
    h4 {
      font-size: 20px;
      height: 20px;
      line-height: 20px;
      &::before {
        display: inline-block;
        content: '';
        width: 3px;
        height: 20px;
        background-color: #1c9bfd;
        margin-right: 4px;
        vertical-align: middle;
      }
    }
  }
</style>