taro手写时间轴（timeline）（快递物流进程时间线）
效果图
直接上代码
jsx部分
{/* 快递详细信息 */}
{this.courier.name}
{this.courier.num}
{
this.express.map(item=>{
let detail
item.tel == '' ? detail = (
{item.detail}
) : detail = (
{item.detail.split(item.tel)[0]}
{item.tel}
{item.detail.split(item.tel)[1]}
)
return(
{item.title}
{detail}
{item.time}
{
item.step.map(step=>{
return(
{step.steptitle}
{step.steptime}
)
})
}
)
})
}
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('用户点击取消')
}
}
})
}