cfc/cfc-frontend/pages/index/member-home-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>

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

    <template v-if="!loading">
      <!-- 成员信息卡 -->
      <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">{{ memberInfo.familyRole || (memberInfo.memberType === 'parent' ? '家长' : '孩子') }}</text>
        </view>
        <view class="member-score" v-if="memberInfo.overallScore != null">
          <text class="score-value">{{ memberInfo.overallScore }}</text>
          <text class="score-label">综合能量</text>
        </view>
      </view>

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

      <!-- 五维能量概况 -->
      <view class="energy-section" v-if="memberInfo">
        <view class="section-title">五维能量</view>
        <view class="energy-grid">
          <view class="energy-item" v-for="dim in energyList" :key="dim.code">
            <text class="energy-icon">{{ dim.icon }}</text>
            <view class="energy-bar-track">
              <view class="energy-bar-fill" :style="{ width: dim.score + '%', background: dim.color }"></view>
            </view>
            <text class="energy-score">{{ dim.score }}</text>
          </view>
        </view>
      </view>

      <!-- 今日任务 -->
      <DimensionTasks
        v-if="childId"
        dimensionCode="all"
        :tasks="dimensionTasks"
        @taskClick="goTasks"
        @moreTasks="goTasks" />
    </template>
  </view>
</template>

<script>
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
import DimensionTasks from '../../components/DimensionTasks.vue'
import { getFamilyEnergySandbox, getChildren, getTodayTasksByCategory } from '../../utils/api.js'

export default {
  components: { FamilyRelationGraph, DimensionTasks },
  data() {
    return {
      memberId: null,
      memberType: 'child',
      selfId: null,
      memberInfo: null,
      sandboxData: null,
      dimensionTasks: [],
      loading: true
    }
  },
  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 {}
    },
    childId: function() {
      // 仅当成员是孩子时才返回 childId
      return this.memberType === 'child' ? this.memberId : null
    },
    energyList: function() {
      var dims = [
        { code: 'body', icon: '🌏', label: '身', color: '#8D6E63' },
        { code: 'mind', icon: '🔥', label: '心', color: '#FF6B35' },
        { code: 'wisdom', icon: '⚔️', label: '智', color: '#F59E0B' },
        { code: 'action', icon: '🌿', label: '行', color: '#4CAF50' },
        { code: 'wealth', icon: '💧', label: '富', color: '#3B82F6' }
      ]
      var self = this
      return dims.map(function(d) {
        var score = 0
        if (self.memberInfo) {
          var key = d.code + 'Score'
          score = self.memberInfo[key] || 0
        }
        return {
          code: d.code,
          icon: d.icon,
          label: d.label,
          score: score,
          color: d.color
        }
      })
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId || null
    this.memberType = options.memberType || 'child'
  },
  onShow: function() {
    if (!this.memberId) {
      uni.showToast({ title: '缺少成员信息', icon: 'none' })
      return
    }
    this.selfId = uni.getStorageSync('userId') || null
    this.loadData()
  },
  methods: {
    loadData: function() {
      var self = this
      self.loading = true

      // 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.memberId) {
              self.memberInfo = m
              break
            }
          }
        }
      }).catch(function(e) {
        console.log('获取沙盘数据失败', e)
      })

      // 2. 尝试从孩子列表获取详细信息（如果是孩子）
      if (self.memberType === 'child') {
        getChildren().then(function(res) {
          if (res.code === 200 && res.data) {
            for (var i = 0; i < res.data.length; i++) {
              var c = res.data[i]
              if (c.childId == self.memberId || c.id == self.memberId) {
                if (!self.memberInfo) {
                  self.memberInfo = {}
                }
                // 补充孩子专属字段
                self.memberInfo.name = c.name || c.nickname || self.memberInfo.name
                self.memberInfo.nickname = c.nickname || c.name
                self.memberInfo.memberType = 'child'
                break
              }
            }
          }
        }).catch(function(e) {
          console.log('获取孩子列表失败', e)
        })
      }

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

      self.loading = false
    },
    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;
}
.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, #5B9BD5, #3A7CC4);
  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: #5B9BD5;
}
.score-label {
  font-size: 22rpx;
  color: #999;
}

/* 五维能量 */
.energy-section {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.energy-grid {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.energy-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
}
.energy-icon {
  font-size: 32rpx;
  width: 40rpx;
  text-align: center;
}
.energy-bar-track {
  flex: 1;
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
}
.energy-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s ease;
}
.energy-score {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  width: 48rpx;
  text-align: right;
}
</style>