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

<template>
  <view class="wisdom-container">
    <!-- Tabbar 切换过渡页 -->
    <tab-transition v-if="showTabTransition" dimCode="wisdom" />

    <!-- 1. 品牌头部 -->
    <PageBanner theme="wisdom"
      tagline="学以启智 · 慧及未来"
      quote="知者不惑，仁者不忧" />

    <!-- 2. 游客专属区块 -->
    <template v-if="!isLoggedIn">
      <LoginGuideCard
        title="登录后查看全家智慧成长数据"
        :items="[
          '查看全家认知能量数据和测评报告',
          '记录每日成长，获取智慧能量',
          '参与认知训练，提升综合能力'
        ]" />
      <WisdomTips />
    </template>

    <!-- 3. 五维能量条（登录后） -->
    <FamilyEnergyBar
      v-if="isLoggedIn"
      dimensionCode="wisdom"
      :sandboxData="sandboxData"
      :dualDimension="dualDimension" />

    <!-- 4. 家庭成员关系图谱（登录后） -->
    <FamilyRelationGraph
      v-if="isLoggedIn && familyMembersVisible.length > 0"
      dimensionCode="wisdom"
      :selfId="activeChildId"
      :members="familyMembersVisible"
      :energyMap="energyMapForGraph"
      :intimacyMap="intimacyMapForGraph"
      @memberTap="goMemberDetail" />

    <!-- 5. 用户快捷入口 -->
    <UserQuickEntry
      v-if="isLoggedIn"
      :userName="userName"
      roleName="家长"
      :currentChildName="activeChildName"
      :children="children"
      @childChanged="onChildChanged"
      @scrollTo="scrollToSection" />

    <!-- 6. 功能入口 -->
    <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>

    <!-- 7. 认知摘要区（登录后） -->
    <view class="section" v-if="isLoggedIn">
      <view class="section-header">
        <text class="section-title">认知概览</text>
        <text class="section-more" @click="goCognitiveReport">查看详情 ›</text>
      </view>
      <view class="cognition-summary" v-if="cognitiveReport">
        <view class="summary-main">
          <text class="summary-score">{{ cognitiveReport.overallScore || '--' }}</text>
          <text class="summary-label">综合认知评分</text>
        </view>
        <view class="summary-detail">
          
          <text class="summary-min" v-if="lowestDimension">
            待提升: {{ lowestDimension.label }} ({{ lowestDimension.score }})
          </text>
        </view>
      </view>
      <view class="cognition-empty" v-else>
        <text class="empty-tip">暂无认知测评数据</text>
        <text class="empty-sub">完成DAN评估后查看详细报告</text>
      </view>
    </view>

    <!-- 8. 自己出题入口卡（登录后） -->
    <view class="section highlight-card" v-if="isLoggedIn" @click="goSelfQuiz">
      <view class="highlight-card-inner">
        <view class="highlight-card-left">
          <text class="highlight-icon">✏️</text>
        </view>
        <view class="highlight-card-right">
          <text class="highlight-title">自己出题自己答</text>
          <text class="highlight-desc">元认知训练：自己出题、自己判分，提升学习能力</text>
        </view>
        <text class="highlight-arrow">›</text>
      </view>
    </view>

    <!-- 9. 训练中心入口卡（登录后） -->
    <view class="section highlight-card" v-if="isLoggedIn" @click="goTrainingHub">
      <view class="highlight-card-inner">
        <view class="highlight-card-left">
          <text class="highlight-icon">🧠</text>
        </view>
        <view class="highlight-card-right">
          <text class="highlight-title">认知训练中心</text>
          <text class="highlight-desc">舒尔特方格 · 猜数字 — 多维度认知训练游戏</text>
        </view>
        <text class="highlight-arrow">›</text>
      </view>
    </view>

    <!-- 10. 维度任务 -->
    <DimensionTasks
      v-if="isLoggedIn"
      dimensionCode="wisdom"
      :tasks="dimensionTasks"
      @taskClick="onTaskClick"
      @moreTasks="goTasks" />

    <!-- 11. 维度活动 -->
    <DimensionActivities
      dimensionCode="wisdom"
      :activities="dimensionActivities"
      @activityClick="goActivityDetail"
      @moreActivities="goMoreActivities" />

    <!-- 12. 维度商品 -->
    <DimensionProducts
      dimensionCode="wisdom"
      :products="dimensionProducts"
      @productClick="goProductDetail"
      @moreProducts="goMoreProducts" />

    <!-- 推荐阅读 -->
    <view class="section" v-if="sectionVisible('recommended_reading') && wisdomArticles.length > 0">
      <view class="section-header">
        <text class="section-title">推荐阅读</text>
      </view>
      <view class="article-list">
        <view class="article-card" v-for="article in wisdomArticles" :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>

    <!-- 13. 智慧小贴士 -->
    <view class="section" v-if="sectionVisible('wisdom_tips')">
      <view class="section-header">
        <text class="section-title">智慧小贴士</text>
      </view>
      <view class="tips-list">
        <view class="tip-card" v-for="item in wisdomTips" :key="item.id">
          <text class="tip-title">{{ item.title }}</text>
          <text class="tip-summary">{{ item.summary }}</text>
        </view>
      </view>
    </view>

    <!-- 14. 快捷操作按钮 -->
    <view class="section quick-actions" v-if="isLoggedIn">
      <view class="action-btn" @click="goCognitiveReport">
        <text class="action-icon">📊</text>
        <text class="action-text">认知报告</text>
      </view>
      <view class="action-btn" @click="goTrainingHub">
        <text class="action-icon">🧠</text>
        <text class="action-text">认知训练</text>
      </view>
      <view class="action-btn" @click="goAssessment">
        <text class="action-icon">📋</text>
        <text class="action-text">测评预约</text>
      </view>
      <view class="action-btn" @click="goHome">
        <text class="action-icon">🏠</text>
        <text class="action-text">返回首页</text>
      </view>
    </view>

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

<script>
import TabTransition from '../../components/tab-transition.vue'
import PageBanner from '../../components/PageBanner.vue'
import LoginGuideCard from '../../components/LoginGuideCard.vue'
import WisdomTips from '../../components/WisdomTips.vue'
import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
import UserQuickEntry from '../../components/UserQuickEntry.vue'
import DimensionTasks from '../../components/DimensionTasks.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import DimensionProducts from '../../components/DimensionProducts.vue'
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
import { getVisibleSections, getChildren, getTodayTasksByCategory, getActivityList, getProductsByDomain, getFamilyEnergySandbox, getAssessmentLatestResult, getFeaturedArticles } from '../../utils/api.js'

export default {
  components: { TabTransition, PageBanner, LoginGuideCard, WisdomTips, FamilyEnergyBar, UserQuickEntry, DimensionTasks, DimensionActivities, DimensionProducts, FamilyRelationGraph },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      showTabTransition: false,
      activeChildId: null,
      activeChildName: '',
      userName: '',
      children: [],
      familyMembersVisible: [],
      sandboxData: null,
      dualDimension: null,
      visibleSections: [],
      cognitiveReport: null,
      lowestDimension: null,
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: [],
      articles: [],
      funcList: [
        { icon: '\u{1F4CA}', label: '认知报告', needLogin: true, page: '/pages/wisdom/cognitive-report' },
        { icon: '\u{270F}\uFE0F', label: '自己出题', needLogin: true, page: '/pages/wisdom/self-quiz' },
        { icon: '\u{1F9E0}', label: '训练中心', needLogin: true, page: '/pages/wisdom/training-hub' },
        { icon: '\u{1F3AF}', label: '测评预约', needLogin: false, page: '/pages/assessment/apply' },
        { icon: '\u{1F4D6}', label: '阅读天地', needLogin: false, page: '/pages/mind/articles' }
      ],
      wisdomTips: [
        { id: 1, title: '认知发展的关键期', summary: '儿童认知发展存在关键期窗口，抓住每个阶段的核心能力培养机会。' },
        { id: 2, title: '元认知训练的意义', summary: '教会孩子"学会如何学习"，通过自我监控和反思提升学习效率。' },
        { id: 3, title: '专注力的培养方法', summary: '从短时间专注起步，逐步延长专注时长，配合舒尔特方格等训练工具。' },
        { id: 4, title: '多维度认知刺激', summary: '综合运用视、听、触等多种感官刺激，促进大脑神经网络全面发展。' }
      ]
    }
  },
  computed: {
    energyMapForGraph: function() {
      var map = {}
      if (this.sandboxData && this.sandboxData.members) {
        for (var i = 0; i < this.sandboxData.members.length; i++) {
          var m = this.sandboxData.members[i]
          map[m.memberId || m.id] = {
            bodyScore: m.bodyScore || 0,
            mindScore: m.mindScore || 0,
            actionScore: m.actionScore || 0,
            wisdomScore: m.wisdomScore || 0
          }
        }
      }
      return map
    },
    intimacyMapForGraph: function() {
      return {}
    },
    wisdomArticles: function() {
      if (!this.articles || this.articles.length === 0) return []
      var result = []
      for (var i = 0; i < this.articles.length; i++) {
        var a = this.articles[i]
        if (a.relatedDimensions && a.relatedDimensions.indexOf('wisdom') !== -1) {
          result.push(a)
        }
      }
      if (result.length === 0) return this.articles.slice(0, 5)
      return result.slice(0, 5)
    }
  },
  onShow() {
    // Tabbar 切换过渡动画（最少停留 1 秒）
    this.showTabTransition = true
    var self = this
    setTimeout(function() {
      self.showTabTransition = false
    }, 1100)

    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (this.isLoggedIn) {
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
    }
    this.loadSectionConfig()
    if (this.isLoggedIn) {
      this.loadChildren()
      this.loadFamilyMembersVisible()
      this.loadCognitiveReport()
    }
    this.loadDimensionActivities()
    this.loadDimensionProducts()
    // 游客也能浏览文章
    this.loadFeaturedArticles()
  },
  methods: {
    loadSectionConfig: function() {
      var baseSections = ['func_entries', 'wisdom_tips']
      if (!uni.getStorageSync('token')) {
        this.visibleSections = baseSections
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      var self = this
      getVisibleSections({ pageKey: 'wisdom', role: role }).then(function(res) {
        if (res.code === 200 && res.data) {
          var keys = res.data.map(function(s) { return s.sectionKey })
          var merged = baseSections.slice()
          keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
          self.visibleSections = merged
        }
      }).catch(function(e) {
        self.visibleSections = ['func_entries', 'wisdom_tips']
      })
    },
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data) {
          self.children = res.data
          if (self.children.length > 0) {
            var activeId = uni.getStorageSync('currentChildId')
            if (activeId) {
              for (var i = 0; i < self.children.length; i++) {
                if (self.children[i].id == activeId) {
                  self.activeChildId = activeId
                  self.activeChildName = self.children[i].nickname || self.children[i].name || ''
                  break
                }
              }
            }
            if (!self.activeChildId) {
              self.activeChildId = self.children[0].id
              self.activeChildName = self.children[0].nickname || self.children[0].name || ''
              uni.setStorageSync('currentChildId', self.activeChildId)
            }
          }
        }
      }).catch(function(e) {})
    },
    loadFamilyMembersVisible: function() {
      var self = this
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data.sandboxData || null
          self.dualDimension = res.data.dualDimension || null
          if (res.data.members) {
            self.familyMembersVisible = res.data.members
          }
        }
      }).catch(function(e) {})
    },
    loadCognitiveReport: function() {
      var self = this
      var childId = this.activeChildId
      if (!childId) return
      getAssessmentLatestResult(childId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.cognitiveReport = res.data
          self.findLowestDimension(res.data)
        }
      }).catch(function(e) {})
    },
    findLowestDimension: function(report) {
      var dims = [
        { key: 'perceptionScore', label: '感知能力' },
        { key: 'focusScore', label: '专注力' },
        { key: 'memoryScore', label: '记忆力' },
        { key: 'logicScore', label: '逻辑思维' },
        { key: 'spatialScore', label: '空间思维' },
        { key: 'processingSpeedScore', label: '加工速度' }
      ]
      var lowest = null
      var minVal = Infinity
      for (var i = 0; i < dims.length; i++) {
        var val = report[dims[i].key]
        if (val !== null && val !== undefined && val < minVal) {
          minVal = val
          lowest = { label: dims[i].label, score: val }
        }
      }
      this.lowestDimension = lowest
    },
    onChildChanged: function(childId) {
      this.activeChildId = childId
      uni.setStorageSync('currentChildId', childId)
      for (var i = 0; i < this.children.length; i++) {
        if (this.children[i].id == childId) {
          this.activeChildName = this.children[i].nickname || this.children[i].name || ''
          break
        }
      }
      this.loadFamilyMembersVisible()
      this.loadCognitiveReport()
    },
    loadDimensionTasks: function() {
      var self = this
      var childId = this.activeChildId
      if (!childId) return
      getTodayTasksByCategory(childId, 'wisdom').then(function(res) {
        if (res && res.data) {
          self.dimensionTasks = res.data.slice(0, 5)
        }
      }).catch(function(e) {})
    },
    loadDimensionActivities: function() {
      var self = this
      getActivityList({ dimensionCode: 'wisdom', page: 1, size: 5 }).then(function(res) {
        if (res && res.data) {
          self.dimensionActivities = res.data.records || res.data
        }
      }).catch(function(e) {})
    },
    loadDimensionProducts: function() {
      var self = this
      getProductsByDomain('wisdom', 1, 4).then(function(res) {
        if (res && res.data) {
          self.dimensionProducts = res.data.records || res.data
        }
      }).catch(function(e) {})
    },
    sectionVisible: function(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },
    onFuncClick: function(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) {
        var nativeTabs = ['/pages/tasks/tasks', '/pages/index/index', '/pages/body/index', '/pages/mind/index', '/pages/action/index', '/pages/wisdom/index', '/pages/profile/profile']
        if (nativeTabs.indexOf(item.page) !== -1) {
          uni.switchTab({ url: item.page })
        } else {
          uni.navigateTo({ url: item.page })
        }
      }
    },
    scrollToSection: function(section) {},
    goMemberDetail: function(memberId) {
      uni.navigateTo({ url: '/pages/wisdom/member-wisdom-detail?memberId=' + memberId })
    },
    goCognitiveReport: function() {
      uni.navigateTo({ url: '/pages/wisdom/cognitive-report' })
    },
    goSelfQuiz: function() {
      uni.navigateTo({ url: '/pages/wisdom/self-quiz' })
    },
    goTrainingHub: function() {
      uni.navigateTo({ url: '/pages/wisdom/training-hub' })
    },
    goAssessment: function() {
      uni.navigateTo({ url: '/pages/assessment/apply' })
    },
    goHome: function() {
      uni.switchTab({ url: '/pages/index/index' })
    },
    onTaskClick: function(task) {},
    goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    goActivityDetail: function(id) {},
    goMoreActivities: function() {},
    goProductDetail: function(id) {
      var token = uni.getStorageSync('token')
      if (token) {
        uni.navigateTo({ url: '/pages/discover/product-detail/product-detail?id=' + id })
      } else {
        uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/wisdom/index') })
      }
    },
    goMoreProducts: function() {},
    loadFeaturedArticles: function() {
      var self = this
      getFeaturedArticles({ size: 5 }).then(function(res) {
        if (res.code === 200 && res.data) {
          var gradientColors = [
            'linear-gradient(135deg, #6366F1, #818CF8)',
            'linear-gradient(135deg, #8B5CF6, #A78BFA)',
            'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
            'linear-gradient(135deg, #10B981, #34D399)',
            'linear-gradient(135deg, #F97316, #FB923C)'
          ]
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.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) : '',
              relatedDimensions: item.relatedDimensions || []
            }
          })
        }
      }).catch(function() {})
    },
    goArticleDetail: function(id) {
      uni.navigateTo({ url: '/pages/wisdom/article-detail?id=' + id })
    }
  }
}
</script>

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

.func-section {
  margin: -40rpx 20rpx 0;
  position: relative;
  z-index: 2;
}

.func-grid {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 16rpx;
  display: flex;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}

.func-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.func-item:active {
  opacity: 0.7;
}

.func-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background: #FFF8E1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

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

.func-label {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* ===== Section ===== */
.section {
  margin: 20rpx 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 24rpx;
  color: #999;
}

/* ===== 认知概览 ===== */
.cognition-summary {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.summary-main {
  text-align: center;
  margin-right: 30rpx;
  padding-right: 30rpx;
  border-right: 2rpx solid rgba(255,255,255,0.3);
}

.summary-score {
  font-size: 60rpx;
  font-weight: bold;
  color: #fff;
  display: block;
}

.summary-label {
  font-size: 22rpx;
  color: rgba(255,255,255,0.85);
  display: block;
  margin-top: 4rpx;
}

.summary-detail {
  flex: 1;
}

.summary-dan {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.summary-min {
  font-size: 24rpx;
  color: rgba(255,255,255,0.85);
  display: block;
}

.cognition-empty {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.empty-tip {
  font-size: 26rpx;
  color: #999;
  display: block;
}

.empty-sub {
  font-size: 22rpx;
  color: #ccc;
  margin-top: 6rpx;
  display: block;
}

/* ===== 高亮卡片 ===== */
.highlight-card {
  margin: 20rpx;
}

.highlight-card-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(135deg, #FFF8E1, #fff);
  border: 2rpx solid #FFD700;
  border-radius: 20rpx;
  padding: 24rpx;
}

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

.highlight-card-left {
  width: 72rpx;
  height: 72rpx;
  border-radius: 18rpx;
  background: #FFD700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.highlight-icon {
  font-size: 36rpx;
}

.highlight-card-right {
  flex: 1;
}

.highlight-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #B8860B;
  display: block;
  margin-bottom: 4rpx;
}

.highlight-desc {
  font-size: 22rpx;
  color: #999;
  display: block;
}

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

/* ===== 小贴士 ===== */
.tips-list {
  display: flex;
  flex-direction: column;
}

.tip-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  border-left: 6rpx solid #FFD700;
}

.tip-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.tip-summary {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
  display: block;
}

/* ===== 快捷操作 ===== */
.quick-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20rpx;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  flex: 1;
  margin: 0 8rpx;
}

.action-btn:active {
  opacity: 0.7;
}

.action-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}

.action-text {
  font-size: 22rpx;
  color: #333;
}

.bottom-spacer {
  height: 20rpx;
}
</style>