cfc/cfc-frontend/components/ContactCard.vue

<template>
  <view class="contact-card-root">
    <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 class="card-family-status" v-if="contact.familyMemberId">
        <text class="family-badge">已是家庭成员</text>
      </view>
      <view class="card-invite" v-else @click.stop="handleInvite">
        <text class="invite-text">邀请加入家庭</text>
      </view>
    </view>
    <view class="invite-modal" v-if="showInviteModal" @click.stop>
      <view class="modal-mask" @click="showInviteModal = false"></view>
      <view class="modal-content">
        <text class="modal-title">邀请加入家庭</text>
        <view class="form-row">
          <text class="form-label">关系类型</text>
          <picker :range="relationshipTypeList" range-key="typeName" @change="onRelationshipChange">
            <text class="form-value">{{ selectedRelationshipName || '请选择' }}</text>
          </picker>
        </view>
        <view class="form-row">
          <text class="form-label">辈分等级</text>
          <picker :range="generationLevelList" @change="onGenerationChange">
            <text class="form-value">{{ selectedGeneration || '请选择' }}</text>
          </picker>
        </view>
        <view class="modal-buttons">
          <view class="modal-btn cancel" @click="showInviteModal = false">取消</view>
          <view class="modal-btn confirm" @click="confirmInvite">确认邀请</view>
        </view>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  props: {
    contact: { type: Object, required: true }
  },
  data: function() {
    return {
      showInviteModal: false,
      relationshipTypeList: [
        { typeName: '家人', typeKey: 'family' },
        { typeName: '朋友', typeKey: 'friend' },
        { typeName: '伴侣', typeKey: 'partner' },
        { typeName: '同事', typeKey: 'colleague' },
        { typeName: '其他', typeKey: 'other' }
      ],
      selectedRelationshipName: '',
      selectedRelationshipKey: '',
      generationLevelList: ['父母(+1)', '子女(-1)', '配偶(0)', '兄弟姐妹(0)', '祖父母(+2)', '孙子女(-2)'],
      selectedGeneration: ''
    }
  },
  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))
    }
  },
  methods: {
    handleInvite: function() {
      this.showInviteModal = true
      // 预填联系人已有的关系类型
      var self = this
      this.selectedRelationshipKey = this.contact.relationshipType || 'other'
      for (var i = 0; i < this.relationshipTypeList.length; i++) {
        if (this.relationshipTypeList[i].typeKey === this.selectedRelationshipKey) {
          this.selectedRelationshipName = this.relationshipTypeList[i].typeName
          break
        }
      }
    },
    onRelationshipChange: function(e) {
      var idx = e.detail.value
      var item = this.relationshipTypeList[idx]
      if (item) {
        this.selectedRelationshipName = item.typeName
        this.selectedRelationshipKey = item.typeKey
      }
    },
    onGenerationChange: function(e) {
      this.selectedGeneration = this.generationLevelList[e.detail.value]
    },
    confirmInvite: function() {
      if (!this.selectedRelationshipName) {
        uni.showToast({ title: '请选择关系类型', icon: 'none' })
        return
      }
      var that = this
      var generationMap = {
        '父母(+1)': 'parent',
        '子女(-1)': 'child',
        '配偶(0)': 'spouse',
        '兄弟姐妹(0)': 'sibling',
        '祖父母(+2)': 'grandparent',
        '孙子女(-2)': 'grandchild'
      }
      var generationLevel = generationMap[this.selectedGeneration] || 'child'
      var app = getApp()
      if (!app || !app.globalData || !app.globalData.baseUrl) return
      uni.request({
        url: app.globalData.baseUrl + '/api/contact/invite-to-family',
        method: 'POST',
        header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token') },
        data: {
          contactId: this.contact.id,
          relationshipType: this.selectedRelationshipKey || 'other',
          generationLevel: generationLevel
        },
        success: function(res) {
          if (res.data && res.data.code === 200) {
            uni.showToast({ title: '邀请成功', icon: 'success' })
            that.showInviteModal = false
            that.$emit('invited', that.contact.id)
          } else {
            uni.showToast({ title: res.data && res.data.message || '邀请失败', icon: 'none' })
          }
        },
        fail: function() {
          uni.showToast({ title: '网络错误', icon: 'none' })
        }
      })
    }
  }
}
</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;
}
.card-family-status {
  margin-top: 8rpx;
}
.family-badge {
  font-size: 20rpx;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
}
.card-invite {
  margin-top: 8rpx;
  padding: 4rpx 16rpx;
  background: #F97316;
  border-radius: 10rpx;
}
.invite-text {
  font-size: 20rpx;
  color: #fff;
}
.invite-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}
.modal-content {
  position: relative;
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}
.form-row {
  margin-bottom: 20rpx;
}
.form-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}
.form-value {
  font-size: 28rpx;
  color: #333;
  padding: 12rpx 16rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
}
.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.modal-btn {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  border-radius: 10rpx;
  font-size: 28rpx;
}
.modal-btn.cancel {
  background: #f5f5f5;
  color: #666;
  margin-right: 16rpx;
}
.modal-btn.confirm {
  background: #F97316;
  color: #fff;
}
</style>