# 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']
```