C端 - 订单详情

原型图 | React + Tailwind

← 返回总览 C00 首页 C01 支付页 C02 订单列表 C03 取水订单详情 C04 套餐订单详情 C05 套餐购买 C06 选档位 C07 出水 C08 取水结果 C09 取水支付结果 C10 订单已取消 C11 套餐详情 C12 我的 C13 用户服务协议 C14 常见问题
9:41

订单详情

场景切换

页面说明

最后更新:2026-10-23

页面定位 — PRD 5.1 / 7.1

C端小程序取水订单详情页,展示单个取水订单的完整信息(状态、支付、出水详情、设备信息、退款详情)。套餐订单详情已拆分至C04。

核心内容

模块说明场景差异
状态标识顶部仅展示订单主状态(已完成/已取消/处理中),不同状态不同颜色;退款不作为状态呈现,仅在下方退款区块展示所有场景
订单信息取水档位、水类型标签(纯水/矿化水)、订单金额、应付金额(仅形态①完整出水、形态③部分出水展示;形态②已取消、形态④全额退款/未出水、形态⑤处理中不展示)、支付方式(单渠道仅显示渠道名)/支付明细(多渠道逐行展示渠道与结算净额,不设合计行)、订单编号、下单时间、用户ID所有场景
出水详情实际出水量、剩余未出、按退款渠道逐行展示退回金额(退回套餐/退回 LINE Pay/退回 IC卡);不展示暂停次数仅部分出水退款场景
设备信息设备编号、取水地址所有场景
数据来源按 ?id=订单号 从共享订单样本表 c-orders-data.js 取数;形态由订单号映射(形态①~⑤),未命中回退形态①;带 ?form=N 时强制按指定形态展示(C08 未出水跳转携带 form=4)所有场景
退款提示按退款渠道生成的退回说明(如「套餐余额已退回套餐账户,LINE Pay 退款已原路退回」)仅部分出水退款场景

关键交互

操作 触发条件 前置校验 反馈形式 异常处理 行为
点击返回用户点击返回按钮-跳转上一页-返回 C02 订单列表
查看出水详情订单存在实际出水量(部分出水)订单有出水记录展示实际出水量、按渠道展示退回金额(退回套餐/退回 LINE Pay)-展示出水详情区块
查看退款状态订单有退款记录退款已发起展示退款状态(已退款/退款中)退款失败:展示"退款失败"展示退款状态信息
查看设备信息页面加载订单已关联设备展示设备编号、取水地址设备信息缺失:展示"--"展示设备信息区块

页面状态

场景展示内容
已完成订单绿色状态标识 + 订单信息 + 设备信息
已取消订单灰色状态标识 + 订单信息 + 取消原因 + 设备信息;已取消仅适用支付前(未支付超时/主动取消/设备异常),不产生退款
部分出水退款绿色状态标识(已完成)+ 订单信息 + 出水详情(按渠道展示退回金额)+ 退款状态(动态:退款处理中/已退款)+ 退款提示 + 设备信息
全额退款绿色状态标识(已完成)+ 订单信息 + 退款详情(类型/退回套餐/退回 LINE Pay/退款状态)+ 设备信息;退款类型含人工售后发起与系统自动(支付后未出水、用户终止取水),退款状态按实际展示(退款处理中/已退款)
处理中黄色状态标识 + 订单信息 + 设备信息 + 处理提示(结果待确认:终值缺失或出水失败,等待设备上报;超时未收到结果转人工处理,见 C08 场景③);已发起全额退款时展示退款状态与退回渠道金额

跳转关系

C03 订单详情
├─ 入口 → C02 订单列表(?id=订单号)/ C08 取水结果页(?id=订单号&form=4)
├─ 未命中 ?id= → 回退形态① 已完成(默认)
├─ 未出水订单(C08 场景③)→ 形态④ 全额退款(绿色已完成 + 退款详情)
└─ 返回箭头 → C02 订单列表

业务规则

•订单主状态:已完成、已取消为终态,处理中(后台「出水结果确认中」)为中间态;退款不改变主状态,仅作为售后结果在退款区块展示
•待支付订单 5 分钟超时自动取消(运行参数「支付倒计时」),不支持后续支付
•停止出水后,套餐余额退回套餐账户,实付金额按原支付渠道退回(退款区块逐渠道展示)
•设备信息展示取水点位置
查看更新记录
2026-10-26
应付金额改为按形态展示:仅形态①③(正常出水)展示,形态②④⑤不展示;页面说明同步(应付金额为结算完成后金额)。
2026-10-23
未出水订单(DR20260520001)挂形态④ 全额退款:绿色「已完成」主状态 + 退款详情(类型=全额退款、状态=退款处理中);已有退款详情时不再重复渲染独立退款状态区块;退款状态文字按「退款处理中(琥珀)/已退款(绿)/退款失败(红)」着色。形态⑤ 保留为「处理中」(终值缺失待人工确认),不再承载未出水。
2026-10-23
订单信息新增「取消原因」行(仅已取消订单且有值时展示);已取消样本改为支付前取消(支付超时、未支付、不产生退款),页面说明「已取消订单」同步;处理中样本补全额退款明细,页面说明补退款区块。
2026-10-22
订单信息「支付方式」改为按渠道展示:多渠道订单展示「支付明细」(渠道 + 结算净额,不设合计行,合计等同应付金额),单渠道仍显示支付方式(仅渠道名);移除独立「套餐抵扣」行。出水详情移除暂停次数,「退回实付金额」改为按退款渠道逐行(退回套餐/退回 LINE Pay/退回 IC卡);退款详情移除「退款路径」行,退款状态统一「已退款」;场景② 补退回渠道金额;处理中提示改为「自动确认、超时转人工」不带分钟数。页面说明同步修正:查看出水详情触发条件、全额退款不渲染退款提示、退款失败不展示客服入口、支付超时改 5 分钟、删除暂停规则条目。支付渠道术语统一为「套餐余额」(退款仍为「退回套餐」)。
2026-10-16
移除底部金刚导航(子页面不展示一级 tab 切换栏,返回改由状态栏返回箭头跳转 C02 订单列表);跳转关系树去除底部导航行;与 C04/C05 及多数 C 端子页面惯例统一。
2026-10-14
订单信息「实付金额」改「应付金额」(=套餐抵扣+实付金额,读共享表 payable 字段);「退回实付金额」保留(退款去向说明);页面说明核心内容表同步。
2026-10-12
顶部状态标识收口:退款不再以订单状态形式呈现,场景③主状态由「部分出水退款」回归「已完成」、场景④由「已退款」回归「已完成」,退款状态与退款详情统一由下方退款区块承载;场景②(已取消)补退款状态(已取消单必然全额退款);取水订单中间态文案统一为「处理中」(C02+C03);页面说明状态标识/页面状态/业务规则同步。关联跳转改造:详情改为按 ?id=订单号 从共享订单样本表取数、按订单号映射形态(形态①~⑤),未命中回退形态①;五个形态由固定数据改为按订单渲染,新增全额退款形态的退款详情区块;订单信息「实付金额」改读实付字段,套餐支付单恒等式(订单金额=套餐抵扣+实付金额)成立;出水详情「退款金额」改名「退回实付金额」以与总额口径区分,并修正部分出水差额退款与全额退款的金额拆分自洽;场景④ 切换器标签与页面状态表行名统一为「全额退款」;页面状态表补「结果待确认含出水失败」口径,核心内容表补数据来源行。
2026-06-17
跳转关系修复:格式div→pre。双水类型改造:订单详情新增水类型标签+单价+泰铢金额,订单金额/实付金额字段。
2026-05-20
订单信息区新增用户ID字段(6位字母数字,平台生成),所有5个场景均展示。
2026-05-19
新增返回按钮,状态栏左侧返回箭头跳转C02订单列表。
2026-05-20
套餐购买订单拆分至C04独立页面,原场景⑤取水订单已退款重编号为场景④,场景⑥订单处理中重编号为场景⑤。
2026-05-19
新增取水订单已退款场景;退款状态改为动态展示(退款处理中/已退款),退款处理中增加1~7个工作日提示。
2026-05-18
合并"页面元素说明"和"业务规则"为统一卡片;关键交互表格扩展为6列,增加触发条件、前置校验、反馈形式、异常处理;补充页面定位/状态/跳转。