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

<template>
  <view class="container">
    <!-- 品牌头部 -->
    <PageBanner theme="mind-wisdom"
      tagline="心智成长 · 智慧人生"
      quote="知己知彼，百战不殆" />

    <!-- ===== 六维雷达图（登录后可见） ===== -->
    <view class="radar-section" v-if="isLoggedIn && familyMembers.length > 0">
      <!-- 家庭成员切换 -->
      <scroll-view class="member-scroll" scroll-x show-scrollbar="false">
        <view class="member-row">
          <view
            v-for="member in familyMembers"
            :key="member.childId"
            :class="['member-tab', member.childId === selectedChildId ? 'active' : '']"
            @click="selectMember(member.childId)"
          >
            <text class="member-name">{{ member.childName }}</text>
            <text class="member-overall">{{ member.overallScore || 0 }}分</text>
          </view>
        </view>
      </scroll-view>

      <!-- 雷达图 -->
      <view class="radar-card">
        <RadarChart
          :dimensions="dimensions"
          :scores="currentScores"
          :childName="currentChildName"
          @dimensionClick="goTraining"
        />
        <text class="radar-hint">点击维度标签进入能力训练</text>
      </view>
    </view>

    <!-- 未登录雷达图占位 -->
    <view class="radar-placeholder" v-else-if="!isLoggedIn">
      <view class="placeholder-icon">&#x1F9E0;</view>
      <text class="placeholder-title">认知能力评估</text>
      <text class="placeholder-desc">登录后查看六维认知雷达图，了解孩子的感知、专注、记忆等能力发展</text>
      <view class="placeholder-btn" @click="goLogin">立即登录</view>
    </view>

    <!-- 功能入口 -->
    <view class="func-section" v-if="sectionVisible('func_entries')">
      <view class="func-grid">
        <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
          <view class="func-icon-wrap">
            <text class="func-icon">{{ item.icon }}</text>
          </view>
          <text class="func-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 每日心理 -->
    <view class="section" v-if="sectionVisible('daily_tip')">
      <view class="section-header">
        <text class="section-title">每日心理</text>
      </view>
      <view class="tip-card">
        <view class="tip-left-bar"></view>
        <view class="tip-body">
          <text class="tip-title">{{ dailyTip.title }}</text>
          <text class="tip-content">{{ dailyTip.content }}</text>
          <view class="tip-footer">
            <text class="tip-source">{{ dailyTip.source }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐阅读 -->
    <view class="section" v-if="sectionVisible('recommended_reading')">
      <view class="section-header">
        <text class="section-title">推荐阅读</text>
      </view>
      <view class="article-list">
        <view class="article-card" v-for="article in articles" :key="article.id" @click="goArticleDetail(article.id)">
          <view class="article-category" :style="{ background: article.categoryColor }">
            <text class="article-category-text">{{ article.category }}</text>
          </view>
          <text class="article-title">{{ article.title }}</text>
          <text class="article-summary">{{ article.summary }}</text>
          <view class="article-meta">
            <view class="meta-item">
              <text class="meta-icon">&#x1F4D6;</text>
              <text class="meta-text">{{ article.views }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-icon">&#x1F44D;</text>
              <text class="meta-text">{{ article.likes }}</text>
            </view>
            <text class="article-date">{{ article.date }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 心智任务 -->
    <view class="section" v-if="sectionVisible('mind_tasks') && isLoggedIn">
      <view class="section-header">
        <text class="section-title">&#x1F9E0; 心智任务</text>
      </view>
      <view class="task-list" v-if="mindTasks.length > 0">
        <view class="task-card" v-for="task in mindTasks" :key="task.id">
          <text class="task-title">{{ task.title }}</text>
          <text class="task-status">{{ task.status === 'completed' ? '已完成' : '进行中' }}</text>
        </view>
      </view>
      <view class="empty-placeholder" v-else>
        <text class="empty-text">暂无相关任务</text>
      </view>
    </view>

    <!-- 相关活动 -->
    <view class="section" v-if="sectionVisible('related_activities') && isLoggedIn">
      <view class="section-header">
        <text class="section-title">&#x1F3C3; 相关活动</text>
      </view>
      <view class="empty-placeholder">
        <text class="empty-text">暂无推荐活动</text>
      </view>
    </view>

    <!-- 已购课程 -->
    <view class="section" v-if="sectionVisible('purchased_courses') && isLoggedIn">
      <view class="section-header">
        <text class="section-title">&#x1F4DA; 已购课程</text>
      </view>
      <view class="empty-placeholder">
        <text class="empty-text">暂无已购课程</text>
      </view>
    </view>

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

<script>
import PageBanner from '../../components/PageBanner.vue'
import RadarChart from '../../components/RadarChart.vue'
import { getVisibleSections, getFeaturedArticles, getEnergyOverview } from '../../utils/api.js'

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

export default {
  components: { PageBanner, RadarChart },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      currentChildId: null,
      visibleSections: [],

      // 六维雷达图
      dimensions: [
        { label: '感知', key: 'perception' },
        { label: '专注', key: 'focus' },
        { label: '记忆', key: 'memory' },
        { label: '逻辑', key: 'logic' },
        { label: '空间', key: 'spatial' },
        { label: '加工速度', key: 'processingSpeed' }
      ],
      familyMembers: [],
      selectedChildId: null,
      currentScores: [0, 0, 0, 0, 0, 0],
      currentChildName: '',

      funcList: [
        { icon: '\u{1F4D6}', label: '阅读', needLogin: false, page: '' },
        { icon: '\u{1F9E9}', label: '认知', needLogin: false, page: '' },
        { icon: '\u{1F4AA}', label: '专注', needLogin: false, page: '' },
        { icon: '\u{1F3AF}', label: '决策', needLogin: false, page: '' },
        { icon: '\u{1F31F}', label: '心智测评', needLogin: true, page: '' }
      ],
      dailyTip: {
        title: '成长型思维',
        content: '拥有成长型思维的孩子相信自己的能力可以通过努力提升，他们更愿意接受挑战，从失败中学习。作为家长，多鼓励孩子的努力而非天赋，可以帮助孩子建立成长型思维。',
        source: '—— 卡罗尔·德韦克《终身成长》'
      },
      articles: [],
      mindTasks: []
    }
  },
  onShow() {
    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (this.isLoggedIn) {
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      this.currentChildId = uni.getStorageSync('currentChildId') || null
    }
    this.loadSectionConfig()
    this.loadFeaturedArticles()
    if (this.isLoggedIn) {
      this.loadEnergyData()
      this.loadFamilyCognitiveData()
    }
  },
  methods: {
    // ===== 区块可见性 =====
    async loadSectionConfig() {
      if (!uni.getStorageSync('token')) {
        this.visibleSections = ['func_entries', 'daily_tip', 'recommended_reading']
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      try {
        var res = await getVisibleSections({ pageKey: 'mind', role: role })
        if (res.code === 200 && res.data) {
          this.visibleSections = res.data.map(function(s) { return s.sectionKey })
        }
      } catch (e) {
        this.visibleSections = ['func_entries', 'daily_tip', 'recommended_reading', 'mind_tasks', 'related_activities', 'purchased_courses']
      }
    },
    sectionVisible(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },

    // ===== 六维认知数据 =====
    async loadFamilyCognitiveData() {
      var self = this
      var url = BASE_URL + '/api/cognitive/family'
      var token = uni.getStorageSync('token')
      var userId = uni.getStorageSync('userId') || ''
      try {
        var res = await new Promise(function(resolve, reject) {
          uni.request({
            url: url,
            method: 'POST',
            header: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer ' + token,
              'X-User-Id': userId
            },
            success: function(r) { resolve(r) },
            fail: function(e) { reject(e) }
          })
        })
        if (res.statusCode === 200 && res.data && res.data.code === 200 && res.data.data) {
          var data = res.data.data
          if (Array.isArray(data) && data.length > 0) {
            self.familyMembers = data
            var first = data[0]
            self.selectedChildId = first.childId
            self.updateCurrentScores(first)
          }
        } else if (res.data && res.data.code === 200) {
          // empty array
          self.familyMembers = []
        }
      } catch (e) {
        console.log('获取认知数据失败', e)
      }
    },
    selectMember(childId) {
      if (childId === this.selectedChildId) return
      this.selectedChildId = childId
      var member = this.familyMembers.find(function(m) { return m.childId === childId })
      if (member) {
        this.updateCurrentScores(member)
      }
    },
    updateCurrentScores(member) {
      this.currentChildName = member.childName || ''
      this.currentScores = [
        member.perceptionScore || 0,
        member.focusScore || 0,
        member.memoryScore || 0,
        member.logicScore || 0,
        member.spatialScore || 0,
        member.processingSpeedScore || 0
      ]
    },
    goTraining(dimensionKey) {
      if (!this.selectedChildId) {
        uni.showToast({ title: '请先选择家庭成员', icon: 'none' })
        return
      }
      var url = '/pages/mind/training?dimension=' + dimensionKey + '&childId=' + this.selectedChildId
      uni.navigateTo({ url: url })
    },

    // ===== 文章 =====
    async loadFeaturedArticles() {
      try {
        const res = await getFeaturedArticles({ size: 5 })
        if (res.code === 200 && res.data) {
          const gradientColors = [
            'linear-gradient(135deg, #8B5CF6, #A78BFA)',
            'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
            'linear-gradient(135deg, #10B981, #34D399)',
            'linear-gradient(135deg, #8B5CF6, #C084FC)',
            'linear-gradient(135deg, #F97316, #FB923C)'
          ]
          let list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          this.articles = list.map(function(item, index) {
            return {
              id: item.id,
              category: item.categoryName || '成长文章',
              categoryColor: gradientColors[index % gradientColors.length],
              title: item.title || '',
              summary: item.summary || '',
              views: item.viewCount ? String(item.viewCount) : '0',
              likes: '0',
              date: item.publishedAt ? item.publishedAt.slice(0, 10) : ''
            }
          })
        }
      } catch (e) {}
    },

    // ===== 能量数据 =====
    async loadEnergyData() {
      var childId = this.currentChildId
      if (!childId) return
      try {
        var res = await getEnergyOverview(childId)
        if (res && res.data) {
          // energy data loaded (no longer used in UI but kept for compatibility)
        }
      } catch (e) { console.log('获取能量概览失败', e) }
    },

    // ===== 功能入口点击 =====
    onFuncClick(item) {
      if (item.needLogin && !this.isLoggedIn) {
        uni.showModal({
          title: '提示',
          content: '请先登录后使用此功能',
          success: function(res) { if (res.confirm) uni.navigateTo({ url: '/pages/login/login' }) }
        })
        return
      }
      if (item.page) uni.navigateTo({ url: item.page })
    },
    goArticleDetail(id) {
      var token = uni.getStorageSync('token')
      if (token) {
        uni.navigateTo({ url: '/pages/mind/article-detail?id=' + id })
      } else {
        uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/mind/index') })
      }
    },
    goReportDetail() {},
    goAssessment() { uni.navigateTo({ url: '/pages/assessment/index' }) },
    goLogin() { uni.navigateTo({ url: '/pages/login/login' }) }
  }
}
</script>

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

/* ===== 雷达图区域 ===== */
.radar-section {
  margin: 20rpx 30rpx;
}

/* 成员切换标签 */
.member-scroll {
  width: 100%;
  margin-bottom: 16rpx;
}
.member-row {
  display: flex;
  flex-direction: row;
  padding: 4rpx 0;
  white-space: nowrap;
}
.member-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 32rpx;
  margin-right: 16rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  min-width: 120rpx;
  flex-shrink: 0;
}
.member-tab.active {
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
}
.member-tab.active .member-name {
  color: #fff;
}
.member-tab.active .member-overall {
  color: rgba(255,255,255,0.9);
}
.member-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}
.member-overall {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}

/* 雷达图卡片 */
.radar-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 20rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.radar-hint {
  font-size: 22rpx;
  color: #bbb;
  margin-top: 16rpx;
}

/* 雷达图未登录占位 */
.radar-placeholder {
  margin: 30rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.placeholder-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.placeholder-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.placeholder-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 30rpx;
}
.placeholder-btn {
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 16rpx 64rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
}

/* ===== 功能区入口 ===== */
.func-section {
  margin: 20rpx 30rpx;
}
.func-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.func-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.func-icon {
  font-size: 40rpx;
}
.func-label {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}
.func-item:active {
  opacity: 0.7;
}

/* ===== 通用区块 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* ===== 每日心理 ===== */
.tip-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.tip-left-bar {
  width: 6rpx;
  background: linear-gradient(180deg, #5B9BD5, #8FC5E8);
  flex-shrink: 0;
}
.tip-body {
  flex: 1;
  padding: 28rpx 24rpx;
}
.tip-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #5B9BD5;
  display: block;
  margin-bottom: 12rpx;
}
.tip-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  margin-bottom: 16rpx;
}
.tip-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.tip-source {
  font-size: 22rpx;
  color: #bbb;
}

/* ===== 推荐阅读 ===== */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.article-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.article-category {
  display: inline-block;
  padding: 4rpx 18rpx;
  border-radius: 20rpx;
  margin-bottom: 14rpx;
}
.article-category-text {
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
}
.article-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.article-summary {
  font-size: 24rpx;
  color: #888;
  line-height: 1.5;
  display: block;
  margin-bottom: 20rpx;
}
.article-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20rpx;
}
.meta-icon {
  font-size: 22rpx;
  margin-right: 4rpx;
}
.meta-text {
  font-size: 22rpx;
  color: #bbb;
}
.article-date {
  font-size: 22rpx;
  color: #bbb;
  margin-left: auto;
}

/* ===== 任务列表 ===== */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.task-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.task-title {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
}
.task-status {
  font-size: 22rpx;
  color: #999;
  margin-left: 16rpx;
}

/* ===== 空状态占位 ===== */
.empty-placeholder {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.empty-text {
  font-size: 24rpx;
  color: #ccc;
}

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