48 lines
2.5 KiB
Markdown
48 lines
2.5 KiB
Markdown
# order-detail.uvue — 订单详情
|
||
|
||
## 概要
|
||
展示单笔订单全部信息并提供状态流转（接单、确认取货、确认送达、拒单等）。页面会联合查询 `ml_orders`、`ml_order_items`、`ml_shops` 与 `ml_delivery_tasks`。
|
||
|
||
## 数据结构（常用字段）
|
||
- `Order`
|
||
- `id: string | number`
|
||
- `order_no: string`
|
||
- `cid?: number` （兼容旧字段）
|
||
- `shipping_address | pickup_address`: object/string
|
||
- `shipping_fee`, `total_amount`, `status`
|
||
|
||
- `OrderItem`
|
||
- `id`, `order_id`, `product_name`, `qty`, `price`
|
||
|
||
- `DeliveryTask`
|
||
- `id`, `order_id`, `driver_id`, `status`, `accepted_at`, `picked_at`, `delivered_at`
|
||
|
||
## 关键方法
|
||
- `onLoad(options)`
|
||
- 解析 `options.id` 与 `options.status`，调用 `loadOrderDetail(id)`。
|
||
|
||
- `loadOrderDetail(id)`
|
||
- **加载保护**：对 `supaReady` 采用 1.5s 超时策略包装，防止会话刷新阻塞页面加载。
|
||
- **智能 ID 回查**：优先从 `ml_orders` (UUID/cid/order_no) 查找。若未找到，则尝试从未分配任务表 `ml_delivery_tasks` 中根据 ID 查找，再反查关联订单。
|
||
- **降级机制（Fallback）**：当 `ml_orders` 行缺失时，自动回退到从 `ml_delivery_tasks` 提取地址、手机号、配送费及距离等基础信息进行展示，并在 UI 上显示回退加载提示。
|
||
- **清理加载状态**：在 `finally` 块中统一切除加载动画 (`uni.hideLoading`)，防止界面挂起。
|
||
|
||
## 交互与样式优化（2026-02-03 更新）
|
||
- **联系人信息解析**：地址栏（取货/送货）现在仅在“联系人姓名”存在时显示分隔点 `·`。若无姓名，则仅显示手机号，避免显示为 `. 手机号`。
|
||
- **联系方式布局优化**：为了防止手机号在不同屏幕宽度下被图标遮挡，联系人区域采用**垂直居中布局**（图标在上，姓名电话在下），显著拉高了边框高度 (`min-height: 180rpx`) 并增加了垂直间距。
|
||
- **文本显示优化**：
|
||
- 商品区域的“**订单号**”增加了加粗显示 (`bold`)，提升核对便利性。
|
||
- 展示给配送员的联系手机号调大了字号并加粗，确保清晰可见。
|
||
- 修复了在 Uni-app x 下由于类型推断导致的手机号无法通过点语法访问的问题（改用索引访问）。
|
||
|
||
## 示例：地址兼容解析逻辑
|
||
```typescript
|
||
// 兼容 JSON 字符串及对象格式的地址字段
|
||
let shipping = {}
|
||
if (typeof raw == 'string') {
|
||
try { shipping = JSON.parse(raw) } catch (e) { shipping = { detail: raw } }
|
||
} else { shipping = raw || {} }
|
||
// 访问方式：(address as UTSJSONObject)['phone']
|
||
```
|
||
|