119 lines
4.5 KiB
Markdown
119 lines
4.5 KiB
Markdown
## 目的
|
||
|
||
当“附近订单”过多时，在主页面展示前 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`
|