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>
    <el-main class="main">
      <el-card class="card">
        <template #header>
          <div class="card-header">
            {{ scaleName }}
          </div>
        </template>

        <el-progress :percentage="10" :format="format" />

        <div class="subject-content">
          <div class="subject-title">{{ currentQuestion.questionContent }}</div>
          <el-radio-group v-model="currentQuestion.answerId" @change="handleChange">
            <el-radio :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-group>
            <el-button type="primary" size="large" @click="previous" :disabled="preDisable">
              <el-icon class="el-icon--left">
                <ArrowLeft />
              </el-icon>上一题
            </el-button>
            <el-button v-if="nextDisable" type="primary" size="large" @click="submit">
              提交<el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </el-button>
            <el-button v-else type="primary" size="large" @click="next">
              下一题<el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </el-button>
          </el-button-group>
        </div>
      </el-card>
    </el-main>
  </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 recordId = route.query.recordId

const router = useRouter()

const format = (percentage) => (percentage === 100 ? '90题' : `10/90题`)

const questionList = ref([])
const questionNum = ref(0)
const currentQuestion = ref({})

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

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 === questionList.value.length - 1
})

function next() {
  questionNum.value++

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

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

function handleChange() {

}

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

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

  const res = await addAnswerAPI(data)
  if (res.code == 200) {
    ElMessage({
      message: '提交成功',
      type: 'success'
    })
    router.replace({ path: '/' })
  }
}
</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;
    }
  }

  .main {
    width: 60%;
    height: calc(100vh - 60px);
    margin: 0 auto;

    .card {
      height: 100%;

      .card-header {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        line-height: 60px;
      }

      .subject-btn {
        text-align: center;
      }

      .submit-footer {
        text-align: center;

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

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

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

        ::v-deep .el-radio {
          display: block;
          margin: 10px;
        }

        .subject-title {
          color: #FF5A72;
          font-size: 18px;
          font-weight: bold;
        }

        ::v-deep .el-radio__label {
          font-size: 18px;
          font-weight: bold;
          padding-left: 8px;
        }
      }
    }
  }
}
</style>