原型图 | React + Tailwind
C端小程序订单列表页，支持取水订单和套餐订单 Tab 切换，按状态筛选，点击订单可查看详情。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 订单类型 Tab | 取水订单 / 套餐订单，切换展示不同类型订单列表 | 所有场景 |
| 筛选标签 | 取水订单：全部/已完成/处理中/已取消；套餐订单：全部/已完成/退款处理中/已退款/退款失败 | 两端均有状态筛选，样式一致 |
| 取水订单卡片 | 订单编号、取水量、水类型标签（纯水/矿化水）、金额（按水类型单价）、支付方式、状态、时间 | 取水订单 Tab |
| 数据来源 | 列表订单由共享订单样本表 c-orders-data.js 派生（按时间倒序）；卡片点击按 ?id=订单号 跳转详情，详情展示与所点订单完全一致 | 两端 |
| 退款标识 | 已完成订单发生过退款（部分出水差额退款／管理员人工售后退款）时，在主状态后附「有退款」次要标识；已取消订单不标识（取消单必然全额退款） | 取水订单 Tab |
| 套餐订单卡片 | 订单编号、套餐名称（金额制）、套餐金额、赠送金额、状态标签（已完成/退款处理中/已退款/退款失败）、时间 | 套餐订单 Tab |
| 状态标签 | 取水订单：已完成（绿色）、处理中（琥珀色）、已取消（灰色）；套餐订单：已完成（绿色）、退款处理中（蓝色）、已退款（灰色）、退款失败（红色），与C04套餐订单详情四态对齐 | 所有场景 |
| 空状态 | 暂无订单提示 + 去取水按钮 | 无订单用户 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击筛选标签 | 用户点击标签 | - | 高亮选中标签，列表即时过滤 | 无匹配结果：展示"暂无订单" | 按状态过滤订单列表 |
| 点击订单卡片 | 用户点击某条订单 | 订单存在 | 跳转订单详情页 | 订单已删除（极端）：提示"订单不存在" | 跳转 C03 取水订单详情 / C04 套餐订单详情 |
| 点击"去取水" | 无订单场景，用户点击按钮 | - | 跳转首页 | - | 跳转 C00 首页 |
| 页面加载 | 进入页面 | 用户已登录 | 展示订单列表或空状态 | 网络异常：提示"加载失败，请下拉刷新" | 拉取订单列表，按时间倒序 |
| 返回 | 无（一级 tab 页不设置返回箭头；在 C02 内切换一级目的地用底部金刚导航：首页 / 我的） | - | - | - | - |
| 场景 | 展示内容 |
|---|---|
| 有订单用户 | 订单类型Tab + 取水订单/套餐订单状态筛选 + 订单卡片列表 |
| 无订单用户 | 订单类型Tab可切换 + 状态筛选栏（只读，默认全部）+ 取水/套餐订单空状态 + 引导按钮 |
C02 订单列表 ├─ 点击取水订单卡片 → C03 取水订单详情（?id=订单号） ├─ 点击套餐订单卡片 → C04 套餐订单详情（?id=订单号） ├─ 套餐订单"去购买" → C05 套餐购买 ├─ 去取水 → C00 首页 └─ 底部导航 → 首页 / 订单 / 我的