拜访区域支持多选，被访人改为输入框，取消拜访区域和被访人的联动

pages/appointment/appointment.js

@@ -15,17 +15,13 @@ Page({
       date: '',
       time: '',
       hostName: '',
-      hostId: '',
-      personId: '',
       area: '',
       plateNumber: ''
     },
-    areas: [],
+    areaOptions: [],
-    departments: [],
+    selectedAreas: {},
-    areaIndex: -1,
+    selectedAreasDisplay: '',
-    persons: [],
+    showAreaDropdown: false,
-    personNames: [],
-    personIndex: -1,
     today: '',
     timeStart: '',
     timeEnd: '',
@@ -47,23 +43,16 @@ Page({
   },
 
   initPage() {
-    // 使用本地时区获取当天日期，用于 picker 最小日期限制
     const today = formatDate(new Date())
     this.setData({ today })
-    this.loadDepartments()
+    this.loadAreaOptions()
   },
 
-  async loadDepartments() {
+  async loadAreaOptions() {
     try {
       const list = await appointmentDB.getDepartmentSelector()
-      const departments = list.map(item => ({
+      const areaOptions = list.map(item => item.departmentName)
-        departmentCode: item.departmentCode,
+      this.setData({ areaOptions })
-        departmentName: item.departmentName
-      }))
-      this.setData({
-        departments,
-        areas: departments.map(d => d.departmentName)
-      })
     } catch (err) {
       console.error('获取拜访区域列表失败', err)
       wx.showToast({ title: '获取拜访区域失败', icon: 'none' })
@@ -131,58 +120,21 @@ Page({
     }
   },
 
-  onAreaChange(e) {
+  toggleAreaDropdown() {
-    const index = Number(e.detail.value)
+    this.setData({ showAreaDropdown: !this.data.showAreaDropdown })
-    const department = this.data.departments[index]
-    const departmentCode = department ? department.departmentCode : ''
-    this.setData({
-      areaIndex: index,
-      'form.area': department ? department.departmentName : '',
-      'form.hostId': '',
-      'form.hostName': '',
-      'form.personId': '',
-      persons: [],
-      personNames: [],
-      personIndex: -1
-    })
-    if (departmentCode) {
-      this.loadPersons(departmentCode)
-    }
   },
 
-  async loadPersons(department) {
+  toggleArea(e) {
-    wx.showLoading({ title: '加载被访人中...' })
+    const value = e.currentTarget.dataset.value
-    try {
+    const selectedAreas = { ...this.data.selectedAreas }
-      const list = await appointmentDB.getPersonSelector(department)
+    selectedAreas[value] = !selectedAreas[value]
-      const persons = list.map(item => ({
+    const display = Object.keys(selectedAreas).filter(k => selectedAreas[k]).join('、')
-        personId: item.personId,
-        personName: item.personName,
-        personId: item.personId
-      }))
     this.setData({
-        persons,
+      selectedAreas,
-        personNames: persons.map(p => p.personName),
+      selectedAreasDisplay: display,
-        personIndex: -1
+      'form.area': display
     })
-    } catch (err) {
+    this._clearFieldError('area')
-      console.error('获取被访人列表失败', err)
-      wx.showToast({ title: '获取被访人列表失败', icon: 'none' })
-    } finally {
-      wx.hideLoading()
-    }
-  },
-
-  onPersonChange(e) {
-    const index = Number(e.detail.value)
-    const person = this.data.persons[index]
-    if (person && person.personId) {
-      this.setData({
-        personIndex: index,
-        'form.hostId': person.personId,
-        'form.hostName': person.personName,
-        'form.personId': person.personId
-      })
-    }
   },
 
   onDateChange(e) {
@@ -212,7 +164,7 @@ Page({
   },
 
   validateForm() {
-    const { name, phone, company, reason, date, time, hostName, area } = this.data.form
+    const { name, phone, company, reason, date, time, area } = this.data.form
     if (!name.trim()) {
       wx.showToast({ title: '请输入访客姓名', icon: 'none' })
       return false
@@ -237,10 +189,6 @@ Page({
       wx.showToast({ title: '请选择来访时间', icon: 'none' })
       return false
     }
-    if (!hostName.trim()) {
-      wx.showToast({ title: '请选择被访人', icon: 'none' })
-      return false
-    }
     if (!area) {
       wx.showToast({ title: '请选择拜访区域', icon: 'none' })
       return false

pages/appointment/appointment.wxml

@@ -73,28 +73,38 @@
   <!-- 被访人信息 -->
   <view class="section">
     <view class="section-title">被访人信息</view>
-    <view class="form-group">
+    <view class="form-group form-group-area">
       <text class="form-label">拜访区域<text class="required">*</text></text>
-      <picker class="form-picker-wrap" range="{{areas}}" value="{{areaIndex}}" bindchange="onAreaChange">
+      <view class="form-field-wrap">
-        <view class="form-picker">
+        <view class="multi-select-wrap">
-          <text class="{{areaIndex >= 0 ? 'picker-value' : 'picker-placeholder'}}">{{areaIndex >= 0 ? areas[areaIndex] : '请选择拜访区域'}}</text>
+          <view class="multi-select-trigger" bindtap="toggleAreaDropdown">
-          <text class="picker-arrow">›</text>
+            <text class="{{selectedAreasDisplay || 'picker-placeholder'}}">{{selectedAreasDisplay || '请选择拜访区域'}}</text>
+            <text class="picker-arrow {{showAreaDropdown ? 'arrow-up' : ''}}">›</text>
+          </view>
+          <view wx:if="{{showAreaDropdown}}" class="multi-select-dropdown">
+            <view wx:for="{{areaOptions}}" wx:key="*this" class="checkbox-item" bindtap="toggleArea" data-value="{{item}}">
+              <view class="checkbox {{selectedAreas[item] ? 'checkbox-checked' : ''}}">
+                <text wx:if="{{selectedAreas[item]}}" class="checkbox-icon">✓</text>
+              </view>
+              <text class="checkbox-label">{{item}}</text>
+            </view>
+          </view>
+        </view>
+        <text wx:if="{{fieldErrors.area}}" class="form-error">{{fieldErrors.area}}</text>
       </view>
-      </picker>
     </view>
     <view class="form-group">
-      <text class="form-label">被访人<text class="required">*</text></text>
+      <text class="form-label">被访人</text>
-      <picker wx:if="{{personNames.length > 0}}" class="form-picker-wrap" range="{{personNames}}" value="{{personIndex}}" bindchange="onPersonChange">
+      <view class="form-field-wrap">
-        <view class="form-picker">
+        <input class="form-input" placeholder="请输入被访人" value="{{form.hostName}}" bindinput="onHostNameInput" />
-          <text class="{{personIndex >= 0 ? 'picker-value' : 'picker-placeholder'}}">{{personIndex >= 0 ? personNames[personIndex] : '请选择被访人'}}</text>
+      </view>
-          <text class="picker-arrow">›</text>
+    </view>
-        </view>
+    <view class="form-group">
-      </picker>
+      <text class="form-label">接待人</text>
-      <view wx:else class="form-picker">
+      <view class="form-field-wrap">
-        <text class="picker-placeholder">请先选择拜访区域</text>
+        <input class="form-input form-input-disabled" value="金梦婷" disabled />
       </view>
     </view>
-    
   </view>
 
   <!-- 提交按钮 -->

pages/appointment/appointment.wxss

@@ -123,6 +123,76 @@ page {
   color: #b8c9db;
 }
 
+.form-input-disabled {
+  color: #999;
+}
+
+.form-group-area {
+  flex-wrap: wrap;
+}
+
+.multi-select-wrap {
+  position: relative;
+  flex: 1;
+}
+
+.multi-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 88rpx;
+}
+
+.multi-select-dropdown {
+  position: absolute;
+  top: 88rpx;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 1rpx solid #e8eef5;
+  border-radius: 12rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  padding: 8rpx 0;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 24rpx;
+}
+
+.checkbox {
+  width: 40rpx;
+  height: 40rpx;
+  border: 2rpx solid #d0d8e4;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.checkbox-checked {
+  background: #5b9bd5;
+  border-color: #5b9bd5;
+}
+
+.checkbox-icon {
+  color: #fff;
+  font-size: 24rpx;
+}
+
+.checkbox-label {
+  font-size: 28rpx;
+  color: #2c3e50;
+}
+
+.arrow-up {
+  transform: rotate(90deg);
+}
+
 .submit-wrap {
   position: fixed;
   bottom: 0;