原型图 | React + Tailwind
C端小程序订单列表页，支持取水订单和套餐订单 Tab 切换，按状态筛选，点击订单可查看详情。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 订单类型 Tab | 取水订单 / 套餐订单，切换展示不同类型订单列表 | 所有场景 |
| 筛选标签 | 取水订单：全部/已完成/订单处理中/已取消；套餐订单：无筛选，按时间倒序展示 | 取水订单有筛选，套餐订单无筛选 |
| 取水订单卡片 | 订单编号、取水量、水类型标签（纯水/矿化水）、金额（按水类型单价）、支付方式、状态、时间 | 取水订单 Tab |
| 套餐订单卡片 | 订单编号、套餐名称（金额制）、套餐金额、赠送金额、状态标签（已完成/已退款）、时间 | 套餐订单 Tab |
| 状态标签 | 已完成（绿色）、已取消（灰色）、已退款（灰色） | 所有场景 |
| 空状态 | 暂无订单提示 + 去取水按钮 | 无订单用户 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击筛选标签 | 用户点击标签 | - | 高亮选中标签，列表即时过滤 | 无匹配结果：展示"暂无订单" | 按状态过滤订单列表 |
| 点击订单卡片 | 用户点击某条订单 | 订单存在 | 跳转订单详情页 | 订单已删除（极端）：提示"订单不存在" | 跳转 C03 取水订单详情 / C04 套餐订单详情 |
| 点击"去取水" | 无订单场景，用户点击按钮 | - | 跳转首页 | - | 跳转 C00 首页 |
| 页面加载 | 进入页面 | 用户已登录 | 展示订单列表或空状态 | 网络异常：提示"加载失败，请下拉刷新" | 拉取订单列表，按时间倒序 |
| 返回 | 用户点击状态栏返回箭头 | - | 跳转C00首页 | - | 跳转 C00 首页 |
| 场景 | 展示内容 |
|---|---|
| 有订单用户 | 订单类型Tab + 取水订单有筛选标签/套餐订单无筛选 + 订单卡片列表 |
| 无订单用户 | 订单类型Tab可切换 + 取水订单空状态/套餐订单空状态 + 引导按钮 |
C02 订单列表 ├─ 点击取水订单卡片 → C03 取水订单详情 ├─ 点击套餐订单卡片 → C04 套餐订单详情 ├─ 套餐订单"去购买" → C05 套餐购买 ├─ 去取水 → C00 首页 ├─ 返回箭头 → C00 首页 └─ 底部导航 → 首页 / 订单 / 我的