uniProject/components/questions/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>
</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: "", //题干数据
  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;
    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>