ai-c/pages/housekeeping-apply/housekeeping-apply.wxml

<!-- 家政保洁申请页面 -->
<view class="page-container">
  <!-- 顶部导航栏 -->
  <view class="nav-header" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <view class="nav-back" bindtap="goBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
        <text class="back-text">返回</text>
      </view>
      <text class="nav-title">家政保洁</text>
      <view class="nav-placeholder"></view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;">
    <!-- 申请表单 -->
    <view class="apply-form">
      <!-- 状态卡片 -->
      <view class="status-card" wx:if="{{applyStatus !== 'none'}}">
        <view class="status-icon {{applyStatus}}">
          <image wx:if="{{applyStatus === 'pending'}}" src="/images/icon-pending.png"></image>
          <image wx:if="{{applyStatus === 'approved'}}" src="/images/icon-success.png"></image>
          <image wx:if="{{applyStatus === 'rejected'}}" src="/images/icon-rejected.png"></image>
        </view>
        <text class="status-title">{{statusTitle}}</text>
        <text class="status-desc">{{statusDesc}}</text>
        <button class="btn-secondary" wx:if="{{applyStatus === 'rejected'}}" bindtap="reapply">重新申请</button>
      </view>

      <!-- 表单内容 -->
      <view class="form-content" wx:if="{{applyStatus === 'none' || isReapply}}">
        <!-- 个人照片 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">个人照片</text>
            <text class="required">*</text>
          </view>
          <view class="avatar-upload-area" bindtap="chooseAvatar">
            <view class="avatar-circle">
              <image wx:if="{{formData.avatar}}" src="{{formData.avatar}}" class="avatar-image" mode="aspectFill"></image>
              <view class="upload-placeholder" wx:else>
                <image src="/images/icon-camera.png" class="camera-icon" mode="aspectFit"></image>
                <text class="upload-text">上传照片</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 基本信息 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">基本信息</text>
          </view>
          
          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">姓名</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" placeholder="请输入真实姓名" value="{{formData.realName}}" bindinput="onInputChange" data-field="realName" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">性别</text>
              <text class="required">*</text>
            </view>
            <view class="gender-options">
              <view class="gender-btn {{formData.gender === 'male' ? 'active' : ''}}" bindtap="selectGender" data-gender="male">
                <text>男</text>
              </view>
              <view class="gender-btn {{formData.gender === 'female' ? 'active' : ''}}" bindtap="selectGender" data-gender="female">
                <text>女</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">年龄</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" type="number" placeholder="请输入年龄" value="{{formData.age}}" bindinput="onInputChange" data-field="age" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">身份证号</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" placeholder="请输入身份证号" value="{{formData.idCard}}" bindinput="onInputChange" data-field="idCard" maxlength="18" />
            </view>
          </view>
        </view>

        <!-- 服务信息 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">服务信息</text>
          </view>
          
          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">服务城市</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" placeholder="请输入服务城市" value="{{formData.city}}" bindinput="onInputChange" data-field="city" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">服务区域</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" placeholder="请输入服务区域（如：朝阳区、海淀区）" value="{{formData.serviceArea}}" bindinput="onInputChange" data-field="serviceArea" />
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">服务项目</text>
              <text class="required">*</text>
            </view>
            <view class="service-types">
              <view class="service-btn {{formData.serviceTypes.includes('daily') ? 'active' : ''}}" bindtap="toggleServiceType" data-type="daily">日常保洁</view>
              <view class="service-btn {{formData.serviceTypes.includes('deep') ? 'active' : ''}}" bindtap="toggleServiceType" data-type="deep">深度清洁</view>
              <view class="service-btn {{formData.serviceTypes.includes('new') ? 'active' : ''}}" bindtap="toggleServiceType" data-type="new">开荒保洁</view>
              <view class="service-btn {{formData.serviceTypes.includes('appliance') ? 'active' : ''}}" bindtap="toggleServiceType" data-type="appliance">家电清洗</view>
              <view class="service-btn {{formData.serviceTypes.includes('organize') ? 'active' : ''}}" bindtap="toggleServiceType" data-type="organize">收纳整理</view>
              <view class="service-btn {{formData.serviceTypes.includes('glass') ? 'active' : ''}}" bindtap="toggleServiceType" data-type="glass">擦玻璃</view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">从业年限</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" type="number" placeholder="请输入从业年限" value="{{formData.workYears}}" bindinput="onInputChange" data-field="workYears" />
            </view>
          </view>
        </view>

        <!-- 资质证书 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">资质证书</text>
          </view>
          
          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">健康证</text>
              <text class="required">*</text>
            </view>
            <view class="cert-upload" bindtap="uploadCert" data-type="health">
              <image wx:if="{{formData.healthCert}}" src="{{formData.healthCert}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传健康证</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">身份证正面</text>
              <text class="required">*</text>
            </view>
            <view class="cert-upload" bindtap="uploadCert" data-type="idFront">
              <image wx:if="{{formData.idFront}}" src="{{formData.idFront}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传身份证正面</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">身份证反面</text>
              <text class="required">*</text>
            </view>
            <view class="cert-upload" bindtap="uploadCert" data-type="idBack">
              <image wx:if="{{formData.idBack}}" src="{{formData.idBack}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传身份证反面</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">技能证书</text>
            </view>
            <view class="cert-upload" bindtap="uploadCert" data-type="skill">
              <image wx:if="{{formData.skillCert}}" src="{{formData.skillCert}}" class="cert-image" mode="aspectFill"></image>
              <view class="cert-placeholder" wx:else>
                <image src="/images/icon-upload.png" class="upload-icon" mode="aspectFit"></image>
                <text class="upload-text">上传技能证书（选填）</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 个人介绍 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">个人介绍</text>
            <text class="required">*</text>
          </view>
          <view class="textarea-wrapper">
            <textarea class="intro-textarea" placeholder="请介绍您的工作经验、擅长项目等（50-500字）" value="{{formData.introduction}}" bindinput="onInputChange" data-field="introduction" maxlength="500"></textarea>
          </view>
          <view class="textarea-footer">
            <text class="char-count">{{formData.introduction.length || 0}}/500</text>
          </view>
        </view>

        <!-- 联系方式 -->
        <view class="form-section">
          <view class="section-header">
            <text class="section-title">联系方式</text>
          </view>
          
          <view class="form-item">
            <view class="item-label-row">
              <text class="item-label">手机号</text>
              <text class="required">*</text>
            </view>
            <view class="input-wrapper">
              <input class="item-input" type="number" placeholder="请输入手机号" value="{{formData.phone}}" bindinput="onInputChange" data-field="phone" maxlength="11" />
            </view>
          </view>
        </view>

        <!-- 协议 -->
        <view class="agreement-row">
          <view class="checkbox {{agreed ? 'checked' : ''}}" bindtap="toggleAgreement">
            <image wx:if="{{agreed}}" src="/images/icon-checked.png" class="check-icon"></image>
          </view>
          <view class="agreement-text">
            <text class="normal-text">我已阅读并同意</text>
            <text class="link-text" bindtap="viewAgreement">《家政服务协议》</text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <button class="submit-btn {{canSubmit ? '' : 'disabled'}}" bindtap="submitApply" disabled="{{!canSubmit}}">
          提交申请
        </button>
      </view>
    </view>

    <view class="bottom-placeholder"></view>
  </scroll-view>
</view>