cfc/cfc-frontend/components/FamilyMemberCard.vue

<template>
  <view class="family-member-card" :class="{ selected: isSelected, ['role-' + member.effectiveRole]: true }" @click="onClick" @longpress="onLongPress">
    <!-- 头像区域 -->
    <view class="card-avatar-wrap">
      <image class="card-avatar" :src="member.avatar || defaultAvatar" mode="aspectFill" />
      <!-- 关系标签徽章 -->
      <view class="card-relation-badge" :style="{ background: relationColor }">
        <text class="card-relation-text">{{ member.relationship || member.relativeLabel || member.roleLabel || '成员' }}</text>
      </view>
      <!-- 配偶标记 -->
      <view class="card-spouse-mark" v-if="member.isSpouse">
        <text class="spouse-icon">💍</text>
      </view>
    </view>

    <!-- 关系现状三色点：信任/亲密度/沟通 -->
    <view class="card-relation-dots">
      <view class="relation-dot" v-for="(color, idx) in relationDotColors" :key="idx" :style="{ background: color }"></view>
    </view>

    <!-- 昵称 -->
    <text class="card-nickname">{{ member.nickname }}</text>

    <!-- 辈分标签 -->
    <view class="card-generation-line" v-if="member.generation">
      <text class="card-generation-text">第{{ member.generation }}代</text>
    </view>

    <!-- 联系方式 -->
    <view class="card-contact-row" v-if="member.phone" @click.stop="onCall">
      <text class="contact-icon">📞</text>
      <text class="contact-phone">{{ member.phone }}</text>
    </view>

    <!-- 能量分数 -->
    <view class="card-energy" v-if="energyScore !== null && energyScore !== undefined">
      <text class="energy-value">{{ energyScore }}</text>
      <text class="energy-unit">分</text>
    </view>

    <!-- 选中标记 -->
    <view class="card-selected-mark" v-if="isSelected">
      <text class="mark-icon">✓</text>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../utils/brand-colors.js'
export default {
  props: {
    member: { type: Object, required: true },
    isSelected: { type: Boolean, default: false },
    energyScore: { type: Number, default: null }
  },
  computed: {
    defaultAvatar: function() {
      return '/static/default-avatar.png'
    },
    relationColor: function() {
      var rel = this.member && this.member.relationship
      if (rel === '爸爸' || rel === '妈妈' || rel === '父亲' || rel === '母亲') return BrandColors.primary
      if (rel === '儿子' || rel === '女儿') return BrandColors.infoSky
      if (rel === '爷爷' || rel === '奶奶' || rel === '外公' || rel === '外婆') return BrandColors.textSlate
      if (rel === '哥哥' || rel === '姐姐' || rel === '弟弟' || rel === '妹妹') return BrandColors.success
      if (this.member && this.member.isSpouse) return BrandColors.pink
      var role = this.member && this.member.effectiveRole
      if (role === 'parent') return BrandColors.primary
      if (role === 'child') return BrandColors.infoSky
      if (role === 'teacher') return BrandColors.violet
      return '#9CA3AF'
    },
    // 关系现状三色点颜色：信任/亲密度/沟通（绿≥70 / 黄40-69 / 红<40 / 灰空）
    relationDotColors: function() {
      var m = this.member
      var empty = '#E5E7EB'
      if (!m) return [empty, empty, empty]
      var keys = ['trustScore', 'intimacyScore', 'communicationScore']
      return keys.map(function(k) {
        var v = Number(m[k]) || 0
        if (v <= 0) return empty
        if (v >= 70) return BrandColors.success
        if (v >= 40) return BrandColors.wealth
        return BrandColors.danger
      })
    }
  },
  methods: {
    onClick: function() {
      this.$emit('select', this.member)
    },
    onLongPress: function() {
      this.$emit('longpress', this.member)
    },
    onCall: function() {
      if (this.member && this.member.phone) {
        uni.makePhoneCall({ phoneNumber: this.member.phone })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.family-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110rpx;
  padding: 10rpx 8rpx;
  border-radius: 16rpx;
  background: $app-surface;
  border: 2rpx solid transparent;
  position: relative;
  flex-shrink: 0;
}
.family-member-card.selected {
  border-color: $brand-primary;
  box-shadow: 0 0 0 2rpx rgba(249, 115, 22, 0.15);
}
.card-avatar-wrap {
  position: relative;
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 6rpx;
}
.card-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: $facade-fill-gray-100;
}
.card-relation-badge {
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rpx 8rpx;
  border-radius: 10rpx;
  white-space: nowrap;
  max-width: 84rpx;
}
.card-relation-text {
  font-size: 16rpx;
  color: $app-surface;
  font-weight: 500;
  line-height: 1.4;
}
.card-spouse-mark {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 24rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spouse-icon {
  font-size: 18rpx;
}
.card-relation-dots {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 4rpx;
  height: 12rpx;
}
.relation-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  margin: 0 4rpx;
}
.card-nickname {
  font-size: 22rpx;
  color: $facade-text-gray-700;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  max-width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-generation-line {
  margin-top: 2rpx;
}
.card-generation-text {
  font-size: 14rpx;
  color: $facade-text-gray-400;
}
.card-contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rpx;
}
.contact-icon {
  font-size: 18rpx;
}
.contact-phone {
  font-size: 16rpx;
  color: $status-info;
  margin-left: 2rpx;
}
.card-energy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 2rpx;
}
.energy-value {
  font-size: 20rpx;
  color: $brand-primary;
  font-weight: bold;
}
.energy-unit {
  font-size: 16rpx;
  color: $facade-text-gray-400;
  margin-left: 2rpx;
}
.card-selected-mark {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: $brand-primary;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mark-icon {
  font-size: 16rpx;
  color: $app-surface;
  font-weight: bold;
}
</style>