miniwx/pages/appointment/appointment.wxml

<!--appointment.wxml-->
<view class="page">
  <!-- 来访人信息 -->
  <view class="section">
    <view class="section-title">来访人信息</view>
    <view class="form-group">
      <text class="form-label">姓名<text class="required">*</text></text>
      <view class="form-field-wrap">
        <input class="form-input {{fieldErrors.name ? 'form-input-error' : ''}}" placeholder="请输入访客姓名" value="{{form.name}}" bindinput="onNameInput" bindblur="onNameBlur" />
        <text wx:if="{{fieldErrors.name}}" class="form-error">{{fieldErrors.name}}</text>
      </view>
    </view>
    <view class="form-group">
      <text class="form-label">手机号<text class="required">*</text></text>
      <view class="form-field-wrap">
        <input class="form-input {{fieldErrors.phone ? 'form-input-error' : ''}}" type="number" maxlength="11" placeholder="请输入手机号" value="{{form.phone}}" bindinput="onPhoneInput" bindblur="onPhoneBlur" />
        <text wx:if="{{fieldErrors.phone}}" class="form-error">{{fieldErrors.phone}}</text>
      </view>
    </view>
    <view class="form-group">
      <text class="form-label">公司<text class="required">*</text></text>
      <view class="form-field-wrap">
        <input class="form-input {{fieldErrors.company ? 'form-input-error' : ''}}" placeholder="请输入所属公司" value="{{form.company}}" bindinput="onCompanyInput" bindblur="onCompanyBlur" />
        <text wx:if="{{fieldErrors.company}}" class="form-error">{{fieldErrors.company}}</text>
      </view>
    </view>
    <view class="form-group">
      <text class="form-label">来访事由<text class="required">*</text></text>
      <view class="form-field-wrap">
        <input class="form-input {{fieldErrors.reason ? 'form-input-error' : ''}}" placeholder="请输入来访事由" value="{{form.reason}}" bindinput="onReasonInput" bindblur="onReasonBlur" />
        <text wx:if="{{fieldErrors.reason}}" class="form-error">{{fieldErrors.reason}}</text>
      </view>
    </view>
    <view class="form-group">
      <text class="form-label">车牌号</text>
      <plate-input value="{{form.plateNumber}}" bindchange="onPlateNumberChange" />
    </view>
  </view>

  <!-- 来访时间 -->
  <view class="section">
    <view class="section-title">来访时间</view>
    <view class="form-group">
      <text class="form-label">来访日期<text class="required">*</text></text>
      <picker class="form-picker-wrap" mode="date" value="{{form.date}}" start="{{today}}" bindchange="onDateChange">
        <view class="form-picker">
          <text class="{{form.date ? 'picker-value' : 'picker-placeholder'}}">{{form.date || '请选择日期'}}</text>
          <text class="picker-arrow">›</text>
        </view>
      </picker>
    </view>
    <view class="form-group form-group-time">
      <text class="form-label">来访时段<text class="required">*</text></text>
      <view class="form-field-wrap">
        <view class="time-range">
          <picker class="time-picker-wrap" mode="time" value="{{timeStart}}" bindchange="onTimeStartChange">
            <view class="time-picker">
              <text class="{{timeStart ? 'picker-value' : 'picker-placeholder'}}">{{timeStart || '开始时间'}}</text>
            </view>
          </picker>
          <text class="time-range-sep">至</text>
          <picker class="time-picker-wrap" mode="time" value="{{timeEnd}}" bindchange="onTimeEndChange">
            <view class="time-picker">
              <text class="{{timeEnd ? 'picker-value' : 'picker-placeholder'}}">{{timeEnd || '结束时间'}}</text>
            </view>
          </picker>
        </view>
        <text wx:if="{{fieldErrors.timeRange}}" class="form-error">{{fieldErrors.timeRange}}</text>
      </view>
    </view>
  </view>

  <!-- 被访人信息 -->
  <view class="section">
    <view class="section-title">被访人信息</view>
    <view class="form-group form-group-area">
      <text class="form-label">拜访区域<text class="required">*</text></text>
      <view class="form-field-wrap">
        <view class="multi-select-wrap">
          <view class="multi-select-trigger" bindtap="toggleAreaDropdown">
            <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>
    </view>
    <view class="form-group">
      <text class="form-label">被访人</text>
      <view class="form-field-wrap">
        <input class="form-input" placeholder="请输入被访人" value="{{form.hostName}}" bindinput="onHostNameInput" />
      </view>
    </view>
    <view class="form-group">
      <text class="form-label">接待人</text>
      <view class="form-field-wrap">
        <input class="form-input form-input-disabled" value="金梦婷" disabled />
      </view>
    </view>
  </view>

  <!-- 提交按钮 -->
  <view class="submit-wrap">
    <button class="submit-btn" bindtap="onSubmit" disabled="{{submitting}}">
      {{submitting ? '提交中...' : '提交预约'}}
    </button>
  </view>
</view>