## 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 实现秒级抢单逻辑与状态同步。