小程序物流信息展示

最近写了小程序里的物流跟踪,逻辑不是很复杂,主要是渲染数据有一定的技巧,这里展示下效果图和wxml,wxss.请求接口部分不做详细介绍,废话不多说直接上码...

这里是wxml部分:

<!-- 外层pages -->
<view class='pages'> 
  <!-- 头部 -->
  <view class='head'>
    <image class='head_img' src='{{list.image}}'></image>
    <view class='tabulate'>
      <label class='head_name'>物流状态：<text style='color:#000;font-size:30rpx;'>{{list.state_cn}}</text> </label>
      <label class='head_title'>物流公司：<text style='color:#000'>{{list.comany}}</text></label>
      <label class='head_tel_name'>快递单号: <text style='color:#000'>{{list.nu}}</text></label>
    </view>
  </view>
    <!-- 追踪 -->
    <view wx:if='{{hasData}}'>
      <view class='logisit' wx:for="{{list.data}}" wx:key="key" wx:for-item='item'>    
        <!-- 左边子容器 -->
        <!-- 显示顶部收的圆点 -->
        <view class='dot-shou  {{item.display==0?"":"dot_two"}}' wx:if="{{index==0}}"></view>   
        <view class='express-middle-axis'  wx:else>             
            <view class='dot-closing'  wx:if='{{item.display==1}}'>></view>
            <view class='dot-closing_two' wx:else></view>
            <view class='online-top-closing'></view>
        </view>
        <!-- 右边子容器 -->
        <view class='express-right'>
          <view class='express-status-address {{item.display==0?"color":"color_second"}}'>{{item.context}}</view>
          <view class='express-statusing {{item.display==0?"color":"color_second"}}'>{{item.ftime}}</view>
        </view>
      </view>
    </view>
    <view class='buttom' wx:else>
      <text>暂时没有物流信息,请稍后再来~</text>
    </view>  
  </view>
<view class='line'></view>

这里是wxss:

page{
  background: #fff;
  /* overflow: hidden; */
}
.head{
  width: 100%;
  height: 225rpx;
  border-bottom: 20rpx solid #eee; 
  display: flex;
}
.tabulate{
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;

}
/* 收货图片 */
.head_img{
  width: 160rpx;
  height: 160rpx;
  margin: auto 20rpx;
  }
/* 快递状态 */
.head_name{ 
  font-size: 26rpx;
  color: #666;
}
/* 快递编号 */
.head_title{
font-size: 26rpx;
color: #666;
}
.head_tel_name{
font-size: 26rpx;
color: #666;
}
 
/* 追踪 */
.logisit{
  width: 100%;
  margin-left: 10rpx;
  margin-top: 50rpx;
  display: flex;
  
}
.express-middle-axis {
  width: 48rpx;
  position: relative;
  top: -218rpx;
  left: -1rpx;
}
.express-status-address{
  font-size: 28rpx;
  color: #666;
}
.express-statusing{
  font-size: 22rpx;
  color: #999
}
.express-left-date {
  display: flex;
  width: 300rpx;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.online-top-closing {
  width: 1rpx;
  height: 180rpx;
  background: #d7d7d7;
  position:absolute;
  top:40rpx;
  left:21rpx;

}
.color{
  color: #000;
  font-weight: bold;
}
.color_second{
  color: #999;
}

.dot-closing {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  margin-top: 50rpx;
  /* margin-bottom:-45rpx; */
  border:1rpx  solid #d7d7d7;
  text-align:center;
  line-height:30rpx;
  font-size:30rpx;
  color:#d7d7d7;
  animation:myfirst;
  animation-fill-mode:forwards;
  position:absolute;
  top:175rpx;
  left:4rpx;

}
.dot-closing_two {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  margin-top: 50rpx;
  /* margin-bottom:-45rpx; */
  border:1rpx  solid #000;
  background: #000;
  animation:myfirst;
  animation-fill-mode:forwards;
  position:absolute;
  top:175rpx;
  left:4rpx;

}
@keyframes myfirst
{
	to {
      font-weight: bold;
      transform: rotate(270deg);
    }
}
.dot-shou {
   width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border:1rpx  solid #000;
  background: #000;
  margin-left: 3rpx;
  margin-top: 6rpx;
}
.dot_two{
   width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border:1rpx  solid #d7d7d7;
  background: #d7d7d7;
  margin-left: 3rpx;
  margin-top: 6rpx;
}
.express-right {
  width:90%;
  height: 170rpx;
  color: #666;  
  margin-left: 20rpx;
  margin-right: 40rpx;
  }
.line{
  height: 180rpx;
}

.buttom{
  width: 100%;
  height: 400rpx;
  line-height: 400rpx;
  text-align: center;
  color: #999;
}

这里是js:

// pages/userhome/address/address.js
const app = getApp();
import { Logistics } from 'logistics-model.js';
var logistics = new Logistics(); //实例化 首页 对象

Page({
  data: {
    // 列表数据
    list: [],//物流详情列表 
    hasData:false  

  },
  onLoad: function (options) {
    var that = this;
    var orderId = options.orderId;//order表主键id
    var type = options.type;//活动类型
    var sid = options.sid;
    app.globalData.sid = sid;
    wx.showLoading({
      title: '查询物流信息中~',
    })
//这里执行根据物流单号查询物流信息,封装调用方法可以参考前面的几篇博文
    logistics.getLogistics(orderId, sid,type,result=>{
      if(result.code == '001'){
        that.setData({
            list: result.data,
            hasData: true
        })
      }else{
        that.setData({
          hasData: false
        })
      }
      wx.hideLoading();
    })
  },

})

这里展示下示例数据:

com:"shunfeng"
comany:"顺丰速运"
condition:"D01"
data:Array(15)
0:{time: "2019-01-15 08:43:21", ftime: "2019-01-15 08:43:21", context: "[潍坊市]代签收(圆通快递 ),感谢使用顺丰,期待再次为您服务", display: 0}
1:{time: "2019-01-15 07:41:10", ftime: "2019-01-15 07:41:10", context: "[潍坊市]快件交给安同振，正在派送途中（联系电话：18369680172）", display: 1}
2:{time: "2019-01-15 07:00:24", ftime: "2019-01-15 07:00:24", context: "快件到达 【潍坊市奎文区万达广场营业点】", display: 1}
3:{time: "2019-01-15 05:57:10", ftime: "2019-01-15 05:57:10", context: "[潍坊市]快件已发车", display: 1}
4:{time: "2019-01-15 01:55:44", ftime: "2019-01-15 01:55:44", context: "快件在【潍坊宝通集散中心】已装车,准备发往 【潍坊市奎文区万达广场营业点】", display: 1}
5:{time: "2019-01-14 19:52:05", ftime: "2019-01-14 19:52:05", context: "[潍坊市]快件到达 【潍坊宝通集散中心】", display: 1}
6:{time: "2019-01-14 14:57:40", ftime: "2019-01-14 14:57:40", context: "[连云港]快件已发车", display: 1}
7:{time: "2019-01-14 09:44:55", ftime: "2019-01-14 09:44:55", context: "快件在【连云港海州集散中心】已装车,准备发往 【潍坊宝通集散中心】", display: 1}
8:{time: "2019-01-14 09:24:07", ftime: "2019-01-14 09:24:07", context: "快件到达 【连云港海州集散中心】", display: 1}
9:{time: "2019-01-14 00:24:21", ftime: "2019-01-14 00:24:21", context: "[常州市]快件已发车", display: 1}
10:{time: "2019-01-13 23:59:14", ftime: "2019-01-13 23:59:14", context: "[常州市]快件在【常州横山桥集散中心】已装车,准备发往 【连云港海州集散中心】", display: 1}
11:{time: "2019-01-13 21:05:56", ftime: "2019-01-13 21:05:56", context: "[常州市]快件到达 【常州横山桥集散中心】", display: 1}
12:{time: "2019-01-13 20:39:47", ftime: "2019-01-13 20:39:47", context: "[常州市]快件已发车", display: 1}
13:{time: "2019-01-13 20:01:08", ftime: "2019-01-13 20:01:08", context: "[常州市]快件在【常州武进天安营业部】已装车,准备发往 【常州横山桥集散中心】", display: 1}
14:{time: "2019-01-13 17:13:21", ftime: "2019-01-13 17:13:21", context: "[常州市]顺丰速运 已收取快件", display: 1}
image:"https://img.nmsmt.cn/sbs/good/20190111/154718948060748.jpg"
ischeck:"1"
message:"ok"
nu:"467995890343"
state:"3"
state_cn:"已签收"
status:"200"

这里的物流信息列展示需要用到每条数据中display去区分选中和灰色字体,这个需要后端程序员去处理,当前到达城市用display=0,其他的已经到过的地方给灰色字体,用display=1,看不懂的小伙伴可以研究一下我给出的示例数据

这里是我的js的model类:

import { Base } from '../../utils/base.js';

class Logistics extends Base {
  constructor() {
    super();
  }

  /*获取订单物流信息*/
  getLogistics(orderId,sid,type, callback) {
    var that = this;
    var param = {
      url: '方法名和参数(你的路由地址)',
      role: 'bargain',
      sCallback: function (data) {
        data = data;
        callback && callback(data);
      }
    };

    this.request(param);
  }

};

export { Logistics };