nebula/pages/answer.vue

<template>
  <el-row class="wrapper">
    <el-col v-for="answerRecord in answerRecords" :key="answerRecord.id">
      <el-col v-if="answerRecord.subjectAnswerRecords">
        <el-col class="question-tip">
          <h1>✨ 您已完成今日答题任务!</h1>
        </el-col>
        <el-col>
          <h2>答题记录</h2>
        </el-col>
      </el-col>
      <el-col class="question-content">
        <h2 v-html="getQuestionContent(answerRecord.questionContent)"></h2>
      </el-col>
      <el-col>
        <el-col v-if="answerRecord.subjectAnswerRecords">
          <el-col class="question-option">
            <el-radio-group v-model="answerRecord.subjectAnswerRecords[0].answer" :disabled="true">
              <template v-for="subjectOption in answerRecord.subjectOptionDTOList">
                <el-col :span="24" style="margin-bottom: 10px;">
                  <el-radio :key="subjectOption.optionName" :label="subjectOption.optionName">
                    <span>{{ subjectOption.optionName }}.</span>
                    <span>{{ subjectOption.optionContent }}</span>
                  </el-radio>
                </el-col>
              </template>
            </el-radio-group>
          </el-col>
          <el-col :span="6">
            你的答案:
            <span v-if="answerRecord.correctAnswer == answerRecord.subjectAnswerRecords[0].answer" class="question-answer answer-right">{{answerRecord.subjectAnswerRecords[0].answer}}</span>
            <span v-else class="question-answer answer-wrong">{{answerRecord.subjectAnswerRecords[0].answer}}</span>
          </el-col>
          <el-col class="question-operate" :span="6">
            正确答案: <span class="question-answer"> {{ answerRecord.correctAnswer }} </span>
          </el-col>
        </el-col>
        <el-col v-else>
          <el-col class="question-option">
            <el-radio-group v-model="answer">
              <template v-for="subjectOption in answerRecord.subjectOptionDTOList">
                <el-col :span="24" style="margin-bottom: 10px;">
                  <el-radio :key="subjectOption.optionName" :label="subjectOption.optionName">
                    <span>{{ subjectOption.optionName }}.</span>
                    <span>{{ subjectOption.optionContent }}</span>
                  </el-radio>
                </el-col>
              </template>
            </el-radio-group>
          </el-col>
          <el-col class="question-operate" :span="6">
            <el-button type="primary" @click="submitAnswer">提交答案</el-button>
          </el-col>
        </el-col>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: "answer",
  middleware: 'auth',
  fetch({store, params, error}) {
    return Promise.all([
      store
        .dispatch('answer/fetchDetail', params)
        .catch(err => error({statusCode: 404}))
    ])
  },
  computed: {
    ...mapState({
      answerRecords: state => state.answer.detail.answerRecords
    })
  },
  data() {
    return {
      answer: '',
      correctAnswer: ''
    }
  },
  methods: {
    getQuestionContent(questionContent) {
      questionContent = questionContent.replace("（", "____");
      questionContent = questionContent.replace("）", "");
      return questionContent;
    },
    submitAnswer() {
      let _ts = this;
      _ts.$axios.$post("/api/answer/answer", {
        idSubjectQuestion: _ts.answerRecords[0].id,
        answer: _ts.answer
      }).then(function (res) {
        if (res) {
          _ts.$message.success('回答正确!');
        } else {
          _ts.$message.error('回答错误!');
        }
        _ts.$store.dispatch('answer/fetchDetail');
      })
    }
  },
  mounted() {
    this.$store.commit('setActiveMenu', 'answer');
  }
}
</script>

<style scoped>
.question-tip {
  margin-bottom: 40px;
  margin-left: 15%;
}
.question-content {
  margin: 10px auto;
}
.question-option {
  margin: 10px auto;
}
.question-answer {
  font-size: 36px;
  padding-left: 10px;
}
.question-operate {
  margin: 10px auto;
  text-align: right;
}

.answer-right {
  color: limegreen;
}

.answer-wrong {
  color: red;
}
</style>