Vue.filter('statusText')最轻量可控，统一管理状态码到文本映射，避免多处硬编码；用String(value)兼容数字/字符串，兜底返回“状态${strValue}”，支持i18n和参数扩展。
直接用 Vue.filter 实现状态文本映射最轻量、最可控，别绕路去改组件或塞进 computed 里反复判断。
为什么不能用 computed 或页面内 if-else 处理状态文本
审核状态字段（如 status: 0）在列表页、详情页、步骤组件中高频复用；若每个页面都写一遍 if (status === 0) return '待提交'; else if...，不仅重复，还会因状态码含义变更（比如后端把 1 从“初审中”改成“资料补正”）导致多处漏改。更麻烦的是，computed 只作用于当前组件实例，无法跨页面统一维护。
常见错误现象：某次上线后发现“已拒绝”在订单页显示为“审核失败”，但在审批记录页还是“已驳回”——根本原因是两处硬编码没同步。
- 状态码语义应由过滤器单点定义，前端只认
status数值，不关心业务含义 - 所有模板中统一用
{{ status | statusText }}，语义变更只需改过滤器函数 - 避免在
uni-steps的steps数组里手动写死中文，那会和后端状态机脱节
如何定义 statusText 过滤器并支持多语言 fallback
过滤器必须能处理未知状态码，且不报错——因为后端可能新增状态但前端还没发版。推荐用对象映射 + 默认兜底，而非 switch/case：
import Vue from 'vue'
<p>const statusMap = {
'-1': '未开始',
'0': '待提交',
'1': '审核中',
'2': '已通过',
'3': '已拒绝',
'4': '已撤回'
}</p><p>Vue.filter('statusText', function(value) {
// 兜底处理：非字符串/数字、空值、不在 map 中的值，返回 '-' 或对应 locale 文案
if (value == null || value === '') return '-'
const strValue = String(value)
return statusMap[strValue] || <code>状态${strValue}</code>
})
关键点：
- 用
String(value)统一类型，避免0和'0'匹配失败 - 兜底文案用
状态${strValue}而不是抛错，方便测试和灰度期排查 - 若项目接入 i18n，可将
statusMap拆到语言包中，过滤器内调用this.$t(`status.${strValue}`)
在 uni-steps 和列表页中正确绑定状态文本
uni-steps 组件的 steps 属性接收数组，其中 title 字段是静态字符串，不能直接插值。正确做法是先用过滤器处理原始数据，再传给组件：
// 假设接口返回 data = { steps: [{ status: 1, name: '初审' }, { status: 0, name: '复审' }] }
computed: {
formattedSteps() {
return this.data.steps.map(step => ({
...step,
title: step.name + '（' + this.$options.filters.statusText(step.status) + '）'
}))
}
}
列表页则直接使用：
<template>
<view v-for="item in list" :key="item.id">
<text>{{ item.status | statusText }}</text>
<!-- 不要用 {{ item.status === 0 ? '待提交' : item.status === 1 ? '审核中' : '-' }} -->
</view>
</template>
容易踩的坑：
-
uni-steps的active-color控制高亮，但状态文本必须由数据驱动，别在steps数组里写死中文 - 如果后端返回的是字符串状态码（如
"pending"），过滤器需适配，不能假设全是数字 - 不要在过滤器里发起请求或读取
uni.getStorageSync，它必须是纯函数
真正复杂的地方在于状态码和业务语义的耦合深度——当“已通过”要拆成“平台通过”“区域通过”两个子状态时，过滤器得能接收二级字段，比如 {{ item | statusText('auditResult') }}，这时就得升级成带参数的过滤器，而不是简单查表。
