## 目的

当“附近订单”过多时，在主页面展示前 N 条（当前为 20 条），需要提供“更多”入口，跳转到单独页面展示所有可接取的订单并支持翻页/上拉加载。

## 路由与文件

- 主入口：在 `pages/mall/delivery/index.uvue` 的“附近订单”区块新增“更多”按钮，导航到新页面。
- 新页面文件：`pages/mall/delivery/all.uvue`（建议路径）
- 文档说明文件：`pages/mall/delivery/doc/more-orders.md`（本文件）

## 用户流程

1. 用户在 `index.uvue` 看到“附近订单”列表（最多 20 条）。
2. 当可接取订单数量 >= 20 时，显示“更多”按钮。
3. 点击“更多”跳转到 `all.uvue`，展示可接取订单的完整列表（分页或无限滚动）。
4. 用户可在新页面接受订单或刷新列表。

## 后端 / 查询设计（示例：Supabase 客户端）

- 建议分页参数：`pageSize = 50`（可配置）。
- 前端通过 offset/pagination 请求：

示例（首次加载 page=0, size=50）：

```ts
const page = 0
const size = 50
const res = await supa.from('ml_delivery_tasks')
  .select('*')
  .is('driver_id', 'null')
  .eq('status', 1)
  .order('created_at', { ascending: false })
  .range(page*size, page*size + size - 1)
  .execute()
```

- 翻页时将 `page` 增加；上拉加载时继续请求下一段 `range`。
- 后端/数据库建议对 `ml_delivery_tasks` 建立索引（status, driver_id, created_at）以加速查询。

## 前端实现建议

- `index.uvue`：在 `availableOrders` 列表下方加入：

  - 条件显示：`availableOrders.length >= 20` 时显示“更多”按钮。
  - 点击处理函数：`uni.navigateTo({ url: '/pages/mall/delivery/all' })`。

- `all.uvue` 页面职责：
  - 使用与 `index.uvue` 相同的 `supa` 客户端和 `_transformTask` 方法复用数据格式化逻辑。
  - 支持分页（page + pageSize）或无限滚动（onReachBottom 加载下一页）。
  - 显示空状态、加载中状态和错误提示。

示例数据加载片段（伪代码）：

```ts
data() { return { page: 0, pageSize: 50, items: [], loading: false, finished: false } }
async loadPage() {
  if (this.loading || this.finished) return
  this.loading = true
  const res = await supa.from('ml_delivery_tasks')
    .select('*')
    .is('driver_id', 'null')
    .eq('status', 1)
    .order('created_at', { ascending: false })
    .range(this.page * this.pageSize, (this.page+1)*this.pageSize - 1)
    .execute()
  const rows = Array.isArray(res.data) ? res.data : []
  if (rows.length < this.pageSize) this.finished = true
  this.items.push(...rows.map(r => this._transformTask(r)))
  this.page += 1
  this.loading = false
}
```

## 并发与安全

- 接单时应在服务器端／数据库层做原子性判断，避免竞态：

  - 示例（伪 SQL）：
    UPDATE ml_delivery_tasks
    SET driver_id = :driverId, status = 2
    WHERE id = :taskId AND driver_id IS NULL AND status = 1
    RETURNING id

- 前端在发起“接受订单”请求后，基于返回结果确认是否成功；若失败需提示用户订单已被接取。

## 接受标准/验收条件

- 在 `index.uvue` 点击“更多”能跳转到 `all.uvue`。
- `all.uvue` 能正确加载 >20 条可接订单并支持继续加载直到无更多数据。
- 接单操作的竞态由后端或事务性查询处理，前端能正确反馈成功/失败。

## 测试数据与验证

- 使用现有文档 `doc_mall/database/realistic_mock_data.sql` 创建若干测试订单；也可循环插入多条 `ml_delivery_tasks`（status=1, driver_id=NULL）用于分页测试。

示例快速生成（Postgres 伪 SQL）：

```sql
INSERT INTO public.ml_delivery_tasks (order_id, pickup_address, delivery_address, delivery_fee, status, created_at, updated_at)
SELECT uuid_generate_v4(), '{"detail":"店铺"}'::jsonb, '{"detail":"用户地址"}'::jsonb, 5.0, 1, NOW() - (i || ' minutes')::interval, NOW()
FROM generate_series(1,200) as s(i);
```

## 开发任务清单（简要）

1. 在 `pages/mall/delivery/index.uvue` 增加“更多”按钮並导航。
2. 新建 `pages/mall/delivery/all.uvue`，实现分页/上拉加载并复用 `_transformTask`。
3. 后端或 DB 层确保接单操作的原子性。
4. 编写 E2E 或手动测试脚本验证加载与接单行为。

## 是否需要我实现？

如果你需要，我可以：
- 直接在 `index.uvue` 添加“更多”按钮示例（小改动）。
- 新增 `pages/mall/delivery/all.uvue` 的样板实现并提交 PR 样例。

---
文档已创建：`pages/mall/delivery/doc/more-orders.md`