小程序物流追踪状态页面

版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/81334989

<!-- 外层pages -->
<view class='pages'>

  <!-- 头部 -->
  <view class='head'>
    <image class='head_img' src='../../image/list_img.png'></image>
    <label class='head_name'>已签收</label>
    <label class='head_title'>圆通速递：8889993221341234</label>
    <label class='head_tel_name'>官方客服:95559</label>
    <label class="head_tell">物流客服</label>
  </view>
  <!-- 追踪 -->
  <view class='logisit' wx:for="{{list}}" wx:key="key">
    <!-- 列表 -->
    <view class='list'>
      <!-- 判断列表中id==0并且长度大于1  已完成ICON带线 -->
      <image class='list_img_tab1' wx:if="{{item.id==0&&list.length>1}}" src='../../image/tabw.png'></image>
      <!-- 判断列表中id==0并且长度小于1  已完成ICON无线 -->
      <image class='list_img' wx:if="{{item.id==0&&list.length==1}}" src='../../image/111.png'></image>
      <!-- 判断列表中id==1  灰色ICON -->
      <image class='list_imgs' wx:if="{{item.id==1}}" src='../../image/writes.png'></image>
      <!-- 判断列表中id==2  灰色ICON -->
      <image class='list_imgs' wx:if="{{item.id==2}}" src='../../image/writes.png'></image>
      <!-- 判断列表中id==3  飞机ICON -->
      <image class='list_img' wx:if="{{item.id==3}}" src='../../image/222.png'></image>
      <view class='list_name_page'>
        <!-- 列表名称 -->
        <lable class='list_name'>{{item.name}}</lable>
      </view>
      <!-- 时间 -->
      <view class='list_dates_page'>{{item.dates}}</view>

    </view>
    <!-- 列表底线 -->
    <view class='writes'></view>


  </view>



</view>

.head{
  position: relative;
  width: 100%;
  height: 230rpx;
  border-bottom: 6rpx solid #ebebeb;
  /* background-color: red; */
}
/* 收货图片 */
.head_img{
  position: absolute;
  width: 144rpx;
  height: 144rpx;
  left: 60rpx;
  top: 45rpx;
}
/* 快递状态 */
.head_name{
  position: absolute;
  left: 230rpx;
  font-size: 40rpx;
  top: 36rpx;
}
/* 快递编号 */
.head_title{
position: absolute;
font-size: 30rpx;
left: 230rpx;
top: 100rpx;
color: #333;
}
/* 官方客服 */
.head_tel_name{
  position: absolute;
font-size: 30rpx;
left: 230rpx;
top: 150rpx;
color: #333;
}
/* 客服按钮 */
.head_tell{
  position: absolute;
  font-size: 28rpx;
  right: 60rpx;
  bottom: 40rpx;
  font-family: PingFangSC-Regular;
color: #AAAAAA;
letter-spacing: 0;
}

/* 追踪 */
.logisit{
  position:relative;
  width: 100%;
  height: 170rpx;
  text-align: center;
 /* background-color: red; */
}
/*  */
.list{
  position: relative;
  display: inline-block;
  width: 85%;
  height: 170rpx;
  /* border-left: 1rpx solid #ddd; */
  /* background-color: yellow; */
}
.list_name_page{
  position: relative;
  width: 100%;
  top:25%;
  /* background-color: red; */
  left: 40rpx;
}
.list_dates_page{
    position: relative;
  width: 100%;
  top: 30%;
  color: #aaa;
  text-align: left;
  font-size: 30rpx;
  /* background-color: yellow; */
  left: 40rpx;
}
.list_img_tab1{
    display: inline-flex;
  position: absolute;
  left: -34rpx;
  top: 40rpx;
  width: 55rpx;
  height: 195rpx;
}
.list_img{
  position: absolute;
  left: -28rpx;
  top: 50rpx;
  width: 45rpx;
  height: 45rpx;
}
.list_imgs{
   display: inline-flex;
  position: absolute;
  left: -28rpx;
  top: 40rpx;
  width: 40rpx;
  height: 195rpx;
}
.list_name{
  position: relative;
  text-align: left;
  font-size: 30rpx;
  width: 600rpx;
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 2;    
overflow: hidden;
}

.list_dates{
  position: absolute;
  text-align: left;
  top:68%;
  font-size: 30rpx;
}
/* .write{
  position: absolute;
  height: 78%;
  top:38%;
  border-left: 1rpx solid #ddd;
 left: 45rpx;
} */
.writes{
    position: absolute;
  width: 80%;
  bottom: -20rpx;
  border-bottom: 1rpx solid #ddd;
 left:100rpx;
}

// pages/userhome/address/address.js
Page({
  data: {
    // 列表数据
    list: [{
        // 状态
        id: 0,
        // title
        name: "客户签收人:徐剑 已签收 感谢使用圆通快递",
        // 时间
        dates: "2016-08-30"
      }, {
        id: 1,
        name: "北京市通州区梨园公司北京市通州区梨园公司北京市通州区梨园公司北京市通州区梨园公司",
        dates: "2016-08-30"
      }, {
        id: 2,
        name: "【北京市通州区梨园公司】已收入【北京市通州区梨园公司】已收入",
        dates: "2016-08-30"
      }

      , {
        id: 3,
        name: "北京朝阳区十里堡公司】取件人：小四 已收件",
        dates: "2016-08-30"
      }


    ]


  },
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function() {
    // 页面渲染完成
  },
  onShow: function() {
    // 页面显示
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  }
})