履约者招募功能实施计划
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
- 功能: 通用协议弹窗
- Props:
visible, title, content (or slot)
- Events:
close
[Login Page]
[MODIFY] login.vue
- 集成
privacy-popup，点击“隐私政策”时显示。
- UI修复: 修复
+86 箭头对齐和 协议复选框 对齐问题。
[Forgot Password Flow]
[NEW] reset-pwd-verify.vue
- 参考图2: "重置密码" - 验证码步骤。
- UI: 顶部提示文本，验证码输入框 (带"获取验证码"按钮)，橙色 "下一步" 按钮。
[NEW] reset-pwd-set.vue
- 参考图3: "设置新密码"。
- UI: 提示文本，两个密码输入框 (新密码 + 确认)，橙色 "确定" 按钮。
[Performer Core Pages]
[CONFIG] pages.json
- 配置 TabBar: 任务中心 (Home), 我的订单 (Orders), 我的 (Mine)。
[NEW] pages/home/
- index.vue, logic.js, style.css: 任务大厅。
- UI: 顶部统计卡片 (累计接单等)，任务列表 (区分接送/喂遛等类型)，接单/拒绝按钮。
[NEW] pages/orders/
- index.vue, logic.js, style.css: 我的订单。
- UI: 顶部状态 Tab (待接送/服务中/已完成)，订单列表 (带状态操作按钮: 一键拨号/到达打卡)。
[NEW] pages/mine/
- index.vue, logic.js, style.css: 个人中心。
- UI: 用户头部详情(等级/城市)，权益卡片(黑金)，数据统计(钱包/订单)，菜单列表。
[Recruit Form Page]
[MODIFY] form.vue
- 集成
privacy-popup，点击“宠宝履约者说明”时显示。
Verification Plan
