cfc/cfc-frontend/pages/cognitive-hall.vue

<template>
  <view class="page">
    <view class="header">
      <text class="title">认知能力测评</text>
      <text class="subtitle">通过小游戏评估七项核心认知能力</text>
    </view>

    <view class="member-selector" v-if="members.length > 1">
      <text class="selector-label">选择测评对象：</text>
      <view class="member-tabs">
        <view
          class="member-tab"
          :class="{ 'member-tab-active': selectedMemberId === m.id }"
          v-for="m in members"
          :key="m.id"
          @click="selectMember(m.id)"
        >
          <text>{{ m.nickname }}</text>
        </view>
      </view>
    </view>

    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>

    <view class="game-list" v-if="!loading">
      <view
        class="game-card"
        v-for="game in games"
        :key="game.code"
        @click="navigateTo(game.path)"
      >
        <view class="game-icon-wrap" :style="{ background: game.colorBg }">
          <text class="game-icon">{{ game.icon }}</text>
        </view>
        <view class="game-info">
          <text class="game-name">{{ game.name }}</text>
          <text class="game-desc">{{ game.desc }}</text>
          <text class="game-status" v-if="game.completed">已完成</text>
          <text class="game-status-pending" v-else>未测评</text>
        </view>
        <text class="game-arrow">›</text>
      </view>
    </view>

    <view class="empty" v-if="!loading && !hasData">
      <text class="empty-icon">🧠</text>
      <text class="empty-text">暂无认知数据</text>
      <text class="empty-hint">完成任意一项测试后即可查看详细报告</text>
    </view>

    <view class="action-row">
      <view class="btn btn--outline" @click="goReport">查看完整报告</view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      memberId: '',
      members: [],
      selectedMemberId: null,
      scores: null,
      loading: true
    }
  },
  computed: {
    hasData: function() {
      if (!this.scores) return false
      var s = this.scores
      return !!(s.perceptionScore || s.focusScore || s.memoryScore ||
        s.logicScore || s.spatialScore || s.processingSpeedScore || s.languageScore)
    },
    games: function() {
      var s = this.scores
      return [
        { code: 'perception', name: '感知能力', desc: '感官信息处理能力', icon: '👁️', colorBg: 'rgba(99,102,241,0.15)', path: '/pages/cognitive-test/perception-test', completed: s && s.perceptionScore != null },
        { code: 'focus', name: '专注力', desc: '持续集中和抗干扰能力', icon: '🎯', colorBg: 'rgba(239,68,68,0.15)', path: '/pages/games/schulte', completed: s && s.focusScore != null },
        { code: 'memory', name: '记忆力', desc: '信息编码和回忆能力', icon: '🧠', colorBg: 'rgba(99,102,241,0.15)', path: '/pages/cognitive-test/memory-test', completed: s && s.memoryScore != null },
        { code: 'logic', name: '逻辑推理', desc: '推理和问题解决能力', icon: '💡', colorBg: 'rgba(251,191,36,0.15)', path: '/pages/cognitive-test/logic-test', completed: s && s.logicScore != null },
        { code: 'spatial', name: '空间思维', desc: '空间想象和方位判断', icon: '🗺️', colorBg: 'rgba(16,185,129,0.15)', path: '/pages/cognitive-test/spatial-test', completed: s && s.spatialScore != null },
        { code: 'speed', name: '加工速度', desc: '信息处理和反应速度', icon: '⚡', colorBg: 'rgba(245,158,11,0.15)', path: '/pages/cognitive-test/speed-test', completed: s && s.processingSpeedScore != null },
        { code: 'language', name: '语言表达', desc: '词汇理解与语言组织', icon: '🗣️', colorBg: 'rgba(236,72,153,0.15)', path: '/pages/cognitive-test/language-test', completed: s && s.languageScore != null }
      ]
    }
  },
  onLoad: function(options) {
    if (options && options.memberId) {
      this.memberId = options.memberId
    } else {
      this.memberId = uni.getStorageSync('currentChildId') || ''
    }
    this.selectedMemberId = this.memberId
    this.loadMembers()
    this.loadScores()
  },
  methods: {
    loadMembers: function() {
      var self = this
      getFamilyMemberList({ visibleOnly: true })
        .then(function(res) {
          if (res && res.code === 200 && res.data) {
            self.members = res.data
            if (!self.memberId && res.data.length > 0) {
              self.memberId = res.data[0].id
              self.selectedMemberId = res.data[0].id
              self.loadScores()
            }
          }
        })
        .catch(function() {
          // 静默失败
        })
    },
    selectMember: function(id) {
      this.selectedMemberId = id
      this.loadScores()
    },
    loadScores: function() {
      var self = this
      var memberId = this.selectedMemberId
      if (!memberId) {
        this.loading = false
        return
      }
      this.loading = true
      getCognitiveChildScores(memberId)
        .then(function(res) {
          if (res && res.code === 200 && res.data) {
            self.scores = res.data
          } else {
            self.scores = null
          }
        })
        .catch(function() {
          self.scores = null
        })
        .finally(function() {
          self.loading = false
        })
    },
    navigateTo: function(path) {
      var url = path + '?memberId=' + this.selectedMemberId
      uni.navigateTo({ url: url })
    },
    goReport: function() {
      uni.navigateTo({ url: '/pages/wisdom-detail/cognitive-report?memberId=' + (this.selectedMemberId || '') })
    }
  }
}
</script>

<style scoped lang="scss">
// ===== 页面级局部调色板（单页专有色阶；同值才映射全局令牌，约定见 uni.scss §14） =====
$c-text-ghost-3: #AAA;
$c-border-hair:  $facade-hairline-2;      // 发丝分隔线
$c-ink-night:    #1A1A2E;   // 深夜蓝黑（本页深色文字）

.page {
  min-height: 100vh;
  background: $app-bg;
  padding-bottom: 40rpx;
  box-sizing: border-box;
}

.header {
  padding: 40rpx 30rpx 30rpx;
  background: linear-gradient(135deg, $dim-wisdom 0%, $facade-violet 100%);
  color: $app-surface;
}

.title {
  font-size: 44rpx;
  font-weight: bold;
  display: block;
}

.subtitle {
  font-size: 26rpx;
  opacity: 0.85;
  margin-top: 10rpx;
  display: block;
}

.member-selector {
  padding: 24rpx 30rpx;
  background: $app-surface;
  margin: 20rpx 0;
  border-radius: 16rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.selector-label {
  font-size: 26rpx;
  color: $facade-text-body;
}

.member-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 16rpx;
}

.member-tab {
  padding: 10rpx 28rpx;
  border-radius: 30rpx;
  margin: 8rpx 8rpx 0 0;
  background: $c-border-hair;
  font-size: 26rpx;
  color: $facade-text-body;
}

.member-tab-active {
  background: $dim-wisdom;
  color: $app-surface;
}

.game-list {
  padding: 0 30rpx;
}

.game-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: $app-surface;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.game-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.game-info {
  flex: 1;
  margin-left: 24rpx;
}

.game-name {
  font-size: 30rpx;
  font-weight: bold;
  color: $c-ink-night;
  display: block;
}

.game-desc {
  font-size: 24rpx;
  color: $facade-text-faint;
  margin-top: 6rpx;
  display: block;
}

.game-status {
  font-size: 22rpx;
  color: $dim-action;
  margin-top: 8rpx;
  display: block;
}

.game-status-pending {
  font-size: 22rpx;
  color: $c-text-ghost-3;
  margin-top: 8rpx;
  display: block;
}

.game-arrow {
  font-size: 40rpx;
  color: $facade-text-ghost;
  margin-left: 16rpx;
}

.loading, .empty {
  text-align: center;
  padding: 80rpx 40rpx;
  color: $facade-text-muted;
  font-size: 28rpx;
}

.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-hint {
  font-size: 24rpx;
  color: $facade-text-ghost-light;
  margin-top: 10rpx;
  display: block;
}

.action-row {
  padding: 30rpx;
}

.btn {
  width: 100%;
  padding: 24rpx 0;
  border-radius: 50rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  box-sizing: border-box;
}

.btn--outline {
  border: 2rpx solid $dim-wisdom;
  color: $dim-wisdom;
  background: transparent;
}

.btn--outline:active {
  background: rgba($dim-wisdom, 0.08);
}
</style>