nxdc-milktea 取餐页状态机揭秘：已下单→制作中→配送中→已完成的步骤条逻辑

nxdc-milktea 取餐页状态机揭秘：已下单→制作中→配送中→已完成的步骤条逻辑

【免费下载链接】nxdc-milktea一套仿奈雪の茶小程序的前端模板项目地址: https://gitcode.com/gh_mirrors/nx/nxdc-milktea

点完奶茶后，取餐页那条"已下单→制作中→配送中→已完成"的步骤条是怎么动起来的？这套仿奈雪の茶的小程序前端模板 nxdc-milktea 用一套极简的取餐页状态机，仅靠一个order.status字段就驱动了整条步骤条的高亮、图标切换和文案变化。本文带你从支付跳转开始，逐行拆解取餐页步骤条的完整状态流转逻辑，新手也能看懂。

取餐页状态机的三个关键入口：从支付到取餐的跳转链路

想看懂步骤条，先要知道order数据从哪来。取餐页 take-foods.vue 本身不发起任何请求，它只是通过mapState(['order'])从 Vuex 全局状态里取当前订单：

• 支付页 pay.vue 的pay()方法里，会根据下单方式选择测试订单（自取用orders[0]、外卖用orders[1]），再执行Object.assign(order, {status: 1})把订单初始状态置为1（已下单），通过SET_ORDER提交到 store/index.js 的order状态；
• 随后uni.reLaunch跳转到取餐页，页面读取到的就是这份带着status: 1的新订单；
• 取餐页里如果订单为空，会展示"您还没有点单"的空状态并引导去点餐，这也是状态机的"第 0 态"。

也就是说，取餐页状态机的输入只有两个变量：order.status（当前所处状态）和order.typeCate（享用方式），所有 UI 都由它们推导而来。

状态机核心：order.status 如何驱动步骤条切换

取餐页步骤条位于 take-foods.vue，由两行结构拼成：上面一行是状态图标列（steps__img-column），下面一行是文字列（steps__text-column）。状态机的判定规则非常直观，全部基于order.status与状态阈值的比较：

每一步都遵循同一套模板：文字节点用:class="{active: order.status >= N}"决定是否高亮，图标节点用v-if="order.status >= N"决定显示"选中态"还是"未选中态"的图片。比如"制作中"这一格，状态达标时亮出production_selected.png，未达标则显示灰色production.png。因为阈值是单调递增的，状态一旦推进就不会回退，天然符合订单只前进不后退的业务语义。

步骤条高亮与图标切换的完整逻辑

状态机不仅控制"亮不亮"，还负责步骤之间的连接线。文字列里每个节点左右各有一条细线（steps__column-item-line），当节点进入active状态时，SCSS 样式会让文字加粗、变深，左右连接线同步变为深色，形成一条从"已下单"连到当前状态的完整进度线。首尾两端的连接线则用bg-transparent隐藏，保证视觉上从第一个图标平滑开始、到最后一个图标自然结束。

两条状态线：自取与外卖的 typeCate 分支逻辑

步骤条最精彩的设计，是同一份模板同时服务两种取餐场景，靠的就是typeCate这个"享用方式"开关：

• 自取（typeCate == 1）：走 3 步流程——已下单 → 制作中 →请取餐，同时页面顶部会放大展示取单号sort_num，方便用户到店取餐；
• 外卖（typeCate == 2）：走 4 步流程——已下单 → 制作中 →配送中→已送达，配送中与已送达这两个节点由v-if="order.typeCate == 2"控制是否渲染，最后一个节点的文案也从"请取餐"动态切换为"已送达"。

代码里通过:class="{'w-80': order.typeCate == 1, 'w-100': order.typeCate == 2}"微调步骤条宽度，让 3 步和 4 步两种布局都能均匀铺开。另外，当status <= 1时，页面还会显示"您前面还有 N 单待制作"的排队提示，让用户对等待时长有心理预期。

步骤条背后的订单状态字段与时间线

步骤条只是冰山一角，订单对象里还藏着一整条状态时间线，在 orders.js 的模拟数据里清晰可见：

• created_at：下单时间
• payed_at：支付完成时间
• productioned_time：完成制作时间（对应步骤条走到"请取餐"）
• sended_time：配送发出时间（对应外卖的"配送中"）
• completed_time：订单完成时间

每个时间字段对应状态机中的一个里程碑，前端拿到实时订单后只需按字段更新status，步骤条就会自动推进。模拟数据中订单的终态status为 5，status_text为"已完成"，可以看作是状态机的"第 5 态"——步骤条走到第 4 步后，订单在业务层就算彻底完结。

延伸：历史订单列表如何复用状态机

取餐页之外，订单状态机还被复用在历史订单页 orders.vue：列表每项直接展示status_text（如"已完成"），点击后进入 detail.vue 查看完整订单信息。这两处都不需要重新写状态判断，因为状态文案已由数据层统一给出，前端只管消费——这也是把"状态"集中管理带来的最大好处。

总结：三步复刻奶茶小程序取餐步骤条

回顾整个取餐页状态机的设计，核心就三件事：支付成功后写入status: 1的订单 → 取餐页用status >= N驱动图标、文字、连接线联动高亮 → 用typeCate分流自取与外卖两条状态线。没有复杂的状态管理库，没有冗余的判断分支，一个数字加一个类型标识就撑起了完整的取餐进度体验。如果你想给自己的小程序加一条丝滑的订单步骤条，直接照抄这套"状态驱动 UI"的思路即可，简单又优雅。

【免费下载链接】nxdc-milktea一套仿奈雪の茶小程序的前端模板项目地址: https://gitcode.com/gh_mirrors/nx/nxdc-milktea