微信小程序> 小程序物流追踪状态页面

小程序物流追踪状态页面

浏览量:3141 时间: 来源:菜鸟老五

!-- 外层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.length1}}" 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.jsPage({  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() {    // 页面关闭  }})

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎