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

<template>
  <view class="member-detail-container">
    <!-- 自定义导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="goBack">‹ 返回</view>
      <text class="nav-title">成员详情</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-state" v-if="error && !loading">
      <text>{{ error }}</text>
      <button class="retry-btn" @click="loadData">重试</button>
    </view>

    <!-- 详情内容 -->
    <view class="detail-content" v-if="member && !loading">
      <!-- 基本信息卡片 -->
      <view class="info-card">
        <view class="member-header">
          <view class="avatar" :style="{ backgroundColor: memberColor }">
            <text class="avatar-text">{{ member.nickname ? member.nickname.charAt(0) : 'M' }}</text>
          </view>
          <view class="member-info">
            <text class="member-name">{{ member.nickname || member.name }}</text>
            <text class="member-role">{{ getRoleText(member.effectiveRole) }}</text>
          </view>
        </view>

        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">生肖</text>
            <text class="info-value">{{ member.zodiac || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">星座</text>
            <text class="info-value">{{ member.westernSign || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">血型</text>
            <text class="info-value">{{ member.bloodType || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">代际</text>
            <text class="info-value">{{ member.generation || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">生命数字</text>
            <text class="info-value">{{ member.lifeNumber || '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">五行属性</text>
            <text class="info-value">{{ member.wuxing || '-' }}</text>
          </view>
        </view>
      </view>

      <!-- 五维能量卡片 -->
      <view class="energy-card">
        <view class="card-header">
          <text class="card-title">五维能量</text>
        </view>
        <view class="energy-bars">
          <view class="energy-bar-item" v-for="energy in memberEnergy" :key="energy.type">
            <view class="energy-info">
              <text class="energy-label">{{ energy.label }}</text>
              <text class="energy-desc">{{ energy.description }}</text>
            </view>
            <view class="energy-bar">
              <view class="energy-fill" :style="{ width: energy.value + '%', backgroundColor: energy.color }"></view>
            </view>
            <text class="energy-value">{{ energy.value }}</text>
          </view>
        </view>
      </view>

      <!-- 关系质量卡片 -->
      <view class="relationship-card" v-if="relationships && relationships.length > 0">
        <view class="card-header">
          <text class="card-title">关系质量</text>
        </view>
        <view class="relationship-list">
          <view class="relationship-item" v-for="rel in relationships" :key="rel.toMemberId">
            <view class="rel-member">
              <text class="rel-name">{{ rel.toMemberName }}</text>
              <text class="rel-role">{{ getRoleText(rel.toMemberRole) }}</text>
            </view>
            <view class="rel-score">
              <text class="score-value" :class="!rel.score ? '' : (rel.score >= 80 ? 'score-good' : (rel.score >= 60 ? 'score-medium' : 'score-low'))">{{ rel.score }}</text>
              <text class="score-label">分</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="action-btn primary" @click="viewAnnualEnergy">查看年度能量</button>
        <button class="action-btn secondary" @click="viewCompatibility">查看兼容性分析</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data: function() {
    return {
      memberId: '',
      member: null,
      relationships: [],
      loading: false,
      error: null
    }
  },
  computed: {
    memberColor: function() {
      if (!this.member || !this.member.effectiveRole) {
        return '#6B7280'
      }
      var colorMap = {
        'parent': '#F97316',
        'child': '#3B82F6',
        'teacher': '#8B5CF6'
      }
      return colorMap[this.member.effectiveRole] || '#6B7280'
    },
    memberEnergy: function() {
      if (!this.member || !this.member.energy) {
        return []
      }
      var energyMap = {
        'body': { label: '身', description: '身体健康', color: '#10B981' },
        'mind': { label: '心', description: '心理健康', color: '#F59E0B' },
        'wisdom': { label: '智', description: '智慧成长', color: '#3B82F6' },
        'action': { label: '行', description: '行动力', color: '#8B5CF6' },
        'wealth': { label: '富', description: '财富能量', color: '#F97316' }
      }
      var result = []
      for (var key in this.member.energy) {
        var energy = this.member.energy[key]
        var info = energyMap[key] || { label: key, description: '', color: '#6B7280' }
        result.push({
          type: key,
          label: info.label,
          description: info.description,
          value: energy,
          color: info.color
        })
      }
      return result
    }
  },
  onLoad: function(options) {
    if (options && options.id) {
      this.memberId = options.id
      this.loadData()
    }
  },
  methods: {
    ...mapActions('tianpan', ['loadMemberDetail']),

    loadData: function() {
      this.loading = true
      this.error = null
      this.loadMemberDetail({ memberId: this.memberId })
        .then(this.setMemberData)
        .catch(this.handleError)
        .finally(function() {
          this.loading = false
        }.bind(this))
    },

    setMemberData: function(data) {
      if (data) {
        this.member = data
        if (data.relationships) {
          this.relationships = data.relationships
        }
      }
    },

    handleError: function(e) {
      this.error = e.message || '加载失败'
    },

    getRoleText: function(role) {
      var roleMap = {
        'parent': '家长',
        'child': '孩子',
        'teacher': '规划师'
      }
      return roleMap[role] || role
    },

    getScoreClass: function(score) {
      if (!score) {
        return ''
      }
      if (score >= 80) {
        return 'score-good'
      } else if (score >= 60) {
        return 'score-medium'
      } else {
        return 'score-low'
      }
    },

    goBack: function() {
      uni.navigateBack()
    },

    viewAnnualEnergy: function() {
      uni.navigateTo({
        url: '/pages/tianpan/annual-energy?memberId=' + this.memberId
      })
    },

    viewCompatibility: function() {
      uni.navigateTo({
        url: '/pages/tianpan/relation-detail?memberId=' + this.memberId
      })
    }
  }
}
</script>

<style>
.member-detail-container {
  min-height: 100vh;
  background: #F9FAFB;
  padding-bottom: 20px;
}

.custom-nav {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  padding: 44px 16px 16px;
  display: flex;
  align-items: center;
}

.nav-back {
  color: #FFFFFF;
  font-size: 14px;
  margin-right: 16px;
}

.nav-title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.loading-state, .error-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #E5E7EB;
  border-top-color: #F97316;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.retry-btn {
  margin-top: 16px;
  background: #F97316;
  color: #FFFFFF;
  border: none;
  padding: 10px 32px;
  border-radius: 20px;
  font-size: 14px;
}

.detail-content {
  padding: 16px;
}

.info-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.member-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.avatar-text {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: bold;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 20px;
  font-weight: bold;
  color: #1F2937;
  display: block;
  margin-bottom: 4px;
}

.member-role {
  font-size: 14px;
  color: #6B7280;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  width: 50%;
  padding: 12px 0;
  border-bottom: 1px solid #F3F4F6;
}

.info-item:nth-child(2n) {
  border-right: none;
}

.info-label {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 4px;
}

.info-value {
  display: block;
  font-size: 14px;
  color: #1F2937;
  font-weight: 500;
}

.energy-card, .relationship-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  margin-bottom: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #1F2937;
}

.energy-bars {
  margin-top: 16px;
}

.energy-bar-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.energy-info {
  width: 80px;
}

.energy-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
}

.energy-desc {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 2px;
}

.energy-bar {
  flex: 1;
  height: 10px;
  background: #E5E7EB;
  border-radius: 5px;
  margin: 0 12px;
  overflow: hidden;
}

.energy-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.energy-value {
  width: 36px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  color: #1F2937;
}

.relationship-list {
  margin-top: 16px;
}

.relationship-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F3F4F6;
}

.relationship-item:last-child {
  border-bottom: none;
}

.rel-member {
  flex: 1;
}

.rel-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
}

.rel-role {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 2px;
}

.rel-score {
  display: flex;
  align-items: baseline;
}

.score-value {
  font-size: 24px;
  font-weight: bold;
}

.score-label {
  font-size: 12px;
  color: #9CA3AF;
  margin-left: 2px;
}

.score-good {
  color: #10B981;
}

.score-medium {
  color: #F59E0B;
}

.score-low {
  color: #EF4444;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.action-btn {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 16px;
  border: none;
}

.action-btn.primary {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  color: #FFFFFF;
}

.action-btn.secondary {
  background: #FFFFFF;
  color: #F97316;
  border: 2px solid #F97316;
}
</style>