1.效果图
2.完整代码：
码云链接：susu-mini-tem: 微信小程序封装组件，覆盖常用需求：包括轮播组件（堆叠轮播等）、canvas（圆环、海报、裁图，绘画等）、map、echarts各类图表、css3动画，步骤条、日历组件、自定义tabbar+导航栏、loading加载动画、css渐变、雪碧图、瀑布流、关键词高亮、搜索历史、图片懒加载、节流防抖、索引选择（如城市）、微信拆红包、红包雨、菜单弹出动画、3d云、按钮拖拽、营销组件（九宫格等）
3.部分代码
<!-- 物流区 -->
<view class="con1 flex-row">
<view>
<image src="/img/order_icon5.png" class="order_icon"></image>
</view>
<view class="w_text">
<view class="item">订单编号：{
{expresslist.order_no}}</view>
<view class="item">物流公司：{
{expresslist.de_company}}</view>
<view class="item">物流单号：{
{expresslist.wuliu_no}}</view>
</view>
</view>
<view class="con4" wx:if="{
{expresslist.list.length>0}}">
<view class="con4_top1">物流信息</view>
<!-- 物流列表 -->
<view class="con4_top3 flex" wx:for="{
{expresslist.list}}">
<view class="con4_text"wx:key="key" wx:for-item='item'>
<text class="con4_time {
{index==0?'':'no'}}">{
{item.status}} {
{item.time}}</text>
<view class="line_ellipsis text ">{
{item.text}}</view>
<view class="con4_icon" wx:if="{
{index==0}}">
<image wx:if="{
{item.display==0}}" src="/img/wuliu_icon2.png" class="chek_img"></image>
<image wx:if="{
{item.display==1}}" src="/img/wuliu_icon3.png" class="chek_img"></image>
<image wx:if="{
{item.display==2}}" src="/img/wuliu_icon4.png" class="chek_img"></image>
<image wx:if="{
{item.display==3}}" src="/img/wuliu_icon5.png" class="chek_img"></image>
</view>
<!-- 当第二个开始有一条物流的横线 -->
<view class="con4_icon" wx:else>
<image wx:if="{
{item.display==0}}" src="/img/wuliu_icon2.png" class="chek_img"></image>
<image wx:if="{
{item.display==1}}" src="/img/wuliu_icon3.png" class="chek_img"></image>
<image wx:if="{
{item.display==2}}" src="/img/wuliu_icon4.png" class="chek_img"></image>
<image wx:if="{
{item.display==3}}" src="/img/wuliu_icon5.png" class="chek_img"></image>
<view class="line"></view>
</view>
</view>
</view>
</view>
/* wuliu */
.con1{
width: 700rpx;
background: #682074;
box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);
border-radius: 20rpx;
margin: 40rpx 25rpx;
padding: 26rpx 25rpx ;
box-sizing: border-box;
}
.order_icon{
width: 150rpx;
height: 120rpx;
}
.w_text{
margin-left: 30rpx;
color: #fff;
font-size:25rpx;
}
.item{
margin-bottom: 20rpx;
}
.item:last-child{
margin-bottom: 0;
}
.con4{
width: 700rpx;
background: #FFFFFF;
box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);
border-radius: 20rpx;
margin: 40rpx 25rpx;
padding: 26rpx 25rpx 56rpx ;
box-sizing: border-box;
}
.con4_top1{
text-align: center;
font-size: 32rpx;
font-weight: 500;
color: #333333;
margin-bottom: 35rpx;
}
.con4_top2{
font-size: 24rpx;
color: #666;
margin-bottom: 42rpx;
}
.con4_img{
width: 25rpx;
height: 28rpx;
}
.chek_img{
width: 52rpx;
height: 52rpx;
}
.con4_top3{
margin-bottom: 53rpx;
position: relative;
}
.con4_top3:last-child{
margin-bottom:0
}
.con4_icon{
position: absolute;
left: 0rpx;
top: 0rpx;
}
.con4_text{
font-size: 22rpx;
font-weight: 400;
color: #666666;
/* border-left: 2rpx solid #c9c9c9; */
padding-left: 51rpx;
margin-left: 23rpx
}
.con4_time{
font-size: 28rpx;
font-weight: 500;
color: #682074;
}
.con4_icon1{
position: absolute;
left: 0rpx;
top: 0rpx;
}
.line{
width: 2rpx;
height: 95rpx;
background: #999999;
position: absolute;
top: -93rpx;
left: 25rpx;
}
.text{
font-size: 22rpx;
font-weight: 400;
color: #666666;
}
.no{
font-size: 28rpx;
font-weight: 500;
color: #666666;
}
data: {
//物流情况
expresslist:{
order_no:'1q213232132',
de_company:'顺丰',
wuliu_no:'73584y357349',
list:[
{
display:'0',//已签收 判断是否加class条件
status:'已签收',
text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大：发往啦啦啦啦说的话凤凰大啦啦说的话凤凰大厦附近收到回复的就是',
time:'2020-06-20 18:33:42'
},
{
display:'1',
status:'待取件',
text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
time:'2020-06-20 18:33:42'
},
{
display:'2',
status:'派送中',
text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
time:'2020-06-20 18:33:42'
},
{
display:'3',
status:'运输中',
text:'【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
time:'2020-06-20 18:33:42'
},
]
}
},