深圳狮科网站建设,晚上正能量网站大全,百度网站推广价格,wordpress 页尾修改antd-mobile的图标#xff0c;是需要安装依赖的
step如果只有一个步骤是不会展示的#xff0c;代码里面的标题那块可以看出来
尝试了很多遍测试发现一直不显示#xff0c;查询后发现是这个组件的本身设置的原因
那么就算你只展示一个那么也要写两个step#xff0c;第二个…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 directionvertical classNametrackebox key{inx 1}Steptitle{statusToName[item.title]}key{inx 2}status{statusToCode[item.title]}icon{iconStatu[statusToCode[item.title]]}classNamestepTitle/Step classNameisnone key{inx} //Steps{item.array.map((tx, ix) (Steps directionvertical classNametrackebox key{ix 1}Steptitle{tx.trackingDetail}key{ix 2}icondescription{dayjs(tx.checkpointDate).format(dateFormat)}/Step classNameisnone 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 classNameexpressList{this.renderSteps(queryGetTrackingNumberData, statusArr)}/div/);}
}效果图 其中数据也做了处理
原本51平台返回的数据是这样的 根据物流状态分类处理后的数据是这样的
