mental-health-student/src/views/Exam/index.vue

<template>
  <el-container class="container-exam">
    <el-header class="header">
      <img src="@/assets/images/fenxiang.png" alt="">
      <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题、答题完成后您将获得一份专业的分析报告！</span>
    </el-header>

    <div class="content">
      <el-container>
        <el-aside class="aside">
          <el-card class="card">
            <div class="scale-title">
              {{ scaleName }}
            </div>

            <div class="subject-content">
              <div class="subject-title">{{ currentQuestion.questionContent || '' }}</div>
              <el-radio-group v-model="currentQuestion.answerId" @change="handleChange">
                <el-radio size="large" border :value="item.answerId" v-for="item in currentQuestion.answerList"
                  :key="item.answerId">
                  {{ item.answerOption }}
                </el-radio>
              </el-radio-group>
            </div>

            <div class="subject-btn">
              <el-button round size="large" @click="previous" :disabled="preDisable" style="border: 1px solid #1AB087;">
                <el-icon class="el-icon--left">
                  <ArrowLeft />
                </el-icon>上一题
              </el-button>
              <el-button round v-if="finishNum" size="large" @click="submit" style="border: 1px solid #1AB087;">
                提交<el-icon class="el-icon--right">
                  <ArrowRight />
                </el-icon>
              </el-button>
              <el-button round v-else size="large" @click="next" style="border: 1px solid #1AB087;">
                下一题<el-icon class="el-icon--right">
                  <ArrowRight />
                </el-icon>
              </el-button>
            </div>
          </el-card>
        </el-aside>

        <el-main class="main">
          <el-card class="aside-card">
            <template #header>
              <div class="card-header">
                <span>答题卡</span>
              </div>
            </template>
            <div class="answer">
              <div v-for="(item, index) in questionList" :key="item">
                <el-button circle type="success" v-if="item.answerId" @click="handleAnswer(index)">
                  {{ index + 1 }}
                </el-button>
                <el-button v-else circle @click="handleAnswer(index)">{{ index + 1 }}</el-button>
              </div>
            </div>
            <template #footer>
              <el-countdown title="剩余时间" :value="timeLeft" value-style="color: #F56C6C;" />
            </template>
          </el-card>
        </el-main>
      </el-container>
    </div>

  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getAnswerAPI, addAnswerAPI } from '@/apis/user'

const route = useRoute()
const scaleId = route.query.scaleId
const scaleName = route.query.scaleName
const scaleTime = route.query.scaleTime
const recordId = route.query.recordId

const router = useRouter()

const timeLeft = ref(Date.now() + 1000 * 60 * scaleTime)

const questionList = ref([])
const questionNum = ref(0)
const currentQuestion = ref({})
const questionTotal = ref(0)
async function getAnswer() {
  const res = await getAnswerAPI(scaleId)
  questionList.value = res.data
  currentQuestion.value = questionList.value[0]
  questionTotal.value = questionList.value.length
}

const preDisable = computed(() => {
  return questionNum.value === 0
})

function previous() {
  questionNum.value--
  if (questionNum.value <= 0) {
    questionNum.value = 0
  }

  currentQuestion.value = questionList.value[questionNum.value]
}

const nextDisable = computed(() => {
  return questionNum.value === questionTotal.value
})

const finishNum = computed(() => {
  const data = questionList.value.filter(item => item.answerId != null)
  return data.length == questionTotal.value
})

function next() {
  questionNum.value++

  if (questionNum.value >= questionList.value.length) {
    questionNum.value = questionList.value.length - 1
  }

  currentQuestion.value = questionList.value[questionNum.value]
}

function handleAnswer(index) {
  questionNum.value = index
  currentQuestion.value = questionList.value[questionNum.value]
}

function handleChange() {
  setTimeout(() => {
    next()
  }, 500)
}

onMounted(() => {
  getAnswer()
})

async function submit() {
  const data = questionList.value.map(item => {
    return {
      recordId: recordId, answerId: item.answerId, questionId: item.questionId
    }
  })

  const res = await addAnswerAPI({ scaleId, answerList: data })
  if (res.code == 200) {
    ElMessage({
      message: '提交成功',
      type: 'success'
    })

    if (res.data) {
      router.push({ path: '/examDetail', query: { data: JSON.stringify(res.data) } })
    } else {
      router.replace({ path: '/' })
    }
  } else {
    ElMessage({
      message: res.msg,
      type: 'error'
    })
  }
}
</script>

<style lang="scss" scoped>
.container-exam {
  height: 100vh;

  .header {
    height: 60px;
    color: #41515C;
    background-color: #FFF;
    text-align: center;
    font-size: 18px;
    padding-top: 15px;

    .desc {
      margin-left: 20px;
    }
  }

  .content {
    width: 1200px;
    margin: 0 auto;

    .aside {
      padding-top: 20px;
      width: 800px;
      height: calc(100vh - 90px);
      margin: 0 auto;

      .card {
        height: 100%;

        .scale-title {
          text-align: center;
          font-size: 35px;
          font-weight: bold;
          line-height: 60px;
        }

        .subject-btn {
          display: flex;
          justify-content: space-around;
        }

        .submit-footer {
          text-align: center;

          .submit-btn {
            width: 200px;
          }
        }

        .subject-content {
          margin-left: 50px;
          margin-top: 30px;
          height: 450px;
          max-height: 450px;

          .subject-title {
            text-align: center;
            color: #F56C6C;
            font-size: 30px;
            font-weight: bold;
          }

          ::v-deep(.el-radio-group) {
            display: block;
          }

          ::v-deep(.el-radio) {
            display: block;
            margin: 30px;
            font-size: 25px;
          }

          ::v-deep(.el-radio__label) {
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
          }
        }
      }
    }

    .main {
      width: 400px;
      padding-top: 20px;
      margin: 0 auto;

      .aside-card {
        width: 100%;
        margin: 0 auto;

        .answer {
          display: grid;
          grid-template-columns: repeat(7, 1fr);

          .el-button {
            margin: 7px;
          }
        }
      }
    }
  }
}
</style>