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="openStationPickerCascader">
            <view class="station-display" v-if="formData.station">
                <text class="area-tag" v-if="formData.areaPath">{{ formData.areaPath }}</text>
                <text class="station-name">{{ formData.station }}</text>
            </view>
            <text v-else style="color: #ccc">请选择所属站点</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: showStationPickerCascader}" @click="closeStationPickerCascader">
        <view class="picker-content" @click.stop>
            <view class="picker-header">
                <text class="picker-btn-cancel" @click="closeStationPickerCascader">取消</text>
                <text class="picker-title">请选择所属站点</text>
                <text class="picker-btn-confirm" @click="closeStationPickerCascader">关闭</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="selectStationItem(item)"
                    >
                        {{ item.name }}
                    </view>
                    <view v-if="currentList.length === 0" style="padding:20rpx;color:#999">
                        无数据
                    </view>
                </scroll-view>
            </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>

    <!-- 协议弹窗 公共组件 -->
    <agreement 
        :visible="showPrivacy" 
        :title="agreementTitle"
        :content="agreementContent"
        @close="showPrivacy = false"
    >
    </agreement>

  </view>
</template>

<script>// 使用脚本文件
import logic from './logic.js';
import Agreement from '@/components/agreement/index.vue';

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

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