uniProject/components/questionsChengji/danxuan.vue

<template>
  <view v-if="question" class="phone-danxuan-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="danxuan-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 } = 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 == index,
      showError:
        props.question.reply == index && props.question.result != index,
    };
  } else {
    if (props.question.reply === "" || props.question.reply === null) {
      return {
        active: false,
      };
    }
    return {
      active: props.question.reply == index,
    };
  }
}

function formatData(val) {
  if (val) {
    console.log("val", val);
    data.name = val.name;
    data.answer = val.answer;
    data.score = val.score;
    if (val.reply && val.reply.trim() !== "") {
      data.reply = getLetterByIndex(val.reply);
    } else {
      data.reply = "未答";
    }
    if (val.result) {
      data.result = getLetterByIndex(val.result);
    } else {
      data.result = "无答案";
    }
    data.contents = val.content.map((item, index) => {
      return {
        label: item,
        number: getLetterByIndex(index),
      };
    });
    console.log("data.contents", data.contents);
  }
}

function onSelect(index) {
  if (props.showError) {
    return;
  }
  props.question.reply = index;
}
</script>