exam_mp/components/Topic/Questions.vue

<template>
  <view
    class="question-item"
    :class="{
      'question-item-correct': isSelected && isCorrect,
      'question-item-wrong': isSelected && !isCorrect,
    }"
    @tap="handleClick"
  >
    <view
      class="option-label"
      :class="{
        'option-label-correct': isSelected && isCorrect,
        'option-label-wrong': isSelected && !isCorrect,
      }"
    >
      {{ TopicMapList[index] }}
    </view>
    <view class="option-text">{{ question.label }}</view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

const TopicMapList = ["A", "B", "C", "D", "E"];

// Props 定义
const props = defineProps({
  answerList: {
    type: Array,
    default: () => [],
  },
  index: {
    type: Number,
    required: true,
  },
  selectCount: {
    type: Array,
    default: () => [],
  },
  question: {
    type: Object,
    required: true,
    default: () => ({
      label: "",
      value: 0,
    }),
  },
  parindex: {
    type: Number,
    required: true,
  },
});

// Emits 定义
const emit = defineEmits(["select", "showAnswer"]);

// 计算属性
const isSelected = computed(() =>
  props.selectCount.includes(props.question.value)
);
const isCorrect = computed(() =>
  props.answerList.includes(props.question.value)
);

// 方法
const handleClick = () => {
  if (
    isSelected.value ||
    props.selectCount.length === props.answerList.length
  ) {
    return;
  }

  if (props.answerList.length - 1 === props.selectCount.length) {
    emit("showAnswer", true);
  }

  emit("select", props.question.value, props.parindex);
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.question-item {
  display: flex;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f5f5f5;
  gap: 12px;
  align-items: center;
  color: #333;
}

.question-item-correct {
  border-color: $success;
  background-color: #e8f5e9;
}

.question-item-wrong {
  border-color: $error;
  background-color: #ffebee;
}

.option-label {
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 0 4px;
}

.option-label-correct {
  border-color: $success;
  background-color: $success;
  color: #fff;
}

.option-label-wrong {
  border-color: $error;
  background-color: $error;
  color: #fff;
}

.option-text {
  flex: 1;
}
</style>