cfc/cfc-frontend/components/ContactImport.vue

<template>
  <view class="overlay" v-if="visible" @touchmove.stop.prevent>
    <view class="modal">
      <text class="modal-title">添加联系人</text>

      <!-- 从微信通讯录导入 -->
      <view class="wechat-import-btn" @click="chooseFromWeChat">
        <text class="wechat-import-text">从微信通讯录导入</text>
      </view>

      <view class="form">
        <view class="form-row">
          <text class="form-label">姓名</text>
          <input class="form-input" v-model="form.name" placeholder="请输入姓名" />
        </view>
        <view class="form-row">
          <text class="form-label">手机号</text>
          <input class="form-input" v-model="form.phone" placeholder="请输入手机号" type="number" />
        </view>
        <view class="form-row">
          <text class="form-label">关系类型</text>
          <picker mode="selector" :range="typeLabels" @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>
          <textarea class="form-textarea" 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'

var DEFAULT_RELATIONSHIP_TYPES = [
  { value: 'family', label: '家人' },
  { value: 'friend', label: '朋友' },
  { value: 'partner', label: '伴侣' },
  { value: 'colleague', label: '同事' },
  { value: 'other', label: '其他' }
]

export default {
  props: {
    visible: { type: Boolean, default: false },
    name: { type: String, default: '' },
    phone: { type: String, default: '' }
  },
  data: function() {
    var defaultLabels = []
    for (var i = 0; i < DEFAULT_RELATIONSHIP_TYPES.length; i++) {
      defaultLabels.push(DEFAULT_RELATIONSHIP_TYPES[i].label)
    }
    return {
      form: {
        name: '',
        phone: '',
        relationshipType: '',
        relationshipTypeLabel: '',
        knownSince: '',
        birthday: '',
        bio: ''
      },
      relationshipTypes: DEFAULT_RELATIONSHIP_TYPES,
      typeLabels: defaultLabels
    }
  },
  watch: {
    visible: function(val) {
      if (val) {
        if (!this.form.name && this.name) {
          this.form.name = this.name
        }
        if (!this.form.phone && this.phone) {
          this.form.phone = this.phone
        }
      }
    },
    name: function(val) {
      if (val && !this.form.name) {
        this.form.name = val
      }
    },
    phone: function(val) {
      if (val && !this.form.phone) {
        this.form.phone = val
      }
    }
  },
  methods: {
    chooseFromWeChat: function() {
      var self = this
      if (typeof wx !== 'undefined' && wx.chooseContact) {
        wx.chooseContact({
          success: function(res) {
            self.form.name = res.name || ''
            self.form.phone = res.phone || ''
          },
          fail: function() {
            uni.showToast({ title: '获取通讯录失败', icon: 'none' })
          }
        })
      } else {
        uni.showToast({ title: '当前环境不支持', icon: 'none' })
      }
    },
    onTypeChange: function(e) {
      var idx = e.detail.value
      var typeObj
      this.form.relationshipTypeLabel = this.typeLabels[idx]
      typeObj = this.relationshipTypes && this.relationshipTypes[idx]
      if (typeObj) {
        this.form.relationshipType = typeof typeObj === 'string' ? typeObj : (typeObj.typeKey || typeObj.value || typeObj.code || typeObj.name || typeObj.label || '')
      } else {
        this.form.relationshipType = ''
      }
    },
    onDateChange: function(e) {
      this.form.knownSince = e.detail.value
    },
    onBirthdayChange: function(e) {
      this.form.birthday = e.detail.value
    },
    onConfirm: function() {
      var self = this
      if (!this.form.name || !this.form.phone) {
        uni.showToast({ title: '请填写姓名和手机号', icon: 'none' })
        return
      }
      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: ''
      }
    }
  }
}
</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;
  justify-content: center;
}
.modal {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 30rpx 60rpx;
  width: 100%;
  box-sizing: border-box;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
  text-align: center;
}
.wechat-import-btn {
  background: #F0F9FF;
  border: 1rpx solid #BAE6FD;
  border-radius: 16rpx;
  padding: 24rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
}
.wechat-import-btn:active {
  opacity: 0.7;
}
.wechat-import-text {
  font-size: 28rpx;
  color: #0EA5E9;
  font-weight: 500;
}
.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: 24rpx 20rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
  color: #333;
  min-height: 80rpx;
  background: #fff;
}
.form-textarea {
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
  color: #333;
  min-height: 160rpx;
}
.form-picker {
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  font-size: 28rpx;
  color: #333;
  min-height: 80rpx;
  display: flex;
  align-items: center;
}
.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>