博客十一：商城订单系统全流程实现详解（小程序 + 后端）

在一个成熟的电商平台中，订单模块是交易流程的核心，它承接着用户的购买意图、促成支付行为，并成为后续物流履约和评价反馈的基础。在本篇文章中，我们将围绕商城小程序中订单模块的完整生命周期展开讲解，涵盖用户下单、订单提交、支付、状态流转、详情展示等核心功能，结合前后端真实代码，实现逻辑清晰可复现。

---

一、订单模块功能概览

订单流程从用户点击“立即购买”或“购物车结算”按钮开始，最终以“订单完成”或“关闭”为终点。整个生命周期主要包括：

• 订单确认（地址 + 商品 + 金额展示）

• 提交订单（生成多个子单）

• 支付（模拟/真实微信支付）

• 状态变更（取消 / 确认收货 / 删除）

• 订单列表 + 详情展示

我们在实现上划分前端、小程序逻辑（如状态判断、按钮展示），以及后端多模块协同（订单、商品、SKU、缓存等），再辅以支付与推荐模块对接，形成完整闭环。

---

二、小程序端：页面组件设计

1. 订单列表（orderList.vue）

订单列表支持状态筛选，切换页签即可加载待支付、待发货、待收货、已完成、已取消订单列表。分页加载通过触底事件触发 loadOrderData 函数，发起 /p/myOrder/myOrder 请求。

按钮控制逻辑如下：

• 状态为 1（待支付）时：展示“取消订单”、“付款”按钮

• 状态为 3（待收货）：展示“确认收货”、“查看物流”

• 状态为 5/6（已完成/已取消）：展示“删除订单”</