状态驱动的前端页面设计：让按钮、标签和流程保持一致

1
const historyStates = new Set([
2
  'COMPLETED', 'CANCELED', 'REJECTED', 'DELIVERY_FAILED'
3
])

1
const ORDER_STATUS_META = {
2
  UNPAID: { label: '待支付', tone: 'danger' },
3
  PENDING_AUDIT: { label: '待审核', tone: 'warning' },
4
  WAIT_DISPATCH: { label: '待调度', tone: 'success' },
5
  DELIVERING: { label: '配送中', tone: 'primary' },
6
  COMPLETED: { label: '已完成', tone: 'info' }
7
}

1
const ACTIONS_BY_STATUS = {
2
  PENDING_AUDIT: ['approve', 'reject'],
3
  WAIT_DISPATCH: ['cancel', 'startFlight'],
4
  DELIVERING: ['markDelivered', 'markFailed']
5
}
6

7
const can = action => (ACTIONS_BY_STATUS[status.value] || []).includes(action)

1
const stage = computed(() => ticket.value?.resultOrderId
2
  ? 'tracking'
3
  : 'registration')