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

<template>
  <view class="question-title">
    <view v-if="question.typeId && !isSubQuestion" class="question-type">
      <text>{{ questionTypeDesc[question.typeId as EnumQuestionType] }}</text>
      <!-- 考试模式下显示分数 -->
      <text v-if="showScore">（{{ getScore }}分）</text>
    </view>
    <text v-if="isSubQuestion" class="text-nowrap text-30">
      <text>{{ getQuestionTitle() }}</text>
      <text v-if="isExam">（{{ getScore }}分）</text>
      <text v-else>&nbsp;</text>
    </text>
    <uv-parse :content="question.title" containerStyle="display:inline"
      contentStyle="word-break:break-word;"></uv-parse>
  </view>
</template>
<script lang="ts" setup>
import { EnumPaperType, EnumQuestionType } 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 { questionTypeDesc } = examData;

const props = defineProps<{
  question: Study.Question;
}>();
const isExam = computed(() => {
  const { paperType } = examPageOptions;
  return paperType === EnumPaperType.SIMULATED || paperType === EnumPaperType.TEST;
});
const isSubQuestion = computed(() => {
  return props.question.isSubQuestion;
});
const showScore = computed(() => {
  return isExam.value;
});
const getScore = computed(() => {
  if (props.question.subQuestions && props.question.subQuestions.length > 0) {
    return props.question.subQuestions.reduce((acc: number, curr: Study.Question) => {
      return acc + curr.totalScore;
    }, 0);
  }
  return props.question.totalScore;
});
const getQuestionTitle = () => {
  if (isSubQuestion.value) {
    const prefix = questionTypeDesc[props.question.typeId as EnumQuestionType].slice(0, 2);
    return `[${prefix}]`;
  }
  return '';
};
</script>
<style lang="scss" scoped>
.question-title {
  @apply text-32 text-fore-title break-words;
}

.question-type {
  @apply mb-20 text-32 text-fore-subtitle font-bold;
}
</style>