uniProject/components/questionsChengji/duoxuan.vue

<template>
  <view v-if="question" class="phone-duoxuan-box">
    <view class="phone-shiti-question">
      <view class="question-num">{{ question.onlyNum }}、</view>
      <!-- 题干区域 -->
      <rich-text :nodes="data.name"></rich-text>
    </view>
    <!-- 选项区域 -->
    <view
      v-for="(item, index) in data.contents"
      class="duoxuan-option-box"
      :class="formatClass(index)"
      :key="index"
    >
      <text class="option-change" @click="onSelect(index)">{{
        item.number
      }}</text>
      <rich-text :nodes="item.label" class="option-question"></rich-text>
    </view>

    <view class="phone-question-answer-box">
      <view class="phone-line-title">答案解析</view>
      <view class="btdf-row"
        >本题得分：<text>{{ data.score }}</text
        >分</view
      >
      <view class="zqda-row"
        >正确答案：<text>{{ data.result }}</text></view
      >
      <view class="ndda-row"
        >您的答案：<text>{{ data.reply }}</text></view
      >
      <view class="dajx-row"
        >答案解析:
        <rich-text :nodes="data.answer"></rich-text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { useQuestionTools } from "@/utils/useQuestionTools.js";
const { getLetterByIndex, haveSameElements } = useQuestionTools();

const props = defineProps({
  question: {
    type: Object,
  },
  showError: {
    type: Boolean,
    default: false,
  },
});

const data = reactive({
  name: "", //题干数据
  score: "",
  result: "",
  reply: "",
  answer: "",
  contents: [], // 选项数据
});

watch(
  () => props.question,
  (val) => formatData(val),
  {
    immediate: true,
  }
);

function formatClass(index) {
  if (props.showError) {
    return {
      active_right: props.question.result.some((item) => item == index),
      showError: !props.question.result.some((item) => item == index),
    };
  } else {
    return {
      active: props.question.reply.some((item) => item == index),
    };
  }
}

function formatData(val) {
  if (val) {
    data.name = val.name;
    if (val.reply && val.reply.length) {
      data.reply = val.reply
        .map((item) => {
          if (item.trim()) {
            return getLetterByIndex(item.trim());
          }
        })
        .join(",");
    } else {
      data.reply = "未答";
    }
    if (val.result) {
      data.result = val.result
        .map((item) => {
          if (item.trim()) {
            return getLetterByIndex(item.trim());
          }
        })
        .join(",");
    } else {
      data.result = "无答案";
    }
    data.answer = val.answer;
    data.score = val.score;

    data.contents = val.content.map((item, index) => {
      return {
        label: item,
        number: getLetterByIndex(index),
      };
    });
  }
}

function onSelect(index) {
  if (props.showError) {
    return;
  }
  if (props.question.reply) {
    if (props.question.reply.some((item) => item == index)) {
      props.question.reply = props.question.reply.filter(
        (item) => item != index
      );
    } else {
      props.question.reply.push(index);
    }
  }
}
</script>