效果圖

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: '您的訂單已達(dá)到廣東省深圳市福田區(qū)新洲廣東省深圳市福田區(qū)新洲廣東省深圳市福田區(qū)',
        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'
      }
    ]
  }
})