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与状态阈值的比较状态阈值步骤文案触发场景status 1已下单支付完成刚跳转过来status 2制作中门店接单开始制作status 3配送中仅外卖骑手取货上路status 4请取餐 / 已送达制作完成或送达每一步都遵循同一套模板文字节点用:class{active: order.status N}决定是否高亮图标节点用v-iforder.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-iforder.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为 5status_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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考