exam_mp/components/Topic/Questions.vue

<template>
  <view
    class="question-item"
    :class="{
      'question-item-correct': mode === 'practice' && isSelected && isCorrect,
      'question-item-wrong': mode === 'practice' && isSelected && !isCorrect,
      'question-item-selected': mode === 'exam' && isSelected
    }"
    @tap="handleClick"
  >
    <view
      class="option-label"
      :class="{
        'option-label-correct': mode === 'practice' && isSelected && isCorrect,
        'option-label-wrong': mode === 'practice' && isSelected && !isCorrect,
        'option-label-selected': mode === 'exam' && isSelected
      }"
    >
      {{ TopicMapList[index] }}
    </view>
    <view class="option-text">{{ question.label }}</view>
    <view class="option-icon" v-if="isSelected && !isCorrect">
      <uni-icons type="closeempty" color="#f00"></uni-icons>
    </view>
    <view class="option-icon" v-if="isSelected && isCorrect">
      <uni-icons type="checkmarkempty" color="#00be00"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import { 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,
  },
  mode: {
    type: String,
    default: "exam", // practice: 练习模式, exam: 考试模式
  },
});

// 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) {
    emit("select", props.question.value, props.parindex);
    return;
  }

  // 如果是练习模式，且已经达到答案数量，则不允许继续选择
  if (props.mode === 'practice' && props.selectCount.length === props.answerList.length) {
    return;
  }

  // 如果是练习模式，且即将完成所有选择，则显示答案
  if (props.mode === 'practice' && 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: 0 16px;
  height: 76rpx;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #FAFBFD;
  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;
}

.question-item-selected {
  border-color: $uni-primary;
  background-color: #e3f2fd;
}

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

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

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

.option-label-selected {
  border-color: $uni-primary;
  background-color: $uni-primary;
  color: #fff;
}

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