--- # 🚚 配送端模块项目结构说明(`/pages/mall/delivery/`) > 本模块为配送员使用的移动端应用核心功能区,涵盖个人中心、任务管理、收入统计、车辆管理等核心功能。 --- ## 📁 目录结构概览 ``` delivery/ ├── index.uvue # 配送端首页(工作台) ├── profile.uvue # 个人中心 ├── profile-edit.uvue # 编辑个人信息 ├── settings.uvue # 设置页面 ├── tasks.uvue # 配送任务列表(按状态筛选) ├── task-detail.uvue # 单个任务详情页 ├── order-history.uvue # 历史订单列表 ├── order-detail.uvue # 订单详情页(从历史或当前跳转) ├── earnings.uvue # 收入明细 ├── ratings.uvue # 评价记录 ├── vehicle.uvue # 车辆管理主页 ├── vehicle-add.uvue # 添加车辆 ├── vehicle-edit.uvue # 编辑车辆信息 └── index.uvue # 首页(与上面重复?应统一命名) ``` > 💡 注:`index.uvue` 出现两次,建议保留一个作为首页入口,另一个可重命名为 `dashboard.uvue` 或 `home.uvue` --- ## 🧭 各页面功能说明 ### 1. `index.uvue` —— **配送端首页 / 工作台** - ✅ 核心入口页面 - 📍 展示当前任务、今日数据、快捷操作入口 - 🔄 可跳转到“个人中心”、“任务列表”、“收入明细”等 --- ### 2. `profile.uvue` —— **个人中心** - 👤 显示配送员基本信息(头像、姓名、评分、总单数) - 📊 展示今日配送数据(完成单数、收入、里程、准时率) - 📈 收入统计图表(最近7天) - 🚗 功能菜单:收入明细、车辆管理、评价记录、帮助中心、意见反馈 --- ### 3. `profile-edit.uvue` —— **编辑个人信息** - 🖋️ 修改头像、姓名、身份证号、驾驶证、车辆信息、服务区域等 - 📱 界面包含表单输入 + 保存按钮 - ⬅️ 左上角返回按钮(箭头+文字垂直排列) - 💾 数据本地模拟或调用API更新 --- ### 4. `settings.uvue` —— **设置页面** - ⚙️ 通用设置项(如通知、隐私、退出登录等) - 🔐 安全相关设置(修改密码、绑定手机等) - 📲 通常由 `profile.uvue` 中的“⚙️”图标进入 --- ### 5. `tasks.uvue` —— **配送任务列表** - 📋 按状态分类展示任务: - 全部任务 - 待接单 - 配送中 - 已完成 - 🚀 点击任一任务 → 跳转至 `task-detail.uvue` - 📈 页面顶部有“工作状态”切换开关(工作中/休息中) --- ### 6. `task-detail.uvue` —— **任务详情页** - 📍 显示取货地址、送达地址、距离、预计时间 - 📞 “联系客户”按钮 - 📝 查看任务详情(可选) - ✅ 适用于“当前任务”或“待接单”的操作场景 --- ### 7. `order-history.uvue` —— **历史订单列表** - 📜 展示已完成、已接受、配送中的历史订单 - 📌 包含订单号、状态、取送货地址、配送费、距离、时间 - 🔍 点击“查看详情” → 跳转至 `order-detail.uvue`,并携带参数 `?from=history` - 📅 支持查看“已完成”的订单(仅显示“联系客服”按钮) --- ### 8. `order-detail.uvue` —— **订单详情页(多来源)** - 🔄 从 `tasks.uvue` 或 `order-history.uvue` 进入 - 🎯 **关键逻辑**: - 若来自历史订单(`from=history`)且状态为“已完成” → 只显示“联系客服” - 若来自历史订单且状态为“进行中” → 显示“接受/拒绝/导航/完成”等操作按钮 - 若非历史来源 → 显示完整操作按钮 - 📞 包含联系顾客、联系商家、联系客服三个联系方式 --- ### 9. `earnings.uvue` —— **收入明细** - 💰 展示总收入、用户打赏、商家打赏、总订单数 - 📊 按订单聚合的收入数据列表 - 📈 图表展示最近7天收入趋势 - ➕ 加载更多按钮 --- ### 10. `ratings.uvue` —— **评价记录** - ⭐ 展示用户对配送员的评价 - 📝 包含评分、评价内容、订单号、时间 - 📊 统计平均分、好评率等 --- ### 11. `vehicle.uvue` —— **车辆管理主页** - 🚗 列出当前绑定的所有车辆 - ➕ “添加车辆”按钮 - 🖋️ 点击车辆 → 跳转至 `vehicle-edit.uvue` - 🗑️ 支持删除、设为主用车等操作 --- ### 12. `vehicle-add.uvue` —— **添加车辆** - 📝 表单填写:车牌号、车型、行驶证照片、车辆类型等 - ✅ 提交后绑定到当前账户 - ⬅️ 返回车辆管理页 --- ### 13. `vehicle-edit.uvue` —— **编辑车辆信息** - 🖋️ 修改已有车辆信息(车牌、车型、照片等) - 📸 支持重新上传行驶证照片 - ✅ 保存后更新车辆信息 --- ## 🔄 页面跳转关系图(简化版) ``` index.uvue │ ├──→ profile.uvue → profile-edit.uvue │ ├──→ tasks.uvue → task-detail.uvue │ ├──→ order-history.uvue → order-detail.uvue (from=history) │ ├──→ earnings.uvue │ ├──→ ratings.uvue │ └──→ vehicle.uvue → vehicle-add.uvue / vehicle-edit.uvue ``` --- ## 🎯 设计原则 - ✅ **一致性**:所有页面使用相同导航栏样式(左上角返回按钮 + 居中标题) - ✅ **响应式**:适配 H5、APP、小程序等平台 - ✅ **状态驱动**:根据订单状态动态显示不同操作按钮 - ✅ **用户体验优先**:历史订单跳转后只显示必要操作,避免冗余按钮 --- ## 📌 建议优化点 | 问题 | 建议 | |------|------| | `index.uvue` 重复 | 重命名为 `dashboard.uvue` 或 `home.uvue` | | 页面间参数传递 | 使用 `uni.navigateTo({ url: '?param=value' })` 并在 `onLoad` 中接收 | | UTS 语法兼容性 | 如遇问题,可临时改用标准 TS 语法调试 | --- ## ✅ 总结 这个 `delivery` 模块是一个完整的配送员工作系统,涵盖了: - **个人管理**(资料、设置) - **任务处理**(接单、配送、完成) - **数据统计**(收入、评价、历史) - **车辆管理** 结构清晰、功能完整,适合用于实际配送平台开发。 ---