52 lines
2.2 KiB
Markdown
52 lines
2.2 KiB
Markdown
|
||
## 1. 功能概述
|
||
`all.uvue` 是为配送端设计的全量订单抓取页面。当首页待接订单超过 5 个时，用户可通过此页面查看并抢单。
|
||
|
||
## 2. 核心设计说明
|
||
根据最新 UI 指标，该页面采用了**现代垂直流布局**：
|
||
- **中心费用展示**：订单金额在卡片顶部居中加粗显示，强化利益点。
|
||
- **垂直路径流**：采用垂直排布的取货（📍）与送达（🏠）地址，中间以箭头连接，更符合手机屏阅读习惯。
|
||
- **全宽操作按钮**：底部采用 100% 宽度的按钮，提高抢单操作的触达率。
|
||
- **实时空态处理**：当订单被他人抢先接走时，列表会自动更新。
|
||
|
||
## 3. 技术实现要点
|
||
|
||
### 3.1 数据安全与并发控制
|
||
在执行 `acceptOrder`（抢单）时，通过数据库约束确保操作的原子性：
|
||
```uts
|
||
// 增加 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_address` JSON 字符串。
|
||
- 格式化 `delivery_fee` 为保留两位小数。
|
||
- 映射状态码到对应的 UI 标签。
|
||
|
||
### 3.3 路由与交互
|
||
- **路由路径**：`pages/mall/delivery/all`
|
||
- **导航栏**：配置了 `navigationBarTitleText: "待接订单"`，并开启了原生的回退功能。
|
||
- **动态跳转**：支持从详情页返回后自动刷新列表（通过 `onShow` 触发）。
|
||
|
||
## 4. 样式规范
|
||
- 布局：Flexbox (Column)
|
||
- 配色：
|
||
- 取货点：Pink (`#ff4d94`)
|
||
- 送达点：Blue (`#2196F3`)
|
||
- 主按钮：Green (`#4CAF50`)
|
||
- 间距：标准 30rpx 外边距，卡片内 40rpx 内边距。
|
||
|
||
## 5. 开发历史
|
||
- **2026-02-03**: 页面初版创建。
|
||
- **2026-02-03**: 完成从水平卡片到垂直流卡片的 UI 重构。
|
||
- **2026-02-03**: 接入 Supabase 实现秒级抢单逻辑与状态同步。
|