meilan-app/src/pages/exam/components/question-card.vue

<!--
 * @description: 
 -->
<template>
  <div>
    <div class="type">
      <div class="bg">
        <div v-if="answerList[currentQuestion]" class="question-type">
          {{ answerList[currentQuestion].quType }}
        </div>
      </div>
      <div class="bg1">

        <div class="question-type">
          第{{ currentQuestion + 1 }}题
          <span>/共{{ answerList.length }}题</span>
        </div>
      </div>
    </div>
    <div class="question">
      <template>
        <div v-if="answerList[currentQuestion]" class="question-title">{{ answerList[currentQuestion].title }}</div>
        <div class="question-answer">
          <div class="question-answer-item">
            <div v-if="answerList[currentQuestion] && answerList[currentQuestion].answer"
              v-for="(el, idx) in answerList[currentQuestion].answer"
              :class="{ 
                active: isOptionSelected(currentQuestion, idx),
              }"
              class="question-answer-item-title" @click="chooseAnswer(el, currentQuestion, idx)">
              <span class="num">{{ getOptionLabel(idx) }}</span>
              {{ el.content }}
             
            </div>
          </div>
        </div>
      </template>

      <div class="choose-question">
        <div v-if="currentQuestion > 0" class="btn line" @click="preQuestion">上一题</div>
        <div v-if="currentQuestion < answerList.length - 1" class="btn" @click="nextQuestion">下一题</div>
      </div>
      <div class="time">倒计时 {{ formattedTime }}</div>
      <div class="tips"><span>无需答题，直接交卷</span></div>
      <div class="btn line none" @click="submit">提交答卷</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "QuestionCard",
  props: {
    answerList: {
      type: Array,
      default: () => []
    },
    exTime: {         // 新增
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      timeLeft: 0, // 45 分钟，单位秒
      timer: null,

      activeIndex: [], // 改为存储数组，支持多选
      currentQuestion: 0
    }
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.timeLeft / 60);
      const seconds = this.timeLeft % 60;
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    },
    // 判断当前题目是否为多选题
    isMultipleChoice() {
      const currentQuestion = this.answerList[this.currentQuestion];
      return currentQuestion && currentQuestion.quType && 
             (currentQuestion.quType.includes('多选') || 
              currentQuestion.quType.includes('multiple') ||
              currentQuestion.quType === '2'); // 假设2表示多选题
    }
  },
  mounted() {
      this.timeLeft = this.exTime*60 || 0;

    this.startCountdown();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft--;
        } else {
          clearInterval(this.timer);
          this.$emit("timeout"); // 可选：通知父组件时间到
          uni.showToast({ title: '测试时间结束', icon: 'none' });
        }
      }, 1000);
    },
    getOptionLabel(index) {
      return String.fromCharCode(65 + index); // 65 是 'A' 的 Unicode 编码
    },
    // 判断选项是否被选中
    isOptionSelected(questionIndex, optionIndex) {
      const selectedOptions = this.activeIndex[questionIndex];
      if (!selectedOptions) return false;
      
      if (Array.isArray(selectedOptions)) {
        return selectedOptions.some(option => option.eroConnNo === optionIndex);
      } else {
        return selectedOptions.eroConnNo === optionIndex;
      }
    },
    // 选择答案（支持多选）
    chooseAnswer(el, questionIndex, optionIndex) {
      const currentQuestion = this.answerList[questionIndex];
      const isMultiple = currentQuestion && currentQuestion.quType && 
                       (currentQuestion.quType.includes('多选') || 
                        currentQuestion.quType.includes('multiple') ||
                        currentQuestion.quType === '2');
      
      if (isMultiple) {
        // 多选题逻辑
        let selectedOptions = this.activeIndex[questionIndex] || [];
        
        // 如果selectedOptions不是数组（可能是旧数据），转换为数组
        if (!Array.isArray(selectedOptions)) {
          selectedOptions = selectedOptions.eroConnNo !== undefined ? [selectedOptions] : [];
        }
        
        // 检查是否已经选中
        const existingIndex = selectedOptions.findIndex(option => option.eroConnNo === optionIndex);
        
        if (existingIndex > -1) {
          // 如果已经选中，移除
          selectedOptions.splice(existingIndex, 1);
        } else {
          // 如果未选中，添加
          selectedOptions.push({ 
            "quId": el.quId, 
            "eroConnNo": optionIndex, 
            "eroSort": optionIndex // 使用optionIndex作为eroSort
          });
        }
        
        this.$set(this.activeIndex, questionIndex, selectedOptions);
      } else {
        // 单选题逻辑（保持原有逻辑）
        this.$set(this.activeIndex, questionIndex, { 
          "quId": el.quId, 
          "eroConnNo": optionIndex, 
          "eroSort": optionIndex // 使用optionIndex作为eroSort
        });
      }
      
      this.$emit("chooseAnswer", this.activeIndex);
    },
    submit() {
        const leftTimeSec = this.exTime*60 - this.timeLeft;        // 剩余秒数

      this.$emit("submit",leftTimeSec)
    },
    preQuestion() {
      console.log(this.currentQuestion)
      this.currentQuestion = this.currentQuestion === 0 ? 0 : this.currentQuestion - 1;
      this.$emit("currentQuestion", this.currentQuestion)
    },
    nextQuestion(idx) {

      this.currentQuestion = this.currentQuestion + 1
      this.$emit("currentQuestion", this.currentQuestion)

    },
    selectQuestion(idx) {
      this.currentQuestion = idx; // 更新当前题目索引
      this.$emit("currentQuestion", this.currentQuestion); // 向父组件传递新的题目索引
    },
    getExamTime(exTime) {
      this.timeLeft = exTime;

    }
  }
}
</script>

<style lang="scss" scoped>
.type {
  position: relative;
  height: 120rpx;
  padding: 0 42rpx;
  overflow: hidden;

  .bg {
    position: absolute;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(-130deg, transparent 80rpx, #D2EBFA 0, #D2EBFA 0);
    border-radius: 56rpx 256rpx 0 0;
    z-index: 1;
    padding: 40rpx 0 0 28rpx;
  }

  .bg1 {
    position: absolute;
    width: 50%;
    top: 20rpx;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, #4583F0 0%, #4883F6 100%);
    border-radius: 56rpx 56rpx 0 0;
    padding: 40rpx 0 0 42rpx;

    .question-type {
      padding-right: 28rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 40rpx;
      text-align: right;

      span {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.6);
        line-height: 32rpx;
      }
    }
  }

  .question-type {
    font-size: 40rpx;
    line-height: 48rpx;
    color: #496CF4;

    span {
      margin-left: 14rpx;
      font-size: 26rpx;
      color: #6896F6;
      line-height: 30rpx;
    }
  }
}

.question {
  padding: 56rpx 48rpx;
  background: #FFFFFF;
  border-radius: 0 32rpx 32rpx 32rpx;
  box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);

  .question-title {
    font-weight: 400;
    font-size: 32rpx;
    color: #3D3D3D;
    line-height: 38rpx;
  }

  .question-answer-item-title {
    display: flex;
    align-items: center;
    background: #F1F7FE;
    border-radius: 80rpx;
    padding: 16rpx 48rpx 16rpx 16rpx;
    font-size: 28rpx;
    color: #3D3D3D;
    line-height: 34rpx;
    margin-top: 36rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.5);
    position: relative;

    .num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64rpx;
      height: 64rpx;
      background: linear-gradient(135deg, #6E9BFC 0%, #496CF4 100%);
      box-shadow: 4rpx 4rpx 16rpx 0 rgba(76, 112, 246, 0.3);
      border-radius: 80rpx;
      margin-right: 24rpx;
      font-size: 28rpx;
      color: #FFFFFF;
    }

    &.active {
      background: #F1F7FE;
      box-shadow: 0 0 20rpx 0 rgba(76, 112, 246, 0.6);
      border-radius: 80rpx;
      border-color: rgba(76, 112, 246, 0.5);

      &:after {
        content: "";
        position: absolute;
        right: 48rpx;
        display: inline-flex;
        width: 48rpx;
        height: 48rpx;
        background: url("../../../static/images/dui.png") no-repeat;
        background-size: 100%;
      }

      
    }

  
  }
}

.choose-question {
  display: flex;
  gap: 32rpx;
  padding-top: 32rpx;

  .btn {
    flex: 1;
  }
}

.btn,
.time {
  margin: 36rpx 0;
  border-radius: 80rpx;
  font-weight: bold;
  font-size: 32rpx;
  color: #FFFFFF;
  text-align: center;

  &.none {
    margin-bottom: 0;
  }
}

.btn {
  border: 2px solid #fff;
  padding: 18rpx 0;
  background: linear-gradient(135deg, #6E9BFC 0%, #496CF4 100%);

  &.line {
    background: inherit;
    border-color: #496CF4;
    color: #496CF4;
  }
}

.time {
  margin: 32rpx 0;
  color: #333333;
}

.tips {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  text-align: center;
  position: relative;

  &:after {
    content: "";
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 2rpx dashed #E5E5E5;
    transform: translateY(-50%);
  }

  span {
    position: relative;
    padding: 0 8rpx;
    background: #fff;
    z-index: 2;
  }
}
</style>