cfc/cfc-frontend/pages/wisdom-detail/training-hub.vue

<template>
  <view class="container">
    <view class="header-bar">
      <text class="back-btn" @click="goBack">← 返回</text>
      <text class="header-title">认知训练中心</text>
      <text class="header-placeholder"></text>
    </view>

    <view class="desc-section">
      <text class="desc-text">选择训练游戏，提升你的认知能力</text>
    </view>

    <view class="game-card" @click="goGame('logic-test')">
      <view class="game-card-left">
        <text class="game-icon">🧩</text>
      </view>
      <view class="game-card-center">
        <text class="game-name">逻辑推理测试</text>
        <text class="game-desc">数列推理 · 锻炼逻辑思维</text>
      </view>
      <text class="game-arrow">›</text>
    </view>

    <view class="game-card" @click="goGame('perception-test')">
      <view class="game-card-left">
        <text class="game-icon">👁️</text>
      </view>
      <view class="game-card-center">
        <text class="game-name">感知觉测试</text>
        <text class="game-desc">找不同 · 提高感官信息处理能力</text>
      </view>
      <text class="game-arrow">›</text>
    </view>

    <view class="game-card" @click="goGame('memory-test')">
      <view class="game-card-left">
        <text class="game-icon">🧠</text>
      </view>
      <view class="game-card-center">
        <text class="game-name">记忆力测试</text>
        <text class="game-desc">数字广度 · 增强信息记忆与回忆能力</text>
      </view>
      <text class="game-arrow">›</text>
    </view>

    <view class="game-card" @click="goGame('spatial-test')">
      <view class="game-card-left">
        <text class="game-icon">🧭</text>
      </view>
      <view class="game-card-center">
        <text class="game-name">空间思维测试</text>
        <text class="game-desc">方向旋转 · 培养空间想象与构建能力</text>
      </view>
      <text class="game-arrow">›</text>
    </view>

    <view class="game-card" @click="goGame('speed-test')">
      <view class="game-card-left">
        <text class="game-icon">⚡</text>
      </view>
      <view class="game-card-center">
        <text class="game-name">加工速度测试</text>
        <text class="game-desc">符号匹配 · 加快信息处理与反应速度</text>
      </view>
      <text class="game-arrow">›</text>
    </view>

    <view class="game-card" @click="goGame('schulte')">
      <view class="game-card-left">
        <text class="game-icon">🎯</text>
      </view>
      <view class="game-card-center">
        <text class="game-name">舒尔特方格</text>
        <text class="game-desc">提升专注力和反应速度</text>
      </view>
      <text class="game-arrow">›</text>
    </view>

    <view class="game-card" @click="goGame('1a2b')">
      <view class="game-card-left">
        <text class="game-icon">🔢</text>
      </view>
      <view class="game-card-center">
        <text class="game-name">猜数字</text>
        <text class="game-desc">锻炼逻辑思维和推理能力</text>
      </view>
      <text class="game-arrow">›</text>
    </view>

    <view class="note-section">
      <text class="note-text">完成测试后，认知雷达图会更新对应维度得分</text>
    </view>
  </view>
</template>

<script>
export default {
  data: function() {
    return {
      memberId: null
    }
  },
  onLoad: function(options) {
    if (options && options.memberId) {
      this.memberId = options.memberId
    }
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    goGame: function(game) {
      var url = ''
      if (game === 'schulte') {
        url = '/pages/games/schulte'
      } else if (game === '1a2b') {
        url = '/pages/games/1a2b'
      } else {
        url = '/pages/cognitive-test/' + game
      }
      if (url) {
        var memberId = this.memberId || uni.getStorageSync('currentChildId') || ''
        if (memberId) {
          url += '?memberId=' + memberId
        }
        uni.navigateTo({ url: url })
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8E1 0%, #f5f7fa 100%);
  padding-bottom: 60rpx;
}

.header-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 80rpx 30rpx 30rpx;
}

.back-btn {
  font-size: 30rpx;
  color: #B8860B;
  padding: 10rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #B8860B;
}

.header-placeholder {
  width: 60rpx;
}

.desc-section {
  padding: 0 30rpx 30rpx;
}

.desc-text {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  display: block;
}

.game-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  margin: 0 30rpx 20rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 215, 0, 0.12);
  border-left: 8rpx solid #FFD700;
}

.game-card:active {
  opacity: 0.8;
}

.game-card-left {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  background: #FFF8E1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.game-icon {
  font-size: 40rpx;
}

.game-card-center {
  flex: 1;
}

.game-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 6rpx;
}

.game-desc {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.game-arrow {
  font-size: 40rpx;
  color: #ccc;
  margin-left: 10rpx;
}

.note-section {
  padding: 40rpx 30rpx;
  text-align: center;
}

.note-text {
  font-size: 24rpx;
  color: #ccc;
}
</style>