react的antd-mobile使用Steps显示物流

antd-mobile的图标，是需要安装依赖的

step如果只有一个步骤是不会展示的，代码里面的标题那块可以看出来

尝试了很多遍测试发现一直不显示，查询后发现是这个组件的本身设置的原因

那么就算你只展示一个那么也要写两个step，第二个去样式里面给隐藏就可以

或者直接改组件的代码，因为他本身逻辑或者样式做了处理，一个步骤条不展示（我懒的去改组件，所以直接写两个隐藏了一个）

import React, { PureComponent } from "react";
import { connect } from "umi";
import { Modal, Steps } from "antd-mobile";
import dayjs from "dayjs";
import classNames from "classnames";
import "./DeliveryInformation.less";
import logisticsImage from "@/common/images/logisticsImage1.png";
import { CheckCircleFill, TruckOutline, CloseOutline } from "antd-mobile-icons";

const { Step } = Steps;

// 定义状态到状态码的映射
const statusToCode = {
  delivered: "finish",
  pending: "wait",
  transit: "wait",
  pickup: "wait",
  expired: "error",
  undelivered: "error",
  notfound: "error",
  exception: "error",
};
const iconStatu = {
  finish: <CheckCircleFill />,
  wait: <TruckOutline />,
  error: <CloseOutline />,
};

const statusToName = {
  delivered: "签收",
  transit: "运输中",
  pickup: "包裹已到达当地地点",
  inforeceived: "取件中",
  undelivered: "已尝试递送包裹，但由于某些原因而失败",
  notfound: "查询不到信息",
  exception: "已退回给发件人",
  expired: "30天未更新",
  pending: "新增包裹正在查询中",
};
@connect((state) => ({
  orderDelivery: state.orderDeliveryNoteList,
}))
export default class extends PureComponent {
  renderSteps = (items, statusArr) => {
    const { queryGetTrackingNumberData } = this.props.orderDelivery;
    const statusMap = statusArr.reduce((acc, status) => {
      acc[status] = [];
      return acc;
    }, {});
    queryGetTrackingNumberData.forEach((item) => {
      const {
        checkpoint_delivery_status: status,
        tracking_detail: trackingDetail,
        checkpoint_date: checkpointDate,
      } = item;
      if (statusMap[status]) {
        statusMap[status].push({ trackingDetail, checkpointDate });
      }
    });
    const arrlist = Object.entries(statusMap).map(([title, array]) => ({
      title,
      array,
    }));
    return arrlist.map((item, inx) => (
      <>
        <Steps direction="vertical" className="trackebox" key={inx + 1}>
          <Step
            title={statusToName[item.title]}
            key={inx + 2}
            status={statusToCode[item.title]}
            icon={iconStatu[statusToCode[item.title]]}
            className="stepTitle"
          />
          <Step className="isnone" key={inx} />
        </Steps>
        {item.array.map((tx, ix) => (
          <Steps direction="vertical" className="trackebox" key={ix + 1}>
            <Step
              title={tx.trackingDetail}
              key={ix + 2}
              icon=""
              description={dayjs(tx.checkpointDate).format(dateFormat)}
            />
            <Step className="isnone" key={inx} />
          </Steps>
        ))}
      </>
    ));
  };

  render() {
    const {
      modalVisible,
      orderDeliveryNote,
      queryGetTrackingNumberData,
    } = this.props.orderDelivery;
    const statusArr = [
      ...new Set(
        queryGetTrackingNumberData.map(
          (val, inx) => val.checkpoint_delivery_status
        )
      ),
    ];
    if (!orderDeliveryNote) {
      return;
    }

    return (
      <>
    <div className="expressList">
                    {this.renderSteps(queryGetTrackingNumberData, statusArr)}
                  </div>
      </>
    );
  }
}

效果图

其中数据也做了处理

原本51平台返回的数据是这样的

根据物流状态分类处理后的数据是这样的