medical-mall/pages/mall/delivery/doc/order-detail.md

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 下由于类型推断导致的手机号无法通过点语法访问的问题（改用索引访问）。

示例：地址兼容解析逻辑

// 兼容 JSON 字符串及对象格式的地址字段
let shipping = {}
if (typeof raw == 'string') {
  try { shipping = JSON.parse(raw) } catch (e) { shipping = { detail: raw } }
} else { shipping = raw || {} }
// 访问方式：(address as UTSJSONObject)['phone']