logistics.wxml
<view class="logistics-container">
<view class="order-info-box">
<view class="order-info-box-item">订单编号：{{orderInfo.orderNo}}view>
<view class="order-info-box-item">下单时间：{{orderInfo.orderCreateTime}}view>
<view class="order-info-box-item">送达时间：{{orderInfo.sendTime}}view>
view>
<view class="logistics-info">
<view class="logistics-info-title">物流信息view>
<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>
<image class="map-icon" src="../../img/map_icon.png" wx:if="{{index == 0}}">image>
<view class="center-circle" wx:else="{{index > 0}}">view>
view>
<view class="logistics-item-right {{index == 0 ? '' : 'color-gray'}} {{index + 1 == logisticsData.length ? '' : 'border-bottom'}}">
<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>
view>
view>
logistics.wxss
/* pages/logistics/logistics.wxss */
.logistics-container {
width: 100%;
height: 100vh;
padding-top: 32rpx;
box-sizing: border-box;
font-size: 28rpx;
color: #344047;
background-color: #f2f2f2;
}
.order-info-box {
width: 100%;
padding: 32rpx;
box-sizing: border-box;
background-color: #fff;
}
.order-info-box-item {
margin-bottom: 20rpx;
}
.order-info-box-item:last-child {
margin-bottom: 0;
}
.logistics-info {
width: 100%;
margin-top: 32rpx;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
}
.logistics-info-title {
padding: 32rpx 0;
box-sizing: border-box;
border-bottom: 1px solid #f2f2f2;
}
.logistics-box {
}
.logistics-item {
width: 100%;
display: flex;
}
.logistics-item-left {
position: relative;
width: 60rpx;
}
.line-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding-left: 29rpx;
}
.bg-gray {
background-color: #ccc;
}
.top-line {
width: 1px;
height: 50rpx;
}
.bottom-line {
flex: 1;
width: 1px;
}
.map-icon {
position: absolute;
top: 30rpx;
left: 9rpx;
width: 40rpx;
height: 40rpx;
}
.center-circle {
position: absolute;
top: 44rpx;
left: 20rpx;
width: 18rpx;
height: 18rpx;
border-radius: 50%;
background-color: #ccc;
}
.logistics-item-right {
flex: 1;
padding: 32rpx 0;
box-sizing: border-box;
}
.border-bottom {
border-bottom: 1px solid #f2f2f2;
}
.color-gray {
color: #ccc;
}
.logistics-item-text {
margin-bottom: 10rpx;
}
.logistics-item-time {
}
.logistics-no-info {
padding: 40rpx 0;
box-sizing: border-box;
text-align: center;
color: #ccc;
}
logistics.js
// pages/logistics/logistics.js
Page({
/**
* 页面的初始数据
*/
data: {
orderInfo: {
orderNo: '748965456479864',
orderCreateTime: '2018-04-14 17:09:34',
sendTime: '商品预计在4月16日（周一）前送达'
},
logisticsData: [
{
content: '您的订单正在派送中',
time: '2018-04-16 17:09:34'
},
{
content: '您的订单已达到广东省深圳市福田区新洲广东省深圳市福田区新洲广东省深圳市福田区新洲广东省深圳市福田区新洲',
time: '2018-04-16 17:09:34'
},
{
content: '您的订单正在路上飞奔',
time: '2018-04-16 17:09:34'
},
{
content: '您的订单已出库',
time: '2018-04-16 17:09:34'
},
{
content: '您的订单正在出库中',
time: '2018-04-16 17:09:34'
},
{
content: '您的订单已提交',
time: '2018-04-16 17:09:34'
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
