IT策士 10余年一线大厂经验，专注 IT 思维、架构、职场进阶。说起来，我会在公众号、今日头条持续发布最新文章，助你少走弯路。

前面几篇我们完成了从下单到支付的完整闭环，支付结果也已能准确处理。但使用者付完钱之后总得有个地方能看到自己所有订单——哪些待付款、哪些待发货、哪些已收货，一目了然。今天我们就来实现 “我的订单”列表页 和 提高版订单详情页让使用者对自己买过的东西心里有数。

订单列表不只是简单的数据展示，还要按状态分 Tab、支持分页、显示关键信息。订单详情则要展示地址、商品明细、金额构成、时间线。全程基于已有模型，几乎没有新字段，主要在视图和模板的组织。

一、需求分析

订单列表页需求：

1. 按订单状态分为多个 Tab：全部、待支付、待发货、待收货、已完成、已取消。 怎么说呢，

2. 每个 Tab 下显示对应状态的订单列表。按创建时间倒序，

3. 每条订单显示的观点是，订单号、下单时间、订单金额、状态标签、商品缩略图。

4. 支持分页，每页 10 条。

5. 点击可进入订单详情页。

使用者痛点：

• "找不到自己的历史订单"- 使用者无法快速查看所有购买记录；
• "不知道哪些需要操作"- 不直观区分待支付/待发货等需要行动的订单；
• "页面太杂乱"- 商品信息展示不清晰导致混淆；
• "加载太慢"- 分页功能缺失导致性能问题；
• "操作不便捷"- 没有直接跳转到支付页面的入口。

这些都是真实使用者在使用电商网站时常遇到的问题！我们通过