taro手写时间轴（timeline）（快递物流进程时间线）

时间轴（timeline）（快递物流进程时间线）"/>

taro手写时间轴（timeline）（快递物流进程时间线）

效果图


直接上代码
jsx部分

 {/* 快递详细信息 */}<View className="express-detail-main"><View className="express-detail-main-title"><Text className="express-detail-main-title-name">{this.courier.name}</Text><Text className="express-detail-main-title-num">{this.courier.num}</Text><Image className="express-detail-main-title-img" src={images.copy}/></View><View className="express-detail-main-content">{this.express.map(item=>{let detail item.tel == '' ? detail = (<Text className="express-detail-main-content-item-top-message-detail">{item.detail}</Text>) : detail = (<Text className="express-detail-main-content-item-top-message-detail">{item.detail.split(item.tel)[0]}<Text className="express-detail-main-content-item-top-message-detail-active"onClick={this.handleTel.bind(this,item.tel)}>{item.tel}</Text>{item.detail.split(item.tel)[1]}</Text>)return(<View className="express-detail-main-content-item"key={item.classId}><View className="express-detail-main-content-item-top"><View className="express-detail-main-content-item-top-imgbox"><Image className="express-detail-main-content-item-top-imgbox-img" src={item.icon}/></View><View className="express-detail-main-content-item-top-message"><Text className="express-detail-main-content-item-top-message-title">{item.title}</Text>{detail}<Text className="express-detail-main-content-item-top-message-time">{item.time}</Text></View></View>{item.step.map(step=>{return(<View className="express-detail-main-content-item-step" key={step.stepID}><View className="express-detail-main-content-item-step-imgbox"><View className="express-detail-main-content-item-step-imgbox-img"></View></View><View className="express-detail-main-content-item-step-message"><Text className="express-detail-main-content-item-step-message-title">{step.steptitle}</Text><Text className="express-detail-main-content-item-step-message-time">{step.steptime}</Text></View></View>)})}</View>)})}</View></View>

css部分

.express-detail-main-content-item:first-child{.express-detail-main-content-item-top-imgbox{height:0}
}
.express-detail-main{background:#ffffff;box-shadow:0 4px 12px 0 rgba(204,204,204,0.30);border-radius:16px;width:702px;margin:16px 24px ;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;overflow:hidden;&-title{padding:0 24px;background:rgba(240,240,240,0.60);border-radius:8px 8px 0 0;width:654px;height:88px;    display: flex;flex-direction: row;justify-content: flex-start;align-items: center;&-name{font-family:PingFangSC-Regular;font-size:28px;color:#333333;letter-spacing:0;text-align:center;margin-right:24px;}&-num{font-family:PingFangSC-Regular;font-size:28px;color:#333333;letter-spacing:0;text-align:center;margin-right:16px;}&-img{width:24px;height:24px;}}&-content{padding:68.5px 24px 0 24px;width:654px;background:#ffffff;display: flex;flex-direction: column-reverse;justify-content: flex-start;align-items: flex-start;&-item{width:654px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;&-top{display: flex;width:100%;flex-direction: row;justify-content: space-between;&-imgbox{width:5px;background:#dddddd;position: relative;margin:0 22.5px;&-img{width:50px;height:50px;position: absolute;top:-22.5px;left:-22.5px;z-index:10;}}&-message{margin-top:-22.5px;width:562px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;&-title{font-family:PingFangSC-Medium;font-size:32px;color:#333333;letter-spacing:0;text-align:left;}&-detail{font-family:PingFangSC-Regular;font-size:28px;color:#333333;letter-spacing:0;text-align:left;}&-detail-active{font-family:PingFangSC-Regular;font-size:28px;color:red;letter-spacing:0;text-align:left;text-decoration:underline;padding:0 10px;}&-time{font-family:PingFangSC-Regular;font-size:24px;color:#999999;letter-spacing:0;text-align:left;margin-bottom:60px;}}}&-step{width:100%;display: flex;flex-direction: row;justify-content: space-between;&-imgbox{width:5px;background:#dddddd;position: relative;margin:0 22.5px;&-img{background:#cccccc;width:16px;height:16px;border-radius:100%;position: absolute;top:-5.5px;left:-5.5px;}}&-message{margin-top:-5.5px;width:562px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;&-title{font-family:PingFangSC-Regular;font-size:28px;color:#999999;letter-spacing:0;text-align:left;}&-time{font-family:PingFangSC-Regular;font-size:24px;color:#999999;letter-spacing:0;text-align:left;margin-bottom:60px;}}}}}
}

express模拟数据

  express=[{classId:1,tel:'',title:'已下单',detail:'订单提交成功',time:'2020－07-11  16:20:00',icon:images.order,iconActive:images.orderActive,step:[]},{classId:2,tel:'',title:'已支付',detail:'订单支付成功，等待海关清关',time:'2020－07-11  16:22:00',icon:images.pay,iconActive:images.payActive,step:[]},{classId:3,tel:'',title:'仓库作业中',detail:'订单打包完成',time:'2020－07-11  16:20:00',icon:images.pack,iconActive:images.packActive,step:[{stepID:301,steptitle:'订单分拣完成',steptime:'2020－07-11  19:55:00',},{stepID:302,steptitle:'订单打单完成',steptime:'2020－07-11  19:55:00',},{stepID:303,steptitle:'订单清关完成，等待仓库发货',steptime:'2020－07-11  19:55:00',}]},{classId:4,tel:'',title:'已出库',detail:'包裹已出库来自：合肥保税仓',time:'2020－07-11  16:20:00',icon:images.entrepot,iconActive:images.entrepotActive,step:[]},{classId:5,tel:'',title:'运输中',detail:'【合肥市】到达  合肥政务区服务网点',time:'2020－07-11  16:20:00',icon:images.transport,iconActive:images.transportActive,step:[{stepID:501,steptitle:'【合肥市】合肥仓已发出',steptime:'2020－07-11  19:55:00',}]},{classId:6,tel:'18817580976',title:'派送中',detail:'【合肥市】政务区代派派件员陈世峰电话:18817580976当前正在为您派件',time:'2020－07-11  16:20:00',icon:images.delivery,iconActive:images.deliveryActive,step:[]},{classId:7,tel:'',title:'已签收',detail:'【合肥市】已签收，快递已被合肥政务区置地广场C座代签收，感谢使用中通快递，期待再次为您服务！',time:'2020－07-11  16:20:00',icon:images.get,iconActive:images.getActive,step:[]},{classId:8,tel:'',title:'交易完成',detail:'订单交易成功',time:'2020－07-14  13:16:04',icon:images.ok,iconActive:images.okActive,step:[{stepID:801,steptitle:'系统自动确认收货',steptime:'2020－07-11  19:55:00',}]}]

手机号点击事件

handleTel=(tel)=>{Taro.showModal({title: '提示',content: '您是否要拨打快递员联系方式'+tel,success: function (res) {if (res.confirm) {console.log('用户点击确定')Taro.makePhoneCall({phoneNumber: tel //仅为示例，并非真实的电话号码})} else if (res.cancel) {console.log('用户点击取消')}}})}