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

<template>
  <view class="detail-container">
    <!-- 顶部导航 -->
    <view class="nav-bar" :style="{ background: navBg }">
      <view class="nav-back" @click="goBack">
        <text class="nav-back-icon">&#x2190;</text>
      </view>
      <text class="nav-title">{{ navTitle }}</text>
    </view>

    <!-- 加载中 -->
    <view class="loading" v-if="loading">加载中...</view>

    <template v-if="!loading && memberInfo">
      <!-- 五维能量条 -->
      <FamilyEnergyBar
        dimensionCode="home"
        :sandboxData="sandboxData"
        :dualDimension="dualDimension" />

      <!-- 成员信息卡 -->
      <view class="member-card">
        <view class="member-avatar" :style="{ background: avatarGradient }">
          <text class="avatar-text">{{ memberAvatarChar }}</text>
        </view>
        <view class="member-info">
          <text class="member-name">{{ memberInfo.nickname || memberInfo.name || '家庭成员' }}</text>
          <text class="member-role">{{ roleLabel }}</text>
        </view>
        <view class="member-score" v-if="overallScore != null">
          <text class="score-value" :style="{ color: scoreColor }">{{ overallScore }}</text>
          <text class="score-label">综合能量</text>
        </view>
      </view>

      <!-- 以该成员为中心的家庭关系图谱 -->
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">👨‍👩‍👧‍👦 成员关系</text>
        </view>
        <FamilyRelationGraph
          dimensionCode="home"
          :selfId="targetMemberId"
          :members="graphMembers"
          :energyMap="energyMapForGraph"
          :intimacyMap="intimacyMapForGraph"
          :interactive="true"
          @memberTap="onGraphMemberTap" />
      </view>

      <!-- 维度专属内容 -->
      <view class="dimension-section">
        <BodySection v-if="dimensionCode === 'body'"
          :memberId="targetMemberId"
          :childId="childId"
          :memberType="memberType"
          :memberInfo="memberInfo"
          :sandboxData="sandboxData"
          :energyMap="energyMapForGraph" />
        <MindSection v-if="dimensionCode === 'mind'"
          :memberId="targetMemberId"
          :childId="childId"
          :memberType="memberType"
          :memberInfo="memberInfo"
          :sandboxData="sandboxData"
          :energyMap="energyMapForGraph" />
        <WisdomSection v-if="dimensionCode === 'wisdom'"
          :memberId="targetMemberId"
          :childId="childId"
          :memberType="memberType"
          :memberInfo="memberInfo"
          :sandboxData="sandboxData"
          :energyMap="energyMapForGraph" />
        <ActionSection v-if="dimensionCode === 'action'"
          :memberId="targetMemberId"
          :childId="childId"
          :memberType="memberType"
          :memberInfo="memberInfo"
          :sandboxData="sandboxData"
          :energyMap="energyMapForGraph" />
      </view>

      <!-- 今日任务（仅当有 childId 时显示） -->
      <DimensionTasks
        v-if="childId"
        dimensionCode="all"
        :tasks="dimensionTasks"
        @taskClick="onTaskClick"
        @moreTasks="goTasks" />

      <!-- 推荐活动（非身卡片入口时显示） -->
      <DimensionActivities
        v-if="showRecommendations"
        dimensionCode="body"
        :activities="dimensionActivities"
        @activityClick="goActivityDetail"
        @moreActivities="goMoreActivities" />

      <!-- 推荐商品（非身卡片入口时显示） -->
      <DimensionProducts
        v-if="showRecommendations"
        dimensionCode="body"
        :products="dimensionProducts"
        @productClick="goProductDetail"
        @moreProducts="goMoreProducts" />

      <!-- 底部占位 -->
      <view class="bottom-spacer"></view>
    </template>
  </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 BodySection from '../../components/member-detail-sections/body-section.vue'
import MindSection from '../../components/member-detail-sections/mind-section.vue'
import WisdomSection from '../../components/member-detail-sections/wisdom-section.vue'
import ActionSection from '../../components/member-detail-sections/action-section.vue'
import { getFamilyEnergySandbox, getTodayTasksByCategory, getActivityList, getProductsByDomain, getChildren } from '../../utils/api.js'

// 维度配置
var dimensionConfig = {
  body:     { name: '身体', icon: '\u{1F3C3}', color: '#10B981', gradient: 'linear-gradient(135deg, #4CAF50, #81C784)' },
  mind:     { name: '心',   icon: '\u2764',    color: '#8B5CF6', gradient: 'linear-gradient(135deg, #8B5CF6, #A78BFA)' },
  wisdom:   { name: '智',   icon: '\u{1F9E0}', color: '#3B82F6', gradient: 'linear-gradient(135deg, #FFD700, #FFA500)' },
  action:   { name: '行动', icon: '\u{1F3CB}', color: '#F97316', gradient: 'linear-gradient(135deg, #10B981, #34D399)' },
  wealth:   { name: '富',   icon: '\u{1F4B0}', color: '#F59E0B', gradient: 'linear-gradient(135deg, #F59E0B, #FBBF24)' },
  home:     { name: '全家', icon: '\u{1F3E0}', color: '#5B9BD5', gradient: 'linear-gradient(135deg, #5B9BD5, #3A7CC4)' }
}

export default {
  components: { FamilyEnergyBar, FamilyRelationGraph, DimensionTasks, DimensionActivities, DimensionProducts, BodySection, MindSection, WisdomSection, ActionSection },
  data() {
    return {
      memberId: null,
      memberType: 'child',
      memberName: '',
      dimensionCode: 'home',
      entrySource: 'relation-graph', // relation-graph | row-card | body-card
      targetMemberId: null,
      selfId: null,
      memberInfo: null,
      sandboxData: null,
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: [],
      loading: true,
      allChildren: []
    }
  },
  computed: {
    config: function() {
      return dimensionConfig[this.dimensionCode] || dimensionConfig.home
    },
    navTitle: function() {
      var base = this.memberInfo && (this.memberInfo.nickname || this.memberInfo.name)
        ? (this.memberInfo.nickname || this.memberInfo.name) + ' · ' + this.config.name
        : this.config.name + ' · 成员详情'
      if (this.entrySource === 'body-card') {
        return base
      }
      return base
    },
    navBg: function() {
      if (this.entrySource === 'body-card') {
        return 'linear-gradient(135deg, #FFD700, #FFA500)'
      }
      return '#FFFFFF'
    },
    avatarGradient: function() {
      return this.config.gradient
    },
    scoreColor: function() {
      return this.config.color
    },
    memberAvatarChar: function() {
      if (!this.memberInfo) return '?'
      return (this.memberInfo.nickname || this.memberInfo.name || '?').charAt(0)
    },
    roleLabel: function() {
      if (!this.memberInfo) return ''
      // 优先使用 effectiveRole 或 roleLabel
      if (this.memberInfo.effectiveRole) {
        return this.memberInfo.effectiveRole
      }
      if (this.memberInfo.roleLabel) {
        return this.memberInfo.roleLabel
      }
      // 回退：根据 memberType 推断
      if (this.memberType === 'parent') return '家长'
      if (this.memberType === 'elderly') return '长辈'
      return '孩子'
    },
    overallScore: function() {
      if (!this.memberInfo) return null
      var total = 0
      var count = 0
      var codes = ['bodyScore', 'mindScore', 'wisdomScore', 'actionScore', 'wealthScore']
      for (var i = 0; i < codes.length; i++) {
        var v = this.memberInfo[codes[i]]
        if (v != null) {
          total += v
          count++
        }
      }
      return count > 0 ? Math.round(total / count) : null
    },
    childId: function() {
      // 仅当成员是孩子且有 memberId 时才返回 childId
      return this.memberType === 'child' && this.targetMemberId ? this.targetMemberId : null
    },
    // 关系图谱中的成员列表（以 targetMemberId 为中心）
    graphMembers: function() {
      if (!this.sandboxData || !this.sandboxData.members) return []
      var self = this
      return this.sandboxData.members.map(function(m) {
        return {
          id: m.memberId || m.id,
          nickname: m.name || m.nickname || '成员',
          memberType: m.memberType || 'child',
          isSelf: (m.memberId || m.id) == self.targetMemberId
        }
      })
    },
    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,
            wealthScore: m.wealthScore || 0
          }
        }
      }
      return map
    },
    intimacyMapForGraph: function() {
      return {}
    },
    dualDimension: function() {
      return ''
    },
    // 是否显示推荐内容（身卡片入口不显示）
    showRecommendations: function() {
      return this.entrySource !== 'body-card'
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId || null
    this.memberType = options.memberType || 'child'
    this.memberName = decodeURIComponent(options.memberName || '')
    this.dimensionCode = options.dimensionCode || 'home'
    this.entrySource = options.entrySource || 'relation-graph'
    // 如果传了 targetMemberId，以它为准
    if (options.targetMemberId) {
      this.targetMemberId = options.targetMemberId
    } else if (this.memberId) {
      this.targetMemberId = this.memberId
    }
  },
  onShow: function() {
    this.selfId = uni.getStorageSync('userId') || null
    if (!this.targetMemberId && this.memberId) {
      this.targetMemberId = this.memberId
    }
    if (!this.targetMemberId) {
      uni.showToast({ title: '缺少成员信息', icon: 'none' })
      this.loading = false
      return
    }
    this.loadData()
  },
  methods: {
    loadData: function() {
      var self = this

      // 1. 加载家庭能量沙盘
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data
          // 从沙盘中查找当前成员
          var members = res.data.members || []
          for (var i = 0; i < members.length; i++) {
            var m = members[i]
            if ((m.memberId || m.id) == self.targetMemberId) {
              self.memberInfo = m
              break
            }
          }
          // 如果沙盘中没找到，尝试从孩子列表获取
          if (!self.memberInfo && self.allChildren && self.allChildren.length > 0) {
            for (var j = 0; j < self.allChildren.length; j++) {
              var c = self.allChildren[j]
              if (c.childId == self.targetMemberId || c.id == self.targetMemberId) {
                self.memberInfo = c
                break
              }
            }
          }
        }
      }).catch(function(e) {
        console.log('获取沙盘数据失败', e)
      })

      // 2. 加载孩子列表（补充成员信息）
      self.loadChildren()

      // 3. 加载今日任务（仅孩子类型）
      if (self.memberType === 'child' && self.targetMemberId) {
        getTodayTasksByCategory(self.targetMemberId, 'all').then(function(res) {
          if (res && res.data) {
            self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
          }
        }).catch(function() { self.dimensionTasks = [] })
      }

      // 4. 加载推荐活动（非身卡片入口）
      if (self.entrySource !== 'body-card') {
        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 = [] })

        // 5. 加载推荐商品（非身卡片入口）
        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 = [] })
      }

      self.loading = false
    },
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data) {
          self.allChildren = res.data
          // 如果 memberInfo 还没找到，从孩子列表中匹配
          if (!self.memberInfo) {
            for (var i = 0; i < res.data.length; i++) {
              var c = res.data[i]
              if (c.childId == self.targetMemberId || c.id == self.targetMemberId) {
                self.memberInfo = c
                break
              }
            }
          }
        }
      }).catch(function() {})
    },
    onGraphMemberTap: function(data) {
      // 点击关系图中的成员头像，跳转到该成员的详情
      if (!data || !data.memberId) return
      uni.navigateTo({
        url: '/pages/member-detail/member-detail?memberId=' + data.memberId +
             '&memberType=' + (data.memberType || 'child') +
             '&entrySource=relation-graph' +
             '&dimensionCode=' + this.dimensionCode
      })
    },
    onTaskClick: function(task) {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goActivityDetail: function(act) {
      if (act && act.id) {
        uni.navigateTo({ url: '/pages/discover-detail/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-detail/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;
}

/* ===== 通用 ===== */
.loading {
  text-align: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
}
.section-card {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* ===== 成员信息卡 ===== */
.member-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.member-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}
.avatar-text {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
}
.member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.member-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}
.member-role {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}
.member-score {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score-value {
  font-size: 44rpx;
  font-weight: bold;
}
.score-label {
  font-size: 22rpx;
  color: #999;
  margin-top: 2rpx;
}

.bottom-spacer {
  height: 40rpx;
}

.dimension-section {
  margin: 20rpx 30rpx;
}
</style>