cfc/cfc-frontend/components/FamilyMemberCard.vue

<template>
  <view class="family-member-card" :class="{ selected: isSelected }" @click="onSelect">
    <view class="card-avatar-wrap">
      <image class="card-avatar" :src="member.avatar || defaultAvatar" mode="aspectFill" />
      <view class="card-role-badge" :style="{ background: roleBadgeColor }">
        <text class="card-role-text">{{ member.roleLabel || member.relativeLabel || '成员' }}</text>
      </view>
    </view>
    <text class="card-nickname">{{ member.nickname }}</text>
    <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'
    },
    roleBadgeColor: function() {
      var role = this.member && (this.member.effectiveRole || this.member.memberType)
      if (role === 'parent') return '#F97316'
      if (role === 'child') return '#0EA5E9'
      if (role === 'teacher') return '#8B5CF6'
      if (role === 'elderly') return '#6B7280'
      return '#9CA3AF'
    }
  },
  methods: {
    onSelect: function() {
      this.$emit('select', this.member)
    }
  }
}
</script>

<style scoped>
.family-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  padding: 12rpx 8rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  border: 2rpx solid transparent;
  transition: border-color 0.2s;
  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: 80rpx;
  height: 80rpx;
  margin-bottom: 8rpx;
}
.card-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #F3F4F6;
}
.card-role-badge {
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 2rpx 10rpx;
  border-radius: 12rpx;
  white-space: nowrap;
}
.card-role-text {
  font-size: 18rpx;
  color: #FFFFFF;
  font-weight: 500;
  line-height: 1.4;
}
.card-nickname {
  font-size: 22rpx;
  color: #374151;
  font-weight: 500;
  text-align: center;
  margin-top: 4rpx;
  line-height: 1.3;
  max-width: 110rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-energy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 4rpx;
}
.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: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  background: #F97316;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mark-icon {
  font-size: 18rpx;
  color: #FFFFFF;
  font-weight: bold;
}
</style>