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">
            SCL-90症状自评量表_专业焦虑与抑郁测试
          </div>
        </template>

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

        <div class="subject-content">
          <div class="subject-title">{{ questionNum + 1 + '、' + currentQuestion.question }}</div>
          <el-radio-group v-model="currentQuestion.answer">
            <el-radio :value="item.value" v-for="item in currentQuestion.options" :key="item.id">
              {{ item.name }}
            </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="next">
              提交<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 } from 'vue'
import {useRoute} from 'vue-router'

const route = useRoute()
console.log(route)

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

const questionList = ref([
  {
    id: 1,
    question: '是否头疼',
    options: [
      { id: 1, name: '没有', value: 1 },
      { id: 2, name: '很轻', value: 2 },
      { id: 3, name: '中等', value: 3 },
      { id: 4, name: '偏重', value: 4 },
      { id: 5, name: '严重', value: 5 },
      { id: 6, name: '一般般', value: 6 },
    ],
    answer: null
  },
  {
    id: 2,
    question: '经常感到神经过敏、心中不踏实',
    options: [
      { id: 1, name: '没有', value: 1 },
      { id: 2, name: '很轻', value: 2 },
      { id: 3, name: '中等', value: 3 },
      { id: 4, name: '偏重', value: 4 },
      { id: 5, name: '严重', value: 5 },
    ],
    answer: null
  },
  {
    id: 3,
    question: '测试',
    options: [
      { id: 1, name: '没有', value: 1 },
      { id: 2, name: '很轻', value: 2 }
    ],
    answer: null
  }
])
const currentQuestion = ref(questionList.value[0])

const questionNum = ref(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]
}
</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>