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

<template>
  <view class="detail-container">
    <!-- 顶部导航 -->
<!-- 品牌定位语（登录前显示） -->
    <view class="brand-strap" v-if="!isLoggedIn">
      <text class="brand-strap-text">改善全家关系与沟通能力</text>
    </view>

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

    <!-- 登录后内容 -->
    <template v-else>
      <!-- 五维能量条 -->
      <FamilyEnergyBar
        dimensionCode="action"
        :sandboxData="sandboxData"
        :dualDimension="dualDimension" />

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

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

      <!-- 今日任务 -->
      <DimensionTasks
        :memberId="memberId"
        @taskClick="onTaskClick"
        @moreTasks="goTasks" />

      <!-- 活动 -->
      <DimensionActivities
        :isLoggedIn="true"
        @activityClick="goActivityDetail"
        @moreActivities="goMoreActivities" />

      <!-- 商品 -->
      <DimensionProducts
        :isLoggedIn="true"
        @productClick="goProductDetail"
        @moreProducts="goMoreProducts" />

      <!-- 行维度介绍卡片 -->
      <DimensionIntroCard dimCode="action" v-if="isLoggedIn" learn-more-url="/pages/action-detail/dimension-intro" />
    </template>

    <!-- 底部占位 -->
    <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 DimensionIntroCard from '../../components/DimensionIntroCard.vue'
import { getEnergyOverview, getFamilyEnergySandbox, getChildren } from '../../utils/api.js'

export default {
  components: { FamilyEnergyBar, FamilyRelationGraph, DimensionTasks, DimensionActivities, DimensionProducts, DimensionIntroCard },
  data() {
    return {
      memberId: null,
      selfId: null,
      memberInfo: null,
      sandboxData: null,
      dualDimension: null,
      isLoggedIn: false
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId || uni.getStorageSync('currentChildId') || null
  },
  onShow: function() {
    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (!this.isLoggedIn) return
    this.selfId = uni.getStorageSync('userId') || null
    this.loadChildren()
    this.loadSandboxData()
    if (this.memberId) {
      this.loadEnergyData()
    }
  },
  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 {}
    },
    /** 每月引导语 */
    monthlyGuidance: function() {
      var month = new Date().getMonth()
      var messages = [
        '一月：新年伊始，增进家庭沟通',
        '二月：春节团聚，珍惜亲子时光',
        '三月：春暖花开，多陪伴孩子',
        '四月：清明踏青，共享家庭活动',
        '五月：劳动教育，培养家庭责任感',
        '六月：儿童节，倾听孩子心声',
        '七月：暑期陪伴，增进亲子关系',
        '八月：开学准备，共同规划',
        '九月：新学期，建立家庭规则',
        '十月：国庆假期，家庭协作时光',
        '十一月：感恩季节，表达家庭关爱',
        '十二月：年终总结，回顾家庭成长'
      ]
      return messages[month] || messages[0]
    }
  },
  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].memberId === self.memberId) {
              self.memberInfo = res.data[i]
              break
            }
          }
          if (!self.memberInfo && res.data.length > 0) {
            self.memberInfo = res.data[0]
            self.memberId = res.data[0].memberId
          }
        }
      }).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.memberId).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 === 'action') {
                self.dualDimension = dims[i]
                break
              }
            }
          }
        }
      }).catch(function() {})
    },
    onTaskClick: function(task) {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goActivityDetail: function(act) {
      if (act && act.id) uni.navigateTo({ url: '/pages/activity/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/index' })
    },
    goTasks: function() { uni.navigateTo({ url: '/pages/tasks/tasks' }) },
    goBack: function() { uni.navigateBack() }
  }
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;
}
.nav-back-icon {
  font-size: 36rpx;
  color: #333;
}
.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;
}
.action-avatar {
  background: linear-gradient(135deg, #10B981, #34D399);
}
.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;
}
.action-score {
  color: #10B981;
}
.score-label {
  font-size: 22rpx;
  color: #999;
}
.bottom-spacer {
  height: 40rpx;
}

/* 品牌定位语 */
.brand-strap {
  margin: 16rpx 30rpx 0;
  padding: 20rpx 28rpx;
  background: linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.12));
  border-radius: 16rpx;
  border-left: 4rpx solid #10B981;
}
.brand-strap-text {
  font-size: 26rpx;
  color: #065F46;
  font-weight: 500;
}

/* 每月引导语 */
.monthly-guidance {
  margin: 16rpx 30rpx 0;
  padding: 20rpx 28rpx;
  background: linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.08));
  border-radius: 16rpx;
  border-left: 4rpx solid #10B981;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.guidance-icon { font-size: 32rpx; }
.guidance-text {
  font-size: 26rpx;
  color: #065F46;
  font-weight: 500;
}
</style>