cfc/cfc-frontend/components/ContactImport.vue

<template>
  <view class="overlay" v-if="visible" @click.self="onCancel">
    <view class="modal">
      <text class="modal-title">添加联系人</text>
      <view class="form">
        <view class="form-row">
          <text class="form-label">姓名</text>
          <input class="form-input" v-model="form.name" disabled />
        </view>
        <view class="form-row">
          <text class="form-label">手机号</text>
          <input class="form-input" v-model="form.phone" disabled />
        </view>
        <view class="form-row">
          <text class="form-label">关系类型</text>
          <picker mode="selector" :range="typeOptions" @change="onTypeChange">
            <view class="form-picker">{{ form.relationshipTypeLabel || '请选择' }}</view>
          </picker>
        </view>
        <view class="form-row">
          <text class="form-label">认识时间</text>
          <picker mode="date" @change="onDateChange">
            <view class="form-picker">{{ form.knownSince || '请选择' }}</view>
          </picker>
        </view>
        <view class="form-row">
          <text class="form-label">生日</text>
          <picker mode="date" @change="onBirthdayChange">
            <view class="form-picker">{{ form.birthday || '请选择' }}</view>
          </picker>
        </view>
        <view class="form-row">
          <text class="form-label">个人介绍</text>
          <input class="form-input" v-model="form.bio" placeholder="选填" />
        </view>
      </view>
      <view class="modal-actions">
        <button class="btn-cancel" @click="onCancel">取消</button>
        <button class="btn-confirm" @click="onConfirm">确认添加</button>
      </view>
    </view>
  </view>
</template>

<script>
import { importPhoneContact } from '../utils/api.js'

export default {
  props: {
    visible: { type: Boolean, default: false },
    name: { type: String, default: '' },
    phone: { type: String, default: '' }
  },
  data: function() {
    return {
      form: {
        name: '',
        phone: '',
        relationshipType: '',
        relationshipTypeLabel: '',
        knownSince: '',
        birthday: '',
        bio: ''
      },
      typeOptions: ['家人', '朋友', '伴侣', '同事', '其他'],
      typeValues: { '家人': 'family', '朋友': 'friend', '伴侣': 'partner', '同事': 'colleague', '其他': 'other' }
    }
  },
  watch: {
    name: function(val) { this.form.name = val },
    phone: function(val) { this.form.phone = val }
  },
  methods: {
    onTypeChange: function(e) {
      var label = this.typeOptions[e.detail.value]
      this.form.relationshipType = this.typeValues[label] || 'other'
      this.form.relationshipTypeLabel = label
    },
    onDateChange: function(e) {
      this.form.knownSince = e.detail.value
    },
    onBirthdayChange: function(e) {
      this.form.birthday = e.detail.value
    },
    onConfirm: function() {
      var self = this
      var extra = {}
      if (this.form.relationshipType) extra.relationshipType = this.form.relationshipType
      if (this.form.knownSince) extra.knownSince = this.form.knownSince
      if (this.form.birthday) extra.birthday = this.form.birthday
      if (this.form.bio) extra.bio = this.form.bio
      importPhoneContact({
        name: this.form.name,
        phone: this.form.phone,
        extra: extra
      }).then(function(res) {
        if (res.code === 200) {
          uni.showToast({ title: '添加成功', icon: 'success' })
          self.$emit('success')
          self.reset()
        } else {
          uni.showToast({ title: res.message || '添加失败', icon: 'none' })
        }
      }).catch(function() {
        uni.showToast({ title: '网络错误', icon: 'none' })
      })
    },
    onCancel: function() {
      this.reset()
      this.$emit('close')
    },
    reset: function() {
      this.form = { name: '', phone: '', relationshipType: '', relationshipTypeLabel: '', knownSince: '', birthday: '', bio: '' }
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}
.modal {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 30rpx;
  width: 100%;
  box-sizing: border-box;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
  text-align: center;
}
.form-row {
  margin-bottom: 24rpx;
}
.form-label {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}
.form-input {
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
  color: #333;
}
.form-picker {
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  color: #333;
}
.modal-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}
.btn-cancel {
  flex: 1;
  padding: 20rpx;
  border-radius: 12rpx;
  border: 1rpx solid #ddd;
  background: #fff;
  font-size: 28rpx;
  color: #666;
  text-align: center;
}
.btn-confirm {
  flex: 2;
  padding: 20rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #FF6B35, #F97316);
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  border: none;
}
</style>