pet-system-fulfiller-app/pages/recruit/form.vue

<template>
  <view class="container">
    <!-- 个人信息卡片 -->
    <view class="card">
      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <view class="input-box">
           <view class="prefix-area">
             <text class="prefix">+86</text>
             <text class="arrow-down">﹀</text>
           </view>
           <input class="input" type="number" v-model="formData.mobile" />
        </view>
      </view>

      <!-- 验证码 -->
      <view class="form-item">
        <text class="label">验证码</text>
        <view class="input-box">
          <input class="input" type="number" v-model="formData.code" placeholder="验证码" />
          <text class="get-code-text" @click="getVerifyCode">{{ countDown > 0 ? countDown + 's' : '获取验证码' }}</text>
        </view>
      </view>

      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名</text>
        <view class="input-box">
          <input class="input" type="text" v-model="formData.name" />
        </view>
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <text class="label">性别</text>
        <view class="gender-group">
          <view class="radio-item" @click="formData.gender = 1">
            <text class="radio-icon" :class="{active: formData.gender === 1}">{{ formData.gender === 1 ? '♂' : '○' }}</text>
            <text class="radio-label" :class="{active: formData.gender === 1}"> 男</text>
          </view>
          <view class="radio-item" @click="formData.gender = 2">
            <text class="radio-icon" :class="{active: formData.gender === 2}">{{ formData.gender === 2 ? '♀' : '○' }}</text>
            <text class="radio-label" :class="{active: formData.gender === 2}"> 女</text>
          </view>
        </view>
      </view>

      <!-- 生日 -->
      <view class="form-item">
        <text class="label">生日</text>
        <view class="input-box" @click="openPicker">
            <text>{{ formData.birthday || '请选择生日' }}</text>
            <!-- 灰色箭头 SVG -->
            <svg class="arrow-right" style="width:24rpx; height:24rpx; margin-left: auto;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-45.056L382.592 149.312a29.12 29.12 0 0 0-41.728 0z" fill="#CCCCCC"></path>
            </svg>
        </view>
      </view>

      <!-- 密码 -->
      <view class="form-item">
        <text class="label">密码</text>
        <view class="input-box">
          <input class="input" :password="!showPwd" v-model="formData.password" placeholder="设置登录密码" />
          <view class="monkey-icon" @click="showPwd = !showPwd">
             <template v-if="showPwd">
              <!-- 睁眼线框图标 -->
              <svg class="svg-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#CCCCCC"/>
              </svg>
            </template>
            <template v-else>
              <!-- 闭眼线框图标 (带睫毛) -->
              <svg class="svg-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 7C7 7 2.73 10.11 1 14.5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M23 14.5C21.27 10.11 17 7 12 7" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M12 7V4" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M16 8L18 5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M8 8L6 5" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M20 10L22 8" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
                <path d="M4 10L2 8" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </template>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务类型卡片 -->
    <view class="card">
      <view class="section-title">服务类型</view>
      <view class="service-types">
        <view 
          class="type-btn" 
          v-for="(item, index) in serviceTypes" 
          :key="item.id"
          :class="{selected: formData.serviceType.includes(item.id)}"
          @click="toggleService(item)"
        >
          {{ item.name }}
        </view>
      </view>

      <!-- 工作城市 -->
      <view class="form-item">
        <text class="label">工作城市</text>
        <view class="input-box" @click="openCityPicker">
            <text :style="{color: formData.city ? '#333' : '#ccc'}">{{ formData.city || '请选择工作城市' }}</text>
            <!-- 灰色箭头 SVG -->
            <svg class="arrow-right" style="width:24rpx; height:24rpx; margin-left: auto;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-45.056L382.592 149.312a29.12 29.12 0 0 0-41.728 0z" fill="#CCCCCC"></path>
            </svg>
        </view>
      </view>

      <!-- 服务站点 -->
      <view class="form-item">
        <text class="label">服务站点</text>
        <view class="input-box" @click="openStationPicker">
            <text :style="{color: formData.station ? '#333' : '#ccc'}">{{ formData.station || '请选择服务站点' }}</text>
            <!-- 灰色箭头 SVG -->
            <svg class="arrow-right" style="width:24rpx; height:24rpx; margin-left: auto;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-45.056L382.592 149.312a29.12 29.12 0 0 0-41.728 0z" fill="#CCCCCC"></path>
            </svg>
        </view>
      </view>
    </view>

    <!-- ... (Bottom content) ... -->
    
    <!-- 自定义日期选择器 (已存在) --> 
    <!-- ... (Picker content) ... -->

    <!-- 自定义城市选择器 (级联版) -->
    <view class="picker-mask" :class="{show: showCityPicker}" @click="closeCityPicker">
        <view class="picker-content" @click.stop>
            <view class="picker-header">
                <text class="picker-btn-cancel" @click="closeCityPicker">取消</text>
                <text class="picker-title">请选择工作城市</text>
                <text class="picker-btn-confirm" @click="confirmCity">确定</text>
            </view>
            <view class="picker-body">
                <!-- 左侧：垂直路径 -->
                <view class="timeline-area">
                    <!-- 已选节点 -->
                    <view 
                        class="timeline-item" 
                        v-for="(item, index) in selectedPathway" 
                        :key="index"
                        @click="jumpToStep(index)"
                    >
                        <view class="timeline-dot"></view>
                        <text>{{ item.name }}</text>
                    </view>
                    <!-- 当前正在选的提示 (如果还没选完) -->
                    <view 
                        class="timeline-item active" 
                        v-if="selectStep === selectedPathway.length"
                    >
                        <view class="timeline-dot"></view>
                        <text>请选择</text>
                    </view>
                </view>

                <!-- 右侧：待选项列表 -->
                <scroll-view scroll-y class="list-area">
                    <view 
                        class="list-item" 
                        v-for="(item, index) in currentList" 
                        :key="item.id"
                        @click="selectCityItem(item)"
                    >
                        {{ item.name }}
                    </view>
                    <view v-if="currentList.length === 0" style="padding:20rpx;color:#999">
                        无数据
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>

    <!-- 自定义站点选择器 -->
    <view class="picker-mask" :class="{show: showStationPicker}" @click="closeStationPicker">
        <view class="picker-content" @click.stop>
            <view class="picker-header" style="justify-content: center; position: relative;">
                <text class="picker-btn-cancel" style="position: absolute; left: 30rpx;" @click="closeStationPicker">取消</text>
                <text class="picker-title">选择服务站点</text>
            </view>
            <scroll-view scroll-y class="picker-list">
                <view 
                    class="station-item" 
                    v-for="(item, index) in stationList" 
                    :key="index"
                    @click="selectStation(item)"
                >
                    {{ item.name }}
                </view>
            </scroll-view>
        </view>
    </view>

    <!-- 底部协议与按钮 -->
    <view class="footer-actions">
        <view class="agreement-row">
          <view class="checkbox" :class="{checked: isAgreed}" @click="isAgreed = !isAgreed">
             <text v-if="isAgreed" class="check-mark">✓</text>
          </view>
          <text class="agree-text">我已阅读并同意 <text style="color:#2979ff" @click.stop="openPrivacy">《宠宝履约者说明》</text></text>
        </view>

        <view class="footer-btn-area">
          <button class="submit-btn" @click="goToAuth">下一步，实名认证</button>
        </view>
    </view>
    
    <!-- 自定义日期选择器 -->
    <view class="picker-mask" :class="{show: showPicker}" @click="closePicker">
        <view class="picker-content" @click.stop>
            <view class="picker-header">
                <text class="picker-btn-cancel" @click="closePicker">取消</text>
                <text class="picker-title">选择出生日期</text>
                <text class="picker-btn-confirm" @click="confirmPicker">确定</text>
            </view>
            <picker-view 
                class="picker-view" 
                indicator-style="height: 50px;" 
                :value="pickerValue" 
                @change="onPickerChange"
            >
                <picker-view-column>
                    <view class="picker-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="picker-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="picker-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>
    </view>

    <!-- 协议弹窗 -->
    <privacy-popup 
        :visible="showPrivacy" 
        :title="privacyTitle" 
        :content="privacyContent"
        @close="showPrivacy = false"
    >
    </privacy-popup>

  </view>
</template>

<script>
import logic from './logic.js';
import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';

export default {
    ...logic,
    components: {
        PrivacyPopup
    }
}
</script>

<style>
@import './style.css';
</style>