fix(cfc-frontend): redesign ContactImport - support WeChat contacts import & fix picker modal issue

cfc-frontend/components/ContactImport.vue

@@ -1,32 +1,38 @@
 <template>
-  <view class="overlay" v-if="visible" @click.self="onCancel">
+  <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" disabled />
+          <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" disabled />
+          <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="typeOptions" @change="onTypeChange">
-            <view class="form-picker">{{ form.relationshipTypeLabel || '请选择' }}</view>
+          <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>
+            <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>
+            <view class="form-picker">{{ form.birthday || '请选择生日' }}</view>
           </picker>
         </view>
         <view class="form-row">
@@ -43,7 +49,7 @@
 </template>
 
 <script>
-import { importPhoneContact } from '../utils/api.js'
+import { importPhoneContact, getRelationshipTypes } from '../utils/api.js'
 
 export default {
   props: {
@@ -62,19 +68,77 @@ export default {
         birthday: '',
         bio: ''
       },
-      typeOptions: ['家人', '朋友', '伴侣', '同事', '其他'],
-      typeValues: { '家人': 'family', '朋友': 'friend', '伴侣': 'partner', '同事': 'colleague', '其他': 'other' }
+      relationshipTypes: [],
+      typeLabels: []
     }
   },
   watch: {
-    name: function(val) { this.form.name = val },
-    phone: function(val) { this.form.phone = val }
+    visible: function(val) {
+      if (val) {
+        this.loadTypes()
+        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: {
+    loadTypes: function() {
+      var self = this
+      getRelationshipTypes().then(function(res) {
+        var labels
+        if (res.code === 200 && Array.isArray(res.data)) {
+          labels = res.data.map(function(item) {
+            return typeof item === 'string' ? item : (item.typeName || item.name || item.label || item.value || '')
+          })
+          self.relationshipTypes = res.data
+          self.typeLabels = labels
+        }
+      }).catch(function() {
+        // fallback to default type options
+        self.typeLabels = ['家人', '朋友', '伴侣', '同事', '其他']
+        self.relationshipTypes = ['family', 'friend', 'partner', 'colleague', 'other']
+      })
+    },
+    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 label = this.typeOptions[e.detail.value]
-      this.form.relationshipType = this.typeValues[label] || 'other'
-      this.form.relationshipTypeLabel = label
+      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
@@ -84,6 +148,10 @@ export default {
     },
     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
@@ -110,8 +178,15 @@ export default {
       this.$emit('close')
     },
     reset: function() {
-      this.form = { name: '', phone: '', relationshipType: '', relationshipTypeLabel: '', knownSince: '', birthday: '', bio: '' }
-      this.$emit('close')
+      this.form = {
+        name: '',
+        phone: '',
+        relationshipType: '',
+        relationshipTypeLabel: '',
+        knownSince: '',
+        birthday: '',
+        bio: ''
+      }
     }
   }
 }
@@ -124,27 +199,44 @@ export default {
   background: rgba(0,0,0,0.5);
   z-index: 999;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
 }
 .modal {
   background: #fff;
-  border-radius: 24rpx;
-  padding: 40rpx 30rpx;
-  width: 85%;
-  max-width: 600rpx;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 40rpx 30rpx 60rpx;
+  width: 100%;
   box-sizing: border-box;
-  max-height: 70vh;
+  max-height: 80vh;
   overflow-y: auto;
 }
 .modal-title {
   font-size: 32rpx;
   font-weight: bold;
   color: #333;
-  margin-bottom: 30rpx;
+  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;
 }
@@ -163,6 +255,7 @@ export default {
   box-sizing: border-box;
   color: #333;
   min-height: 80rpx;
+  background: #fff;
 }
 .form-textarea {
   border: 1rpx solid #ddd;