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

<template>
  <view class="detail-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="nav-back-icon">&#x2190;</text>
      </view>
      <text class="nav-title">智 · 成员详情</text>
    </view>

    <!-- 五维能量条 -->
    <FamilyEnergyBar
      dimensionCode="wisdom"
      :sandboxData="sandboxData"
      :dualDimension="dualDimension" />

    <!-- 成员信息卡 -->
    <view class="member-card" v-if="memberInfo">
      <view class="member-avatar wisdom-avatar">
        <text class="avatar-text">{{ memberInfo.name && memberInfo.name.charAt(0) || '孩' }}</text>
      </view>
      <view class="member-info">
        <text class="member-name">{{ memberInfo.name || '孩子' }}</text>
        <text class="member-role">智慧维度</text>
      </view>
      <view class="member-score" v-if="dualDimension">
        <text class="score-value wisdom-score">{{ dualDimension.energy || 0 }}</text>
        <text class="score-label">能量值</text>
      </view>
    </view>

    <!-- 家庭成员关系图谱（只读） -->
    <FamilyRelationGraph
      dimensionCode="wisdom"
      :selfId="selfId"
      :members="graphMembers"
      :energyMap="energyMapForGraph"
      :intimacyMap="intimacyMapForGraph"
      :interactive="false" />

    <!-- 今日任务 -->
    <DimensionTasks
      dimensionCode="wisdom"
      :tasks="dimensionTasks"
      @taskClick="onTaskClick"
      @moreTasks="goTasks" />

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

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

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

<script>
import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
import DimensionTasks from '../../components/DimensionTasks.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import DimensionProducts from '../../components/DimensionProducts.vue'
import { getEnergyOverview, getFamilyEnergySandbox, getTodayTasksByCategory, getActivityList, getProductsByDomain, getChildren } from '../../utils/api.js'

export default {
  components: { FamilyEnergyBar, FamilyRelationGraph, DimensionTasks, DimensionActivities, DimensionProducts },
  data() {
    return {
      childId: null,
      selfId: null,
      memberInfo: null,
      graphMembers: [],
      energyMapForGraph: {},
      intimacyMapForGraph: {},
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: [],
      dualDimension: null,
      sandboxData: null
    }
  },
  onLoad: function(options) {
    if (options && options.memberId) {
      this.selfId = options.memberId
      this.childId = options.memberId
      this.loadMemberData()
    }
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    loadMemberData: function() {
      var self = this
      var childId = this.childId
      if (!childId) return

      getEnergyOverview(childId).then(function(res) {
        if (res && res.data) {
          self.dualDimension = res.data
        }
      }).catch(function() {})

      getFamilyEnergySandbox(childId).then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data.sandboxData || null
          self.graphMembers = res.data.members || []
          self.energyMapForGraph = res.data.energyMap || {}
          self.intimacyMapForGraph = res.data.intimacyMap || {}
        }
      }).catch(function() {})

      getTodayTasksByCategory({ childId: childId, dimension: 'wisdom' }).then(function(res) {
        if (res && res.data) {
          self.dimensionTasks = res.data.slice(0, 5)
        }
      }).catch(function() {})

      getActivityList({ dimension: 'wisdom', page: 1, size: 5 }).then(function(res) {
        if (res && res.data) {
          self.dimensionActivities = res.data.records || res.data
        }
      }).catch(function() {})

      getProductsByDomain({ domain: 'wisdom', page: 1, size: 4 }).then(function(res) {
        if (res && res.data) {
          self.dimensionProducts = res.data.records || res.data
        }
      }).catch(function() {})
    },
    onTaskClick: function(task) {},
    goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    goActivityDetail: function(id) {},
    goMoreActivities: function() {
      uni.navigateTo({ url: '/pages/activity/index' })
    },
    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' })
      }
    },
    goMoreProducts: function() {
      uni.navigateTo({ url: '/pages/shop/index' })
    }
  }
}
</script>

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

.nav-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 80rpx 30rpx 20rpx;
  background: linear-gradient(135deg, #FFD700, #FFA500);
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-back-icon {
  font-size: 36rpx;
  color: #fff;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  margin-right: 60rpx;
}

.member-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  margin: 20rpx 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}

.member-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.wisdom-avatar {
  background: linear-gradient(135deg, #FFD700, #FFA500);
}

.avatar-text {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.member-role {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
  display: block;
}

.member-score {
  text-align: center;
}

.score-value {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
}

.wisdom-score {
  color: #B8860B;
}

.score-label {
  font-size: 22rpx;
  color: #999;
  display: block;
}

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