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>

    <!-- 昵称 -->
    <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>
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 '#F97316'
      if (rel === '儿子' || rel === '女儿') return '#0EA5E9'
      if (rel === '爷爷' || rel === '奶奶' || rel === '外公' || rel === '外婆') return '#6B7280'
      if (rel === '哥哥' || rel === '姐姐' || rel === '弟弟' || rel === '妹妹') return '#10B981'
      if (this.member && this.member.isSpouse) return '#EC4899'
      var role = this.member && this.member.effectiveRole
      if (role === 'parent') return '#F97316'
      if (role === 'child') return '#0EA5E9'
      if (role === 'teacher') return '#8B5CF6'
      return '#9CA3AF'
    }
  },
  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>
.family-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110rpx;
  padding: 10rpx 8rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  border: 2rpx solid transparent;
  position: relative;
  flex-shrink: 0;
}
.family-member-card.selected {
  border-color: #F97316;
  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: #F3F4F6;
}
.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: #FFFFFF;
  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-nickname {
  font-size: 22rpx;
  color: #374151;
  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: #9CA3AF;
}
.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: #3B82F6;
  margin-left: 2rpx;
}
.card-energy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 2rpx;
}
.energy-value {
  font-size: 20rpx;
  color: #F97316;
  font-weight: bold;
}
.energy-unit {
  font-size: 16rpx;
  color: #9CA3AF;
  margin-left: 2rpx;
}
.card-selected-mark {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #F97316;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mark-icon {
  font-size: 16rpx;
  color: #FFFFFF;
  font-weight: bold;
}
</style>