cfc/cfc-frontend/pages/cognitive-test/perception-test.vue

<template>
  <view class="test-container">

    <!-- 步骤一：测试说明 -->
    <view class="step-panel" v-if="step === 'instruction'">
      <view class="title-icon">👁️</view>
      <text class="test-title">感知觉测试</text>
      <text class="test-desc">屏幕上会出现 6 个相似的图案，其中有一个与众不同。</text>
      <text class="test-desc">请快速找出"不一样"的那个，点击它即可！</text>
      <text class="test-meta">共 8 题 · 每题限时 8 秒 · 超时自动进入下一题</text>
      <button class="btn-primary" @click="startTest">开始测试</button>
    </view>

    <!-- 步骤二：答题中 -->
    <view class="step-panel" v-else-if="step === 'playing'">
      <view class="progress-row">
        <text class="progress-text">第 {{ currentIndex + 1 }}/8 题</text>
        <text class="progress-text">答对 {{ correctCount }} 题</text>
      </view>

      <view class="timer-bar">
        <view class="timer-fill" :style="timerBarStyle"></view>
      </view>
      <text class="timer-text">{{ timerLeft }}秒</text>

      <text class="question-hint" v-if="currentQuestion">{{ currentQuestion.hint }}</text>

      <view class="grid-wrap">
        <view
          class="grid-cell"
          v-for="(item, index) in currentQuestion.items"
          :key="getItemKey(item, index)"
          :class="{
            'cell-correct': lockInput && index === currentQuestion.oddIndex,
            'cell-wrong': tappedIndex === index && index !== currentQuestion.oddIndex
          }"
          @click="handleTap(index)"
        >
          <text class="cell-emoji">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 步骤三：结果 -->
    <view class="step-panel" v-else>
      <text class="result-title">测试完成</text>
      <view class="score-circle">
        <text class="score-num">{{ score }}</text>
      </view>
      <view class="score-row">
        <text class="score-label">答对 {{ correctCount }}/8 题</text>
        <text class="dimension-tag">感知觉</text>
      </view>
      <view class="result-tip" v-if="score >= 75">
        <text class="result-tip-text">感官敏锐，找不同又快又准！</text>
      </view>
      <view class="result-tip" v-else-if="score >= 50">
        <text class="result-tip-text">表现不错，再细心一点会更好！</text>
      </view>
      <view class="result-tip" v-else>
        <text class="result-tip-text">别灰心，多练几次会越来越快！</text>
      </view>
      <button class="btn-primary" @click="submitResult">提交成绩</button>
      <button class="btn-secondary" @click="retryTest">再测一次</button>
    </view>

  </view>
</template>

<script>
import { submitCognitiveSelfTest } from '../../utils/api.js'

// 题库：6 个相似图案，其中一个是"不同"的（颜色/形状变体）
var QUESTION_BANK = [
  { items: ['🟦','🟦','🟦','🟦','🟦','🟥'], oddIndex: 5, hint: '找出不同的颜色' },
  { items: ['🟨','🟨','🟨','🟨','🟨','🟩'], oddIndex: 3, hint: '找出不同的颜色' },
  { items: ['🟪','🟪','🟪','🟪','🟪','🟦'], oddIndex: 4, hint: '找出不同的颜色' },
  { items: ['🟩','🟩','🟩','🟩','🟩','🟨'], oddIndex: 1, hint: '找出不同的颜色' },
  { items: ['🟥','🟥','🟥','🟥','🟥','🟪'], oddIndex: 2, hint: '找出不同的颜色' },
  { items: ['🟡','🟡','🟡','🟡','🟡','🟢'], oddIndex: 0, hint: '找出不同的颜色' },
  { items: ['⬛','⬛','⬛','⬛','⬛','⬜'], oddIndex: 5, hint: '找出不同的颜色' },
  { items: ['🔴','🔴','🔴','🔴','🔴','🟡'], oddIndex: 2, hint: '找出不同的颜色' },
  { items: ['🟨','🟨','🟨','🟨','🟨','🟥'], oddIndex: 0, hint: '找出不同的颜色' },
  { items: ['🟩','🟩','🟩','🟩','🟩','🟦'], oddIndex: 4, hint: '找出不同的颜色' },
  { items: ['🟪','🟪','🟪','🟪','🟪','⬛'], oddIndex: 1, hint: '找出不同的图案' },
  { items: ['⬜','⬜','⬜','⬜','⬜','⬛'], oddIndex: 3, hint: '找出不同的图案' },
  { items: ['🔴','🔴','🔴','🔴','🔴','🟥'], oddIndex: 5, hint: '找出不同的图案' },
  { items: ['🟥','🟥','🟥','🟥','🟥','🔴'], oddIndex: 2, hint: '找出不同的图案' },
  { items: ['🟡','🟡','🟡','🟡','🟡','🟢'], oddIndex: 1, hint: '找出不同的颜色' },
  { items: ['🟦','🟦','🟦','🟦','🟦','⬜'], oddIndex: 4, hint: '找出不同的图案' },
  { items: ['⬡','⬡','⬡','⬡','⬡','⬢'], oddIndex: 5, hint: '找出不同的形状' },
  { items: ['◈','◈','◈','◈','◈','◆'], oddIndex: 1, hint: '找出不同的形状' },
  { items: ['○','○','○','○','○','◇'], oddIndex: 3, hint: '找出不同的形状' },
  { items: ['◆','◆','◆','◆','◆','◈'], oddIndex: 0, hint: '找出不同的形状' },
  { items: ['⬢','⬢','⬢','⬢','⬢','⬡'], oddIndex: 2, hint: '找出不同的形状' },
  { items: ['◇','◇','◇','◇','◇','○'], oddIndex: 5, hint: '找出不同的形状' }
]

export default {
  data() {
    return {
      step: 'instruction',
      memberId: '',
      roundQuestions: [],
      currentIndex: 0,
      currentQuestion: null,
      correctCount: 0,
      timerLeft: 8,
      timer: null,
      nextTimer: null,
      lockInput: false,
      tappedIndex: -1,
      score: 0
    }
  },
  computed: {
    timerPercent: function() {
      return Math.round(this.timerLeft / 8 * 100)
    },
    timerBarStyle: function() {
      return 'width:' + this.timerPercent + '%'
    }
  },
  onLoad(options) {
    if (options && options.memberId) {
      this.memberId = options.memberId
    }
  },
  onUnload() {
    this.stopTimer()
    if (this.nextTimer) {
      clearTimeout(this.nextTimer)
      this.nextTimer = null
    }
  },
  methods: {
    getItemKey: function(item, index) {
      return item + '-' + index
    },
    startTest: function() {
      this.correctCount = 0
      this.currentIndex = 0
      this.score = 0
      this.lockInput = false
      this.tappedIndex = -1
      // 洗牌后取前 8 题
      var bank = QUESTION_BANK.slice()
      for (var i = bank.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1))
        var tmp = bank[i]
        bank[i] = bank[j]
        bank[j] = tmp
      }
      this.roundQuestions = bank.slice(0, 8)
      this.step = 'playing'
      this.loadQuestion(0)
    },
    loadQuestion: function(index) {
      this.currentIndex = index
      this.currentQuestion = this.roundQuestions[index]
      this.tappedIndex = -1
      this.lockInput = false
      this.timerLeft = 8
      this.startTimer()
    },
    startTimer: function() {
      this.stopTimer()
      this.timer = setInterval(() => {
        this.timerLeft--
        if (this.timerLeft <= 0) {
          this.timerLeft = 0
          this.onTimeout()
        }
      }, 1000)
    },
    stopTimer: function() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    handleTap: function(index) {
      if (this.lockInput || !this.currentQuestion) return
      this.lockInput = true
      this.stopTimer()
      this.tappedIndex = index
      if (index === this.currentQuestion.oddIndex) {
        this.correctCount++
      }
      this.scheduleNext()
    },
    onTimeout: function() {
      if (this.lockInput) return
      this.lockInput = true
      this.stopTimer()
      this.tappedIndex = -1
      // 超时未作答，短暂高亮正确答案后进入下一题
      this.scheduleNext()
    },
    scheduleNext: function() {
      if (this.nextTimer) clearTimeout(this.nextTimer)
      this.nextTimer = setTimeout(() => {
        this.nextTimer = null
        this.advance()
      }, 700)
    },
    advance: function() {
      if (this.currentIndex + 1 >= this.roundQuestions.length) {
        this.finishTest()
      } else {
        this.loadQuestion(this.currentIndex + 1)
      }
    },
    finishTest: function() {
      this.stopTimer()
      this.score = Math.round(this.correctCount / this.roundQuestions.length * 100)
      this.step = 'result'
    },
    submitResult: function() {
      var memberId = this.memberId || uni.getStorageSync('currentChildId') || ''
      if (!memberId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }
      submitCognitiveSelfTest(memberId, 'perceptionScore', this.score)
        .then((res) => {
          uni.showToast({ title: '提交成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        })
        .catch((err) => {
          console.error('提交感知觉测试成绩失败', err)
          uni.showToast({ title: '提交失败，请重试', icon: 'none' })
        })
    },
    retryTest: function() {
      this.startTest()
    }
  }
}
</script>

<style scoped>
.test-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 60rpx 40rpx;
}

.step-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== 说明页 ===== */
.title-icon {
  font-size: 88rpx;
  margin-bottom: 24rpx;
}

.test-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 32rpx;
}

.test-desc {
  font-size: 30rpx;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  text-align: center;
}

.test-meta {
  font-size: 24rpx;
  color: rgba(255,255,255,0.45);
  margin-top: 24rpx;
  margin-bottom: 80rpx;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, #4ECDC4, #45B7AA);
  color: #fff;
  font-size: 34rpx;
  font-weight: bold;
  width: 480rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 46rpx;
  border: none;
  margin-top: 60rpx;
  padding: 0;
}

.btn-primary::after {
  border: none;
}

.btn-secondary {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  font-size: 32rpx;
  width: 480rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 46rpx;
  border: 2rpx solid rgba(255,255,255,0.25);
  margin-top: 32rpx;
  padding: 0;
}

.btn-secondary::after {
  border: none;
}

/* ===== 答题页 ===== */
.progress-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24rpx;
}

.progress-text {
  font-size: 28rpx;
  color: rgba(255,255,255,0.7);
}

.timer-bar {
  width: 100%;
  height: 16rpx;
  background: rgba(255,255,255,0.12);
  border-radius: 8rpx;
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ECDC4, #45B7AA);
  border-radius: 8rpx;
  transition: width 0.9s linear;
}

.timer-text {
  display: block;
  font-size: 26rpx;
  color: #4ECDC4;
  margin-top: 12rpx;
  text-align: center;
}

.question-hint {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin: 40rpx 0 32rpx;
  text-align: center;
}

.grid-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 190rpx;
  background: #2a2a4a;
  border-radius: 24rpx;
  border: 4rpx solid transparent;
  margin-bottom: 24rpx;
  box-sizing: border-box;
}

.grid-cell:active {
  background: #35406b;
}

.cell-emoji {
  font-size: 50rpx;
}

.cell-correct {
  background: #2f4a4a;
  border-color: #4ECDC4;
}

.cell-wrong {
  background: #4a2f35;
  border-color: #ff6b6b;
}

/* ===== 结果页 ===== */
.result-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 48rpx;
}

.score-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
  border: 10rpx solid #4ECDC4;
  background: rgba(78,205,196,0.1);
  margin-bottom: 36rpx;
}

.score-num {
  font-size: 88rpx;
  font-weight: bold;
  color: #4ECDC4;
}

.score-row {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.score-label {
  font-size: 30rpx;
  color: rgba(255,255,255,0.7);
  margin-right: 20rpx;
}

.dimension-tag {
  font-size: 24rpx;
  color: #4ECDC4;
  border: 2rpx solid #4ECDC4;
  border-radius: 24rpx;
  padding: 6rpx 24rpx;
}

.result-tip {
  margin-bottom: 20rpx;
}

.result-tip-text {
  font-size: 28rpx;
  color: rgba(255,255,255,0.6);
}
</style>