cfc/cfc-frontend/pages/mind/training.vue

<template>
  <view class="container">
    <PageBanner theme="mind-wisdom"
      tagline="能力训练"
      :quote="currentQuote" />

    <!-- 训练描述卡片 -->
    <view class="dimension-card" v-if="currentDim">
      <view class="dimension-icon-wrap" :style="{ background: currentDim.lightColor }">
        <text class="dimension-icon">{{ currentDim.icon }}</text>
      </view>
      <text class="dimension-name">{{ currentDim.name }}</text>
      <text class="dimension-desc">{{ currentDim.desc }}</text>
    </view>

    <!-- 开始训练按钮 -->
    <view class="action-section">
      <button class="start-btn" :style="{ background: currentDim ? currentDim.color : '#8B5CF6' }"
        :disabled="isTraining" @click="startTraining">
        <text class="btn-text" v-if="!isTraining">开始训练</text>
        <text class="btn-text" v-else>训练中...</text>
      </button>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'

var BASE_URL = 'http://localhost:9082'

var accountInfo = null
try {
  accountInfo = uni.getAccountInfoSync()
} catch (_e) {}
var env = accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.envVersion
if (env) {
  switch (env) {
    case 'develop':
      BASE_URL = 'http://localhost:9082'
      break
    case 'trial':
      BASE_URL = 'https://cfc.iwintrue.com'
      break
    case 'release':
      BASE_URL = 'https://cfc.etotem.com.cn'
      break
  }
}

var DIMENSION_MAP = {
  perception: {
    key: 'perception',
    name: '感知训练',
    icon: '\u{1F441}',
    color: '#8B5CF6',
    lightColor: '#EDE9FE',
    desc: '通过图形匹配、颜色分辨等练习提升感知能力',
    quote: '观千剑而后识器，操千曲而后晓声'
  },
  focus: {
    key: 'focus',
    name: '专注训练',
    icon: '\u{1F3AF}',
    color: '#F97316',
    lightColor: '#FFF7ED',
    desc: '通过舒尔特方格、数字追踪等练习提升专注力',
    quote: '专心致志，惟弈秋之为听'
  },
  memory: {
    key: 'memory',
    name: '记忆训练',
    icon: '\u{1F9E0}',
    color: '#10B981',
    lightColor: '#ECFDF5',
    desc: '通过记忆卡片、数字记忆等练习提升记忆力',
    quote: '温故而知新，可以为师矣'
  },
  logic: {
    key: 'logic',
    name: '逻辑训练',
    icon: '\u{1F9E9}',
    color: '#3B82F6',
    lightColor: '#EFF6FF',
    desc: '通过推理题、模式识别等练习提升逻辑思维',
    quote: '学而不思则罔，思而不学则殆'
  },
  spatial: {
    key: 'spatial',
    name: '空间训练',
    icon: '\u{1F9CA}',
    color: '#8D6E63',
    lightColor: '#EFEBE9',
    desc: '通过空间旋转、立体构建等练习提升空间思维能力',
    quote: '横看成岭侧成峰，远近高低各不同'
  },
  processingSpeed: {
    key: 'processingSpeed',
    name: '加工速度训练',
    icon: '\u26A1',
    color: '#FFD700',
    lightColor: '#FFFBEB',
    desc: '通过快速反应、速度测试等练习提升加工速度',
    quote: '静如处子，动如脱兔'
  }
}

export default {
  components: { PageBanner },
  data() {
    return {
      dimension: null,
      childId: null,
      isTraining: false
    }
  },
  computed: {
    currentDim: function() {
      var dim = DIMENSION_MAP[this.dimension]
      return dim || null
    },
    currentQuote: function() {
      var dim = this.currentDim
      return dim ? dim.quote : '知己知彼，百战不殆'
    }
  },
  onLoad: function(options) {
    if (options && options.dimension) {
      this.dimension = options.dimension
    }
    if (options && options.childId) {
      this.childId = options.childId
    } else {
      this.childId = uni.getStorageSync('currentChildId') || null
    }
    uni.setNavigationBarTitle({
      title: this.currentDim ? this.currentDim.name : '能力训练'
    })
  },
  methods: {
    startTraining: function() {
      if (this.isTraining) return
      this.isTraining = true

      var self = this
      setTimeout(function() {
        var newScore = Math.floor(Math.random() * 31) + 70
        self.updateScore(newScore)
      }, 2000)
    },
    updateScore: function(score) {
      var self = this
      var token = uni.getStorageSync('token')
      var userId = uni.getStorageSync('userId') || ''

      uni.request({
        url: BASE_URL + '/api/cognitive/update',
        method: 'POST',
        data: {
          childId: self.childId,
          dimension: self.dimension + 'Score',
          score: score
        },
        header: {
          'Content-Type': 'application/json',
          'X-User-Id': userId,
          'Authorization': token ? 'Bearer ' + token : ''
        },
        success: function(res) {
          self.isTraining = false
          if (res.data && res.data.code === 200) {
            uni.showToast({
              title: '训练完成！',
              icon: 'success'
            })
            setTimeout(function() {
              uni.navigateBack({
                delta: 1
              })
            }, 1500)
          } else {
            uni.showToast({
              title: res.data && res.data.message ? res.data.message : '提交失败',
              icon: 'none'
            })
          }
        },
        fail: function() {
          self.isTraining = false
          uni.showToast({
            title: '网络请求失败，请重试',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

/* ===== 训练描述卡片 ===== */
.dimension-card {
  margin: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.dimension-icon-wrap {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.dimension-icon {
  font-size: 56rpx;
}

.dimension-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.dimension-desc {
  font-size: 26rpx;
  color: #888;
  text-align: center;
  line-height: 1.6;
}

/* ===== 按钮区域 ===== */
.action-section {
  margin: 20rpx 30rpx;
}

.start-btn {
  width: 100%;
  height: 96rpx;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.15);
}

.start-btn[disabled] {
  opacity: 0.6;
}

.start-btn:active {
  opacity: 0.85;
}

.btn-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 120rpx;
}
</style>