cfc/cfc-frontend/components/ContactCard.vue

<template>
  <view class="contact-card" @click="$emit('click', contact)">
    <view class="card-avatar" :style="{ background: avatarColor }">
      <text class="avatar-text">{{ initial }}</text>
    </view>
    <text class="card-name">{{ contact.name }}</text>
    <view class="card-type-tag" :style="{ background: typeColor + '20', color: typeColor }">
      {{ typeLabel }}
    </view>
    <text class="card-known" v-if="contact.knownSince">
      认识 {{ knownYears }} 年
    </text>
    <text class="card-phone" v-if="contact.phone">{{ contact.phone }}</text>
    <view class="card-intimacy">
      <text class="intimacy-heart">❤️</text>
      <text class="intimacy-value">{{ contact.intimacyLevel }}</text>
    </view>
    <text class="card-birthday" v-if="contact.birthdayCountdown">
      🎂 {{ contact.birthdayLabel }} · {{ contact.birthdayCountdown }}
    </text>
  </view>
</template>

<script>
export default {
  props: {
    contact: { type: Object, required: true }
  },
  computed: {
    initial: function() {
      return this.contact.name ? this.contact.name[0] : '?'
    },
    typeLabel: function() {
      var map = { family: '家人', friend: '朋友', partner: '伴侣', colleague: '同事', other: '其他' }
      return map[this.contact.relationshipType] || '其他'
    },
    typeColor: function() {
      var map = { family: '#10B981', friend: '#F59E0B', partner: '#FF6B35', colleague: '#3B82F6', other: '#94A3B8' }
      return map[this.contact.relationshipType] || '#94A3B8'
    },
    avatarColor: function() {
      var colors = ['#FF6B35', '#667eea', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899']
      var idx = (this.contact.id || 0) % colors.length
      return colors[idx]
    },
    knownYears: function() {
      if (!this.contact.knownSince) return 0
      var now = new Date()
      var known = new Date(this.contact.knownSince)
      return Math.floor((now - known) / (365.25 * 86400000))
    }
  }
}
</script>

<style scoped>
.contact-card {
  width: 240rpx;
  flex-shrink: 0;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-right: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-card:active { opacity: 0.7; }
.card-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
}
.avatar-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}
.card-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}
.card-type-tag {
  font-size: 20rpx;
  padding: 2rpx 14rpx;
  border-radius: 10rpx;
  margin-bottom: 8rpx;
}
.card-known { font-size: 22rpx; color: #999; margin-bottom: 4rpx; }
.card-phone { font-size: 22rpx; color: #bbb; margin-bottom: 8rpx; }
.card-intimacy {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}
.intimacy-heart { font-size: 22rpx; margin-right: 4rpx; }
.intimacy-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #FF6B35;
}
.card-birthday {
  font-size: 20rpx;
  color: #EC4899;
}
</style>