应将物流状态码映射抽成纯对象并封装为过滤器,支持类型兼容和 fallback,避免硬编码;vue 2.7 中可用全局/局部过滤器,但需保持纯函数、无副作用,复杂动态文案交由 computed 处理。

物流状态字段怎么映射成中文描述
直接写死 switch 或 if 判断容易漏、难维护,尤其当快递鸟 API 返回的状态码(如 201、302)和文案不一致时。建议把状态码到中文的映射抽成一个纯对象,再封装成过滤器。
-
statusMap对象里 key 是快递鸟返回的State字段值(数字),value 是对应中文状态,比如{ 0: '暂无轨迹', 1: '已揽收', 2: '运输中', 3: '派件中', 4: '已签收' } - 过滤器接收原始
state值,先转为 number 再查表,查不到就 fallback 到'未知状态' - 别在模板里写
{{ item.State | statusText }}就完事——得确保item.State真是数字类型,API 返回可能是字符串,得提前parseInt(item.State)或在过滤器里做兼容
为什么用过滤器而不是 computed 或 methods
物流状态展示是典型「输入→格式化输出」场景,且多页面复用。用过滤器比每次在 computed 里写一遍逻辑更轻量,也比 methods 更语义清晰——它不改变数据,只负责呈现。
- 过滤器天然支持管道链式调用,比如
{{ item.updateTime | formatDate('MM-dd hh:mm') | appendText('更新于') }} - 全局注册一次,所有页面都能直接用,不用重复 import;局部注册则只在当前页面生效,适合临时定制
- 注意:Vue 3 的 Composition API 中过滤器已被移除,uni-app 当前仍基于 Vue 2.7 兼容层,所以
Vue.filter依然有效
如何处理「运输中」这类状态的动态文案
单纯查表不够——比如「运输中」需要补充「距目的地还有 2 天」,这依赖物流节点时间、目的地距离等额外字段。过滤器可以接受第二个参数,但别塞太多逻辑进去。
- 推荐做法:过滤器只做基础状态映射,复杂动态文案交给组件内
computed处理,例如deliveryDesc计算属性 - 如果硬要在过滤器里加,参数传入整个物流节点对象(
node),内部判断node.State === 2且有node.ArrivalTime才计算剩余天数 - 避免在过滤器里发请求或读本地存储——它应是纯函数,无副作用
小程序端渲染慢?检查过滤器是否被高频重计算
物流列表滚动时,每个 <text>{{ item.State | statusText }}</text> 都会触发过滤器执行。如果过滤器里做了深克隆、正则匹配或遍历大数组,就会卡顿。
- 确认过滤器函数体里只有查表 + 类型转换,执行时间应稳定在微秒级
- 不要在过滤器里调用
JSON.parse、new Date()或任何耗时操作 - 如果状态文案需国际化,别在过滤器里
require('./locales/zh.json'),应提前加载好并挂到全局,过滤器只做 key 查找











