效果图

image.png

wxml

<view class="logistics-box" wx:if="{{logisticsData.length > 0}}">
  <view class="logistics-item" wx:for="{{logisticsData}}" wx:key="index">
    <view class="logistics-item-left">
      <view class="line-box">
        <view class="top-line {{index == 0 ? '' : 'bg-gray'}}"></view>
        <view class="bottom-line {{index + 1 == logisticsData.length ? '' : 'bg-gray'}}"></view>
      </view>
      <view class="center-circle"></view>
    </view>
    <view
      class="logistics-item-right {{index == 0 ? '' : 'color-gray'}}">
      <view class="logistics-item-text">{{item.content}}</view>
      <view class="logistics-item-time">{{item.time}}</view>
    </view>
  </view>
</view>
<view class="logistics-no-info" wx:else>暂无物流信息</view>

wxss

.logistics-box{
  padding: 30rpx 0;
}

.logistics-item {
  width: 97%;
  display: flex;
  color: #1E1E1E;
  font-size: 28rpx;
}

.logistics-item-left {
  position: relative;
  width: 60rpx;
}

.logistics-item-time{
  font-size: 24rpx;
  color: #8F8F8F;
}

.line-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 32rpx;
}

.bg-gray {
  background-color: #ccc;
}

.top-line {
  width: 1px;
  height: 28rpx;
}

.bottom-line {
  flex: 1;
  width: 1px;
}

.map-icon {
  position: absolute;
  top: 30rpx;
  left: 9rpx;
  width: 40rpx;
  height: 40rpx;
}

.center-circle {
  position: absolute;
  top: 10rpx;
  left: 24rpx;
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #D8D8D8;
}

.logistics-item-right {
  flex: 1;
  padding-bottom: 32rpx;
  box-sizing: border-box;
}

.color-gray {
  color: #8F8F8F;
}

.logistics-item-text {
  margin-bottom: 4rpx;
  line-height: 1.5;
}

.logistics-no-info {
  padding: 40rpx 0;
  box-sizing: border-box;
  text-align: center;
  color:  #8F8F8F;
}

js

const app = getApp()
Page({
  data: {
    logisticsData: [
      {
        content: '您的订单正在派送中',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单已达到广东省深圳市福田区新洲广东省深圳市福田区新洲广东省深圳市福田区',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单正在路上飞奔',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单已出库',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单正在出库中',
        time: '2020-01-11 00:00:00'
      },
      {
        content: '您的订单已提交',
        time: '2020-01-11 00:00:00'
      }
    ]
  }
})