# 履约者招募功能实施计划

## 1. 登录页升级 (`src/pages/login/login.vue`)
- **目标**: 完善 "密码登录" 模式 UI。
- **变更**:
    - 在 Tab 切换逻辑中，针对 Index 1 显示密码输入框。
    - 添加密码输入框右侧 "眼睛" 图标 (切换 `password` 类型)。
    - 添加 "忘记密码?" 文本链接。

## 2. 招募流程页面开发

### A. 招募落地页 (`src/pages/recruit/landing.vue`) **[已完成]**
- **UI**: 全屏橙色背景 (`#FF9800`)，头部文案居中。
- **内容**:
    - 顶部大标题 "加入宠宝履约者"。
    - 白色悬浮卡片: 展示 3 点核心优势 (收入、灵活、自由)，每点配图标 (青/蓝/橙配色)。
- **交互**: 点击底部 "我要加入" -> 跳转 `src/pages/recruit/form`。
- **导航**: 自定义导航栏，返回按钮逻辑优化 (支持 fallback)。

### B. 资料填写页 (`src/pages/recruit/form.vue`) **[已完成]**
- **UI**: 表单列表风格，采用 "Label + 灰色背景输入框" 布局。
- **字段**:
    - 手机号 (只读/输入)、验证码。
    - 姓名 (Input)、性别 (Radio)、生日 (Custom Date Picker)、密码 (Input)。
    - **服务类型**: 块状多选按钮组 (宠物接送、上门喂遛、上门洗护)。
    - **工作城市**: Custom City Picker (省市区级联选择)。
    - **服务站点**: Custom Station Picker (列表选择)。
- **交互**: 底部勾选协议 + "下一步，实名认证" 按钮跳转至 `auth` 页。
- **图标**: 线框风格密码图标 (同步登录页)。

### C. 实名认证页 (`src/pages/recruit/auth.vue`)
- **UI**: 上下分段表单。
- **字段**:
    - 证件类型 (固定 "居民身份证"), 真实姓名, 证件号码, 有效日期 (Picker)。
- **上传**:
    - 身份证人像面 (上传框示意图)。
    - 身份证国徽面 (上传框示意图)。
- **底部**: "下一步，完善资质" 按钮 -> 跳转 `src/pages/recruit/qualifications`。

### D. 资质完善页 (`src/pages/recruit/qualifications.vue`)
- **UI**:
    - 顶部提示文案 "根据国家政策要求..."。
    - **上传列表**: 根据 `form` 页选择的服务类型 (`serviceType` 数组) 动态渲染卡片。
        - 宠物接送服务资质 / 上门喂遛服务资质 / 上门洗护服务资质。
        - 每张卡片包含: 标题 + 图片上传框 (支持预览/删除)。
        - 示例图: 蝴蝶图片 (Mock)。
- **交互**: 底部 "立即提交" 按钮 -> 跳转 `src/pages/recruit/success`。

### E. 注册成功页 (`src/pages/recruit/success.vue`)
- **UI**:
    - 大图标 (绿色对勾) + "报名成功" 标题。
    - 红色提示文案 "请保持手机畅通..."。
    - **信息卡片**:
        - 服务站点: [Mock Data]
        - 报名人: [Mock Name]
        - 联系手机: [Mock Phone]
- **交互**: "我知道了" 按钮 -> 返回首页或登录页。

## 3. 路由配置 (`src/pages.json`)
- 注册上述 3 个新页面。
- 确保导航栏标题符合设计图 ("我要加入", "实名认证")。

### [Shared Components]
#### [NEW] [privacy-popup.vue](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/components/privacy-popup/privacy-popup.vue)
-   **功能**: 通用协议弹窗
-   **Props**: `visible`, `title`, `content` (or slot)
-   **Events**: `close`

### [Login Page]
#### [MODIFY] [login.vue](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages/login/login.vue)
-   集成 `privacy-popup`，点击“隐私政策”时显示。
-   **UI修复**: 修复 `+86` 箭头对齐和 `协议复选框` 对齐问题。

### [Forgot Password Flow]
#### [NEW] [reset-pwd-verify.vue](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages/login/reset-pwd-verify.vue)
-   **参考图2**: "重置密码" - 验证码步骤。
-   **UI**: 顶部提示文本，验证码输入框 (带"获取验证码"按钮)，橙色 "下一步" 按钮。

#### [NEW] [reset-pwd-set.vue](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages/login/reset-pwd-set.vue)
-   **参考图3**: "设置新密码"。
-   **UI**: 提示文本，两个密码输入框 (新密码 + 确认)，橙色 "确定" 按钮。

### [Performer Core Pages]
#### [CONFIG] [pages.json](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages.json)
-   配置 TabBar: 任务中心 (Home), 我的订单 (Orders), 我的 (Mine)。

#### [NEW] [pages/home/](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages/home/)
-   **index.vue, logic.js, style.css**: 任务大厅。
-   **UI**: 顶部统计卡片 (累计接单等)，任务列表 (区分接送/喂遛等类型)，接单/拒绝按钮。

#### [NEW] [pages/orders/](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages/orders/)
-   **index.vue, logic.js, style.css**: 我的订单。
-   **UI**: 顶部状态 Tab (待接送/服务中/已完成)，订单列表 (带状态操作按钮: 一键拨号/到达打卡)。

#### [NEW] [pages/mine/](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages/mine/)
-   **index.vue, logic.js, style.css**: 个人中心。
-   **UI**: 用户头部详情(等级/城市)，权益卡片(黑金)，数据统计(钱包/订单)，菜单列表。

### [Recruit Form Page]
#### [MODIFY] [form.vue](file:///C:/Users/admin/Desktop/宠物需求/宠物管理系统/performer_app/pages/recruit/form.vue)
-   集成 `privacy-popup`，点击“宠宝履约者说明”时显示。

## Verification Plan