2.2 KiB
2.2 KiB
1. 功能概述
all.uvue 是为配送端设计的全量订单抓取页面。当首页待接订单超过 5 个时，用户可通过此页面查看并抢单。
2. 核心设计说明
根据最新 UI 指标，该页面采用了现代垂直流布局：
- 中心费用展示：订单金额在卡片顶部居中加粗显示，强化利益点。
- 垂直路径流：采用垂直排布的取货（📍）与送达（🏠）地址，中间以箭头连接，更符合手机屏阅读习惯。
- 全宽操作按钮：底部采用 100% 宽度的按钮，提高抢单操作的触达率。
- 实时空态处理：当订单被他人抢先接走时，列表会自动更新。
3. 技术实现要点
3.1 数据安全与并发控制
在执行 acceptOrder（抢单）时，通过数据库约束确保操作的原子性：
// 增加 driver_id 为空的前提条件，防止已被他人接单
const res = await supa.from('ml_delivery_tasks')
.update({
driver_id: driverId,
status: 2,
accepted_at: new Date().toISOString()
})
.eq('id', taskId)
.is('driver_id', 'null') // 关键：确保单子还没被接
.execute();
3.2 数据结构转换 (_transformTask)
为了兼容数据库存储的 JSON 字符串格式与 UI 组件所需的 Object 格式，页面内置了转换逻辑：
- 自动解析
pickup_address和delivery_addressJSON 字符串。 - 格式化
delivery_fee为保留两位小数。 - 映射状态码到对应的 UI 标签。
3.3 路由与交互
- 路由路径：
pages/mall/delivery/all - 导航栏：配置了
navigationBarTitleText: "待接订单"，并开启了原生的回退功能。 - 动态跳转：支持从详情页返回后自动刷新列表（通过
onShow触发）。
4. 样式规范
- 布局：Flexbox (Column)
- 配色：
- 取货点：Pink (
#ff4d94) - 送达点：Blue (
#2196F3) - 主按钮：Green (
#4CAF50)
- 取货点：Pink (
- 间距：标准 30rpx 外边距，卡片内 40rpx 内边距。
5. 开发历史
- 2026-02-03: 页面初版创建。
- 2026-02-03: 完成从水平卡片到垂直流卡片的 UI 重构。
- 2026-02-03: 接入 Supabase 实现秒级抢单逻辑与状态同步。