medical-mall/pages/mall/delivery/doc/more-orders.md at cd4861a6dcdac5c5cb4bcfefbfb77b6376baa3d4

huangzhenbao/medical-mall

Fork 0

Files

not-like-juvenile 8efe6d5e89 连接数据库并修改页面

2026-02-02 18:20:22 +08:00

4.5 KiB

Raw Blame History

目的

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

路由与文件

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

用户流程

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

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

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

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

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 加载下一页）。
- 显示空状态、加载中状态和错误提示。

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

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）：

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);

开发任务清单（简要）

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

是否需要我实现？

如果你需要，我可以：

直接在 index.uvue 添加“更多”按钮示例（小改动）。
新增 pages/mall/delivery/all.uvue 的样板实现并提交 PR 样例。

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

4.5 KiB Raw Blame History Unescape Escape

目的