cfc/cfc-frontend/components/FamilyMemberCard.vue

<template>
  <view class="member-card" :class="{ 'member-card--selected': isSelected }" @click="handleClick">
    <view class="member-card__avatar" :class="avatarColorClass">
      <image v-if="member.avatar" class="member-card__avatar-img" :src="member.avatar" mode="aspectFill" />
      <text v-else class="member-card__avatar-text">{{ member.nickname && member.nickname[0] || '?' }}</text>
    </view>
    <text class="member-card__name">{{ member.nickname }}</text>
    <view class="member-card__tags">
      <text class="member-card__role">{{ member.roleLabel || (member.memberType === 'child' ? '孩子' : '家长') }}</text>
      <text v-if="member.danLevel" class="member-card__dan">{{ member.danLevel }}</text>
    </view>
    <view v-if="isSelected" class="member-card__check">
      <text class="member-card__check-icon">✓</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FamilyMemberCard',
  props: {
    member: { type: Object, required: true },
    isSelected: { type: Boolean, default: false }
  },
  computed: {
    avatarColorClass: function() {
      var isParent = this.member.memberType === 'parent' || this.member.role === 'parent'
      if (isParent) return 'avatar-color--parent'
      return 'avatar-color--child-' + (this.member.id % 6)
    }
  },
  methods: {
    handleClick() {
      this.$emit('select', this.member)
    }
  }
}
</script>

<style scoped>
.member-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  padding: 16rpx 8rpx 12rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  border: 2rpx solid transparent;
  position: relative;
  transition: all 0.2s ease;
}

.member-card--selected {
  border-color: #5B9BD5;
  background: #EBF5FF;
}

.member-card__avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  overflow: hidden;
}

.member-card__avatar-img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}

.member-card__avatar-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #FFFFFF;
}

.member-card__name {
  font-size: 22rpx;
  color: #1E293B;
  font-weight: 500;
  max-width: 104rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
}

.member-card__tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rpx;
}

.member-card__role {
  font-size: 18rpx;
  color: #64748B;
  line-height: 1.3;
}

.member-card__dan {
  font-size: 18rpx;
  color: #F97316;
  font-weight: 600;
  line-height: 1.3;
}

.member-card__check {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32rpx;
  height: 32rpx;
  background: #5B9BD5;
  border-radius: 50% 0 16rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-card__check-icon {
  font-size: 18rpx;
  color: #FFFFFF;
  font-weight: 700;
}

/* Avatar colors — 家长统一蓝色，孩子多彩渐变 */
.avatar-color--parent {
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
}
.avatar-color--child-0 { background: linear-gradient(135deg, #5B9BD5, #3A7CC4); }
.avatar-color--child-1 { background: linear-gradient(135deg, #0EA5E9, #6366F1); }
.avatar-color--child-2 { background: linear-gradient(135deg, #10B981, #059669); }
.avatar-color--child-3 { background: linear-gradient(135deg, #EC4899, #E11D48); }
.avatar-color--child-4 { background: linear-gradient(135deg, #84CC16, #65A30D); }
.avatar-color--child-5 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
</style>