ieplus-app/src/pagesStudy/pages/exam-start/components/question-result.vue

<template>
  <view v-if="isReadOnly && question.isLeaf"
    class="question-result mt-40 rounded-8 pt-60 pb-40 flex items-center text-center relative">
    <ie-image v-if="question.isCorrect" src="/pagesStudy/static/image/icon-answer-correct.png"
      class="absolute top-0 left-1/2 -translate-x-1/2 w-222 h-64" :class="{ 'top-30': isOnlySubjective }" />
    <ie-image v-else src="/pagesStudy/static/image/icon-answer-incorrect.png"
      class="absolute top-0 left-1/2 -translate-x-1/2 w-240 h-64" :class="{ 'top-30': isOnlySubjective }" />
    <view v-if="!isOnlySubjective" class="flex-1">
      <view class="text-34 text-[#2CC6A0] font-bold">{{ question.answer1 }}</view>
      <view class="mt-4 text-26">正确答案</view>
    </view>
    <view class="h-40 w-1 bg-back"></view>
    <view v-if="!isOnlySubjective" class="flex-1">
      <view class="text-34 font-bold" :class="[question.isCorrect ? 'text-[#2CC6A0]' : 'text-[#FF5B5C]']">
        {{ question.answers.join('') || (question.isNotKnow ? '不会' : '未答') }}
      </view>
      <view class="mt-4 text-26">我的答案</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { EnumQuestionType, EnumReviewMode } from '@/common/enum';
import { useExam } from '@/composables/useExam';
import { Study, Transfer } from '@/types';
import { EXAM_DATA, EXAM_PAGE_OPTIONS } from '@/types/injectionSymbols';

const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const { practiceSettings } = examData;

const props = defineProps<{
  question: Study.Question;
}>();
const isReadOnly = computed(() => {
  const { readonly } = examPageOptions;
  if (readonly) {
    return true;
  }
  // 练习模式下，需要背题模式且题目已经做过且解析过
  if (practiceSettings.value.reviewMode === EnumReviewMode.DURING_ANSWER && props.question.hasParsed) {
    return true;
  }
  return false;
});
const isOnlySubjective = computed(() => {
  return [EnumQuestionType.SUBJECTIVE, EnumQuestionType.SHORT_ANSWER, EnumQuestionType.ESSAY].includes(props.question.typeId);
});
</script>
<style lang="scss" scoped>
.question-result {
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.06);
}
</style>