Rainbow Town
Play Centre

用户需要比较多场地、多时段与不同价格

我负责从资源选择到确认页的产品设计、UX/UI、状态定义与原型实现，并在桌面和 390px 宽度下检查完成路径。

“有空”不等于“可以放心下单”

• 已占用、售罄、少量余位、促销价与相邻时段需要同时可读。
• 附加项、优惠码和总价必须在返回编辑后仍然一致。
• 移动端不能照搬宽表格，需要保留横向浏览与固定资源名称。

先做资源与价格判断，再处理附加项和联系人

将流程拆成场地选择、附加项、复核确认三步；相邻 30 分钟合并为一个预订项；表单错误就地提示，并保留返回修改入口。

沿用统一按钮、输入、状态、价格与反馈契约

资源格、日期切换、筛选 Chip、Stepper、优惠码输入、错误文本、订单摘要和成功页使用可复用状态规则；业务差异由价格与库存数据驱动。

完整 React Demo 与可见边界状态

• 可执行搜索空状态与一键恢复。
• 可取消选择、添加附加项、输入无效/有效优惠码并返回编辑。
• 联系人校验通过后生成本地确认编号，并支持再次预约。

验证了端到端一致性，不虚构线上转化

当前成果是可独立运行的预约闭环和本轮回归证据。确认页明确说明未发生真实扣款；案例不使用模拟订单量、收入或转化率作为结果。