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

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

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

    <!-- 品牌定位语（登录前显示） -->
    <view class="brand-strap" v-if="!isLoggedIn">
      <text class="brand-strap-text">提升全家认知能力与学习效率</text>
    </view>

    <!-- 2. 学习能力评估图（始终显示，无数据时仅显示人群平均值） -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">学习能力评估</text>
        <text class="section-sub">通过测评了解全家认知能力，找出可以提升的方向</text>
        <text class="avg-badge" v-if="!cognitiveReport">同龄平均值 · 完成认知测评后显示个人数据</text>
        <text class="section-more" v-if="isLoggedIn" @click="goCognitiveReport">查看详情 ›</text>
      </view>
      <RadarChart
        :dimensions="cognitiveDimensions"
        :scores="cognitiveScores"
        :avg-scores="cognitiveAvgScores"
        :childName="activeChildName"
        fillColor="#6366F1"
        gridColor="#E0E7FF"
        labelColor="#3730A3" />
    </view>

    <!-- 家庭成员选择条 -->
    <FamilyMemberStrip
      v-if="currentView === 'self' && isLoggedIn"
      :members="familyMembersVisible"
      :selectedMemberId="selectedMemberId"
      @select="onFamilyMemberSelect"
      @removed="loadFamilyMembersVisible" />

    <!-- 游客引导语 -->
    <view class="monthly-guidance" v-if="!isLoggedIn">
      <text class="guidance-icon">⚡</text>
      <text class="guidance-text">{{ monthlyGuidance }}</text>
    </view>

    <!-- 4. 五维能量条（登录后） -->
    <FamilyEnergyBar
      v-if="isLoggedIn"
      dimensionCode="wisdom"
      :sandboxData="sandboxData"
      :dualDimension="dualDimension" />
    <!-- 认知七维 -->
    <dimension-sub-dims
      v-if="isLoggedIn && wisdomSubDims.length > 0"
      title="⚡ 认知七维"
      subtitle="学习能力的七个核心方面"
      accent-color="#6366F1"
      :dims="wisdomSubDims" />

    <!-- 学习解读 -->
    <view class="section score-explain-card" v-if="isLoggedIn && currentView === 'self' && dualDimension">
      <view class="explain-header">
        <text class="explain-icon">{{ (dualDimension.primary && dualDimension.primary.score || 0) >= 80 ? '✅' : (dualDimension.primary && dualDimension.primary.score || 0) >= 60 ? '⚠️' : '❗' }}</text>
        <text class="explain-title">学习解读</text>
      </view>
      <text class="explain-text">{{ (dualDimension.primary && dualDimension.primary.score || 0) >= 80 ? '学习能力良好，继续保持学习节奏。' : (dualDimension.primary && dualDimension.primary.score || 0) >= 60 ? '学习能力一般，建议多做认知训练。' : '学习能力需要提升，建议进行专业评估。' }}</text>
    </view>

    <!-- ===== DAN 报告（登录后） ===== -->
    <view class="section" v-if="isLoggedIn">
      <view class="section-header">
        <text class="section-title">&#x1F4CA; DAN 报告</text>
        <text class="section-more" @click="goDanUpload">上传 +</text>
      </view>
      <view class="dan-card" v-for="report in danReports" :key="report.id" @click="viewDanReport(report)">
        <view class="dan-card-header">
          <text class="dan-report-date">{{ formatDate(report.assessmentDate) }}</text>
          <text :class="['dan-status', report.draftStatus === 'confirmed' ? 'confirmed' : 'pending']">
            {{ report.draftStatus === 'confirmed' ? '已确认' : '待确认' }}
          </text>
        </view>
        <text class="dan-report-desc">DAN B4 智维度测评报告</text>
      </view>
      <view class="dan-empty" v-if="danReports.length === 0">
        <text class="dan-empty-text">暂无 DAN 报告，点击上方「上传 +」上传测评报告</text>
      </view>
    </view>

    <!-- 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>

    <!-- 11. 快捷操作按钮 -->
    <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="goDanUpload">
        <text class="action-icon">📄</text>
        <text class="action-text">上传报告</text>
      </view>
    </view>

    <!-- 智维度介绍卡片（登录后显示） -->
    <DimensionIntroCard dimCode="wisdom" v-if="isLoggedIn" learn-more-url="/pages/wisdom-detail/dimension-intro" />

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

<script>
import nav from '../../utils/nav'
import TabTransition from '../../components/tab-transition.vue'
import PageBanner from '../../components/PageBanner.vue'
import RadarChart from '../../components/RadarChart.vue'
import DimensionSubDims from '../../components/DimensionSubDims.vue'
import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
import FloatingAvatar from '../../components/FloatingAvatar.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
import { getVisibleSections, getChildren, getFamilyEnergySandbox, getEnergySandbox, getAssessmentLatestResult, getDanReportByChild } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  components: { TabTransition, PageBanner, RadarChart, FamilyEnergyBar, DimensionSubDims, FloatingAvatar, FamilyMemberStrip, DimensionIntroCard },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      showTabTransition: true,
      activeChildId: null,
      activeChildName: '',
      userName: '',
      children: [],
      familyMembersVisible: [],
      selectedMemberId: null,
            wisdomSubDims: [],
      sandboxData: null,
      currentView: 'self', // 'self' | 'family'
      dualDimension: null,
      visibleSections: [],
      cognitiveReport: null,
      articles: [],
      /** Mock 平均值（7维认知）：感知/专注/记忆/逻辑/空间/加工速度/成长型思维 */
      cognitiveAvgScores: [70, 65, 72, 68, 66, 71, 70],
      danReports: [],
      funcList: [
        { icon: '\u{1F4CA}', label: '认知报告', needLogin: true, page: '/pages/wisdom-detail/cognitive-report' },
        { icon: '\u{1F9E0}', label: '训练中心', needLogin: true, page: '/pages/wisdom-detail/training-hub' },
        { icon: '\u{1F3AF}', label: '测评预约', needLogin: false, page: '/pages/assessment/apply' },
        { icon: '\u{1F4D6}', label: '阅读天地', needLogin: false, page: '/pages/mind-extra/articles' }
      ]
    }
  },
  computed: {
    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)
    },
    cognitiveDimensions: function() {
      return [
        { label: '感知能力', key: 'perceptionScore' },
        { label: '专注力', key: 'focusScore' },
        { label: '记忆力', key: 'memoryScore' },
        { label: '逻辑思维', key: 'logicScore' },
        { label: '空间思维', key: 'spatialScore' },
        { label: '加工速度', key: 'processingSpeedScore' },
        { label: '成长型思维', key: 'wisdomGrowthMindset' }
      ]
    },
    cognitiveScores: function() {
      if (!this.cognitiveReport) return []
      var dims = this.cognitiveDimensions
      var scores = []
      // 解析 structuredAnalysis 中的成长型思维
      var growthMindset = 0
      if (this.cognitiveReport.structuredAnalysis) {
        try {
          var analysis = JSON.parse(this.cognitiveReport.structuredAnalysis)
          if (analysis && analysis.extra && analysis.extra.growthMindset) {
            var gm = analysis.extra.growthMindset
            var vals = Object.values(gm)
            if (vals.length > 0) growthMindset = parseInt(vals[0]) || 0
          }
        } catch (e) { /* ignore parse error */ }
      }
      for (var i = 0; i < dims.length; i++) {
        var key = dims[i].key
        if (key === 'wisdomGrowthMindset') {
          scores.push(growthMindset)
        } else {
          scores.push(this.cognitiveReport[key] || 0)
        }
      }
      return scores
    },
    /** 每月引导语 */
    monthlyGuidance: function() {
      var month = new Date().getMonth()
      var messages = [
        '一月：新年新目标，制定学习计划',
        '二月：春节收获知识，拓展认知边界',
        '三月：植树节到，播种智慧种子',
        '四月：清明踏青，激发创造力',
        '五月：劳动节后，专注能力提升',
        '六月：考试季，科学备考策略',
        '七月：暑期黄金期，查漏补缺',
        '八月：开学准备，提前规划学习',
        '九月：新学期，设定学习目标',
        '十月：国庆假期，阅读充电',
        '十一月：年终冲刺，巩固知识',
        '十二月：年度总结，规划来年学习'
      ]
      return messages[month] || messages[0]
    }
  },
  onShow() {
    this.showTabTransition = true

    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.loadDanReports()
    }
    // 游客也能浏览文章
    this._watchPageReady()
  },
  methods: {
    onFamilyMemberSelect: function(member) {
      this.selectedMemberId = member.id
    },
    loadSectionConfig: function() {
      var baseSections = ['func_entries', 'recommended_reading']
      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', 'recommended_reading']
      })
    },
    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
                }
              }
            }
                // Fallback: 首次进入或未选孩子时，默认选第一个孩子以加载认知数据（仅本地状态，不触发全局切换）
                if (!self.activeChildId && self.children.length > 0) {
                  self.activeChildId = self.children[0].id
                  self.activeChildName = self.children[0].nickname || self.children[0].name || ''
                }
            }
            // Load cognitive report if activeChildId is available
            if (self.activeChildId) {
                self.loadCognitiveReport()
            }
        }
      }).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 memberId = this.activeChildId
      if (!memberId) return
      getAssessmentLatestResult(memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.cognitiveReport = res.data
        self.wisdomSubDims = (function() { var r = self.cognitiveReport || {}; return [{label:'感知能力', score:r.perceptionScore||0, desc:'通过感官获取信息'}, {label:'专注力', score:r.focusScore||0, desc:'保持注意力集中'}, {label:'记忆力', score:r.memoryScore||0, desc:'记忆和回忆信息'}, {label:'逻辑思维', score:r.logicScore||0, desc:'分析和推理能力'}, {label:'空间思维', score:r.spatialScore||0, desc:'操作空间关系'}, {label:'加工速度', score:r.processingSpeedScore||0, desc:'快速处理信息'}, {label:'成长型思维', score:r.growthMindset||0, desc:'相信能力可提升'}]; })();
        }
      }).catch(function(e) {})
    },
    onChildChanged: function(memberId) {
      this.activeChildId = memberId
      // FIX: 同步提交到 Vuex store
      this.$store.commit('switchToChild', memberId)
      for (var i = 0; i < this.children.length; i++) {
        if (this.children[i].id == memberId) {
          this.activeChildName = this.children[i].nickname || this.children[i].name || ''
          break
        }
      }
      this.loadFamilyMembersVisible()
      this.loadCognitiveReport()
      this.loadDanReports()
    },
    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) {
        nav.goPage(item.page)
      }
    },
    scrollToSection: function(section) {},
    goCognitiveReport: function() {
      uni.navigateTo({ url: '/pages/wisdom-detail/cognitive-report' })
    },
    goTrainingHub: function() {
      uni.navigateTo({ url: '/pages/wisdom-detail/training-hub' })
    },
    goAssessment: function() {
      uni.navigateTo({ url: '/pages/assessment/apply' })
    },

    _watchPageReady() {
      var self = this
      var unwatch = this.$watch(function() {
        if (self.isLoggedIn) {
          return !!(self.cognitiveReport || self.sandboxData)
        }      }, function(val) {
        if (val) {
          if (unwatch) unwatch()
          if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
        }
      })
    },

    // ===== DAN 报告 =====
    loadDanReports: function() {
      var self = this
      var memberId = self.activeChildId
      if (!memberId) return
      getDanReportByChild(memberId, 'wisdom').then(function(res) {
        if (res.code === 200 && res.data) {
          self.danReports = res.data
        }
      }).catch(function() {})
    },
    goDanUpload: function() {
      uni.navigateTo({ url: '/pages/dan-assessment/report-upload' })
    },
    viewDanReport: function(report) {
      var reportId = report.sourceReportId || report.id
      uni.navigateTo({ url: '/pages/health/report-detail?reportType=dan&reportId=' + reportId })
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return ''
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
    }
  }
}
</script>


.view-toggle {
  display: flex;
  margin: 20rpx 30rpx;
  background: rgba(255,255,255,0.12);
  border-radius: 12rpx;
  padding: 6rpx;
}
.toggle-btn {
  flex: 1;
  text-align: center;
  padding: 12rpx 0;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: rgba(255,255,255,0.65);
}
.toggle-btn.active {
  background: rgba(255,255,255,0.22);
  color: #fff;
  font-weight: 600;
}

/* 页面说明 */
.section-sub {
  font-size: 22rpx;
  color: rgba(255,255,255,0.55);
  margin-top: 6rpx;
  display: block;
}

/* 得分解读卡片 */
.score-explain-card {
  margin: 20rpx 30rpx;
  padding: 28rpx 24rpx;
  background: rgba(255,255,255,0.1);
  border-radius: 20rpx;
  border: 1rpx solid rgba(255,255,255,0.15);
}
.explain-header {
  display: flex;
  align-items: center;
  margin-bottom: 14rpx;
}
.explain-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}
.explain-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}
.explain-text {
  font-size: 26rpx;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}

/* 子维度评分卡 */
.subdim-section {
  margin: 20rpx 30rpx;
}
.subdim-cards {
  background: rgba(255,255,255,0.08);
  border-radius: 20rpx;
  overflow: hidden;
  border: 1rpx solid rgba(255,255,255,0.12);
}
.subdim-card {
  padding: 24rpx 28rpx;
  border-bottom: 1rpx solid rgba(255,255,255,0.08);
}
.subdim-card:last-child {
  border-bottom: none;
}
.subdim-card-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.subdim-card-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}
.subdim-card-desc {
  font-size: 22rpx;
  color: rgba(255,255,255,0.5);
  margin-top: 4rpx;
}
.subdim-card-right {
  text-align: right;
}
.subdim-card-score {
  font-size: 36rpx;
  font-weight: 700;
}
.subdim-bar-track {
  height: 8rpx;
  background: rgba(255,255,255,0.1);
  border-radius: 4rpx;
  overflow: hidden;
  margin-top: 8rpx;
}
.subdim-bar-fill {
  height: 100%;
  border-radius: 4rpx;
  transition: width 0.5s ease;
}
<style scoped>
.wisdom-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

.func-section {
  margin: 20rpx 20rpx 0;
}

.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;
}

/* ===== 快捷操作按钮 ===== */
.quick-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.action-btn {
  width: 48%;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 0;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}
.action-btn:active {
  opacity: 0.8;
}
.action-icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}
.action-text {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* ===== 底部占位 ===== */
.bottom-spacer {
  height: 120rpx;
}

/* DAN 报告卡片 */
.dan-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.dan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.dan-report-date {
  font-size: 26rpx;
  color: #666;
}
.dan-status {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}
.dan-status.confirmed {
  background: #D1FAE5;
  color: #065F46;
}
.dan-status.pending {
  background: #FEF3C7;
  color: #92400E;
}
.dan-report-desc {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  display: block;
}
.dan-card-footer {
  text-align: right;
}
.dan-view-link {
  font-size: 26rpx;
  color: #6366F1;
}
.dan-empty {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 24rpx;
  text-align: center;
}
.dan-empty-text {
  font-size: 24rpx;
  color: #999;
}
.avg-badge {
  font-size: 20rpx;
  color: #94A3B8;
  margin-left: 12rpx;
}

/* 品牌定位语 */
.brand-strap {
  margin: 16rpx 30rpx 0;
  padding: 20rpx 28rpx;
  background: linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.12));
  border-radius: 16rpx;
  border-left: 4rpx solid #6366F1;
}
.brand-strap-text {
  font-size: 26rpx;
  color: #3730A3;
  font-weight: 500;
}

/* 每月引导语 */
.monthly-guidance {
  margin: 16rpx 30rpx 0;
  padding: 20rpx 28rpx;
  background: linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.08));
  border-radius: 16rpx;
  border-left: 4rpx solid #6366F1;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.guidance-icon { font-size: 32rpx; }
.guidance-text {
  font-size: 26rpx;
  color: #3730A3;
  font-weight: 500;
}
</style>