uniProject/components/questions/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>
</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: "", //题干数据
  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) {
    data.name = val.name;
    data.contents = val.content.map((item, index) => {
      return {
        label: item,
        number: getLetterByIndex(index),
      };
    });
  }
}

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