cfc/cfc-frontend/pages/body/member-body-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="body"
      :sandboxData="sandboxData"
      :dualDimension="dualDimension" />

    <!-- 成员信息卡 -->
    <view class="member-card" v-if="memberInfo">
      <view class="member-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">{{ dualDimension.energy || 0 }}</text>
        <text class="score-label">能量值</text>
      </view>
    </view>

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

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

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

    <!-- 商品 -->
    <DimensionProducts
      dimensionCode="body"
      :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,
      sandboxData: null,
      dualDimension: null,
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: []
    }
  },
  computed: {
    graphMembers: function() {
      if (!this.sandboxData || !this.sandboxData.members) return []
      return this.sandboxData.members.map(function(m) {
        return {
          id: m.memberId || m.id,
          nickname: m.name || m.nickname || '成员',
          memberType: m.memberType || 'child'
        }
      })
    },
    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
          }
        }
      }
      return map
    },
    intimacyMapForGraph: function() {
      return {}
    }
  },
  onLoad: function(options) {
    this.childId = options.childId || uni.getStorageSync('currentChildId') || null
  },
  onShow: function() {
    this.selfId = uni.getStorageSync('userId') || null
    this.loadChildren()
    this.loadSandboxData()
    if (this.childId) {
      this.loadEnergyData()
      this.loadDimensionTasks()
      this.loadDimensionActivities()
      this.loadDimensionProducts()
    }
  },
  methods: {
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data) {
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].childId === self.childId) {
              self.memberInfo = res.data[i]
              break
            }
          }
          if (!self.memberInfo && res.data.length > 0) {
            self.memberInfo = res.data[0]
            self.childId = res.data[0].childId
          }
        }
      }).catch(function() {})
    },
    loadSandboxData: function() {
      var self = this
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) self.sandboxData = res.data
      }).catch(function() {})
    },
    loadEnergyData: function() {
      var self = this
      getEnergyOverview(this.childId).then(function(res) {
        if (res && res.data) {
          var dims = res.data.dimensions
          if (dims && dims.length > 0) {
            for (var i = 0; i < dims.length; i++) {
              if (dims[i].code === 'body') {
                self.dualDimension = dims[i]
                break
              }
            }
          }
        }
      }).catch(function() {})
    },
    loadDimensionTasks: function() {
      var self = this
      getTodayTasksByCategory(this.childId, 'body').then(function(res) {
        if (res && res.data) {
          self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
        }
      }).catch(function() { self.dimensionTasks = [] })
    },
    loadDimensionActivities: function() {
      var self = this
      getActivityList({ dimensionCode: 'body', page: 1, size: 3 }).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionActivities = list.slice(0, 3)
        }
      }).catch(function() { self.dimensionActivities = [] })
    },
    loadDimensionProducts: function() {
      var self = this
      getProductsByDomain('body', 1, 4).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionProducts = list.slice(0, 4)
        }
      }).catch(function() { self.dimensionProducts = [] })
    },
    onTaskClick: function(task) {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goActivityDetail: function(act) {
      if (act && act.id) uni.navigateTo({ url: '/pages/discover/activity-detail/activity-detail?id=' + act.id })
    },
    goMoreActivities: function() {
      uni.navigateTo({ url: '/pages/activity/index' })
    },
    goProductDetail: function(prod) {
      if (prod && prod.id) uni.navigateTo({ url: '/pages/discover/product-detail/product-detail?id=' + prod.id })
    },
    goMoreProducts: function() {
      uni.navigateTo({ url: '/pages/shop/index' })
    },
    goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    goBack: function() { uni.navigateBack() }
  }
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;
}
.nav-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
}
.nav-back {
  padding: 10rpx;
}
.nav-back-icon {
  font-size: 36rpx;
  color: #333;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-left: 16rpx;
}
.member-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.member-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #4CAF50, #81C784);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
.avatar-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}
.member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.member-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.member-role {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}
.member-score {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #4CAF50;
}
.score-label {
  font-size: 22rpx;
  color: #999;
}
.bottom-spacer {
  height: 40rpx;
}
</style>