6.4 KiB
6.4 KiB
✅ 明白了!你不需要完整代码,而是希望我用简洁的 Markdown 文档形式,解释这个 delivery 文件夹下的项目结构和每个页面的功能定位。
🚚 配送端模块项目结构说明(/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 模块是一个完整的配送员工作系统,涵盖了:
- 个人管理(资料、设置)
- 任务处理(接单、配送、完成)
- 数据统计(收入、评价、历史)
- 车辆管理
结构清晰、功能完整,适合用于实际配送平台开发。