多种订单状态不同颜色文字

通过订单状态来展示不同的样式文字

// tob首页(订单列表)
export const orderList = [
  {
    state: '2',
    text: '申办中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '3',
    text: '待审查',
    color: '#333',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '4',
    text: '待审批',
    color: '#333',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '5',
    text: '制证中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '6',
    text: '发证中',
    color: '#58BA9E',
    backgroundColor: '#E8F8F3',
  },
  {
    state: '7',
    text: '已完成',
    color: '#3B65E2',
    backgroundColor: '#E8EEFF',
  },
  {
    state: '8',
    text: '已取消',
    color: '#EC461E',
    backgroundColor: '#FFEFEB',
  },
];

export const orderMap = orderList.reduce((accumulator, currentObj) => {
  accumulator[currentObj.state.toString()] = currentObj;
  return accumulator;
}, {});

export const getOrderItemDescription = (state) => {
  return {
    text: orderMap[state].text,
    color: orderMap[state].color,
    backgroundColor: orderMap[state].backgroundColor,
  };
};

调用

 const { color, backgroundColor, text } = getOrderItemDescription(
        gzOrderDetail.state
      );