微信小程序物流信息展示

<!-- 物流信息 -->
<!-- 外层pages -->
<view class='pages' wx:if="{{showexpress}}" bindtap='closeexpress'> <!-- 头部 --><view class='head' wx:if='{{expresslist.list.length>0}}'><image class='head_img' src='{{expresslist.logo}}'></image><view class='tabulate'><label class='head_name'>物流状态：<text style='color:#000;font-size:30rpx;'>{{expressstatus}}</text> </label><label class='head_title'>物流公司：<text style='color:#000'>{{expresslist.expName}}</text></label><label class='head_tel_name'>快递单号: <text style='color:#000'>{{expresslist.number}}</text></label></view></view><!-- 追踪 --><view class="wuliuinfo" wx:if='{{expresslist.list.length>0}}'> <view class='logisit' wx:for="{{expresslist.list}}" 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.status}}</view><view class='express-text {{item.display==0?"color":"color_second"}}'>{{item.text}}</view><view class='express-time'>{{item.time}}</view></view></view></view><view class='buttom' wx:else><text>暂时没有物流信息,请稍后再来~</text></view>  </view>
<view class='line'></view>

css：

.lopages {background: #fff;overflow-x: hidden;/* position: absolute; */margin: auto;top: 20rpx;width: 710rpx;padding-bottom: 30rpx;left: 2%;border-radius: 8rpx;box-shadow: 0px 4px 8px 0px rgba(219, 219, 219, 0.5);
}.head {height: 52rpx;display: flex;background: rgba(245, 247, 250, 1);border-radius: 8px 8px 0px 0px;padding-left: 20rpx;padding-right: 20rpx;
}
.wuliuinfo{padding-left: 20rpx;padding-right: 20rpx;
}
.tabulate {display: flex;align-items: center;
}/* 收货图片 */
.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:22rpx;font-family:PingFangSC-Regular,PingFang SC;color: #666;
}/* 追踪 */
.logisit {width: 100%;margin-left: 5rpx;margin-top: 40rpx;display: flex;}.express-middle-axis {width: 48rpx;position: relative;top: -195rpx;left: -5rpx;
}.color {color: #000000 !important;
}.color_second {color: rgba(153, 153, 153, 1);
}.express-status-address {font-size: 34rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;
}.express-time {font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(102, 102, 102, 1);padding-top: 20rpx;
}.express-left-date {display: flex;width: 300rpx;align-items: center;flex-direction: column;justify-content: center;
}.online-top-closing {width: 2rpx;height: 160rpx;background: #999999;position: absolute;top: 42rpx;left: 21rpx;}.express-text {font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(153, 153, 153, 1);padding-top: 20rpx;
}.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: 150rpx;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;margin-right: 10rpx;
}.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%;min-height: 150rpx;color: #666;
}.line {height: 10rpx;
}.buttom {width: 100%;height: 400rpx;line-height: 400rpx;text-align: center;color: #999;
}

data:{expresslist: [],//物流详情列表 ,expressstatus:'',//物流状态showexpress:false,list:[{display:'0',//已签收 判断是否加class条件status:'已签收',text:'【揭阳市】已离开 广东揭阳分拨中心：发往',time:'2020-06-20 18:33:42'},{display:'1',status:'派送中',text:'【揭阳市】已离开 广东揭阳分拨中心：发往 co',time:'2020-06-20 18:33:42'},]
}//查看物流express(e){let index = e.target.dataset.index;let uid = this.data.list[index].order_id;BaseApi.express({ //接口uni: uid}).then((res) => {console.log(res);if (res.data.code == 200) {let datas = res.data.data;this.setData({expresslist: datas.express.result,expressstatus: datas.express.result.list.length>0?datas.express.result.list[0].status.substring(0,15):'',showexpress:true})}}, (err) => {})},//点击关闭物流信息盒子closeexpress(){this.setData({showexpress: false})},

第二种：

wxml:

<!--components/logistics/logistics.wxml-->
<!-- 外层pages -->
<view class='lopages' bindtap='closeexpress'><!-- 头部 --><view class='head' wx:if='{{expresslist.list.length>0}}'><view class='tabulate'><label class='head_tel_name'>物流公司: <text>{{expresslist.number}}</text></label></view></view><!-- 收货地址 --><view class="wuliuinfo" wx:if='{{expresslist.list.length>0}}'> <view class='logisit2'><!-- 左边子容器 --><!-- 显示顶部收的圆点 --><view class='express-middle-axis2'><view class='dot-closing2'>收</view><view class='online-top-closing2'></view></view><!-- 右边子容器 --><view class='express-right2'><view class='express-time2'>收货地址：广东省汕头市惠阳区  城南街道  广东省汕头市惠阳区城南街道火旺元</view></view></view><view class='logisit' wx:for="{{expresslist.list}}" 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.status}}</view><view class='express-text {{item.display==0?"color":"color_second"}}'>{{item.text}}</view><view class='express-time'>{{item.time}}</view></view></view><!-- 点击展开收缩 --><view class="shrinkage" bindtap="shrinkage" wx:if="{{shrinkageOnoff}}"><text>点击查看更多物流详情</text><image src="../../images/icon_an.png"></image></view></view><view class='buttom' wx:else><text>暂时没有物流信息,请稍后再来~</text></view>
</view>
<view class='line'></view>

wxss:

/* components/logistics/logistics.wxss */
/* 物流信息展示 */
.lopages {background: #fff;overflow-x: hidden;/* position: absolute; */margin: auto;top: 20rpx;width: 710rpx;padding-bottom: 30rpx;left: 2%;border-radius: 8rpx;box-shadow: 0px 4px 8px 0px rgba(219, 219, 219, 0.5);
}.head {height: 52rpx;display: flex;background: rgba(245, 247, 250, 1);border-radius: 8px 8px 0px 0px;padding-left: 15rpx;padding-right: 20rpx;
}.wuliuinfo {padding-left: 20rpx;padding-right: 20rpx;
}.tabulate {display: flex;align-items: center;padding-left: 10rpx;}/* 收货图片 */
.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: 22rpx;font-family: PingFangSC-Regular, PingFang SC;color: #666;
}/* 追踪 */
.logisit2{width: 100%;margin-left: 5rpx;display: flex;}
.logisit {width: 100%;margin-left: 5rpx;margin-top: 40rpx;display: flex;}.express-middle-axis {width: 50rpx;position: relative;top: -201rpx;left: -8rpx;
}.express-middle-axis2 {width: 50rpx;position: relative;top: 0rpx;left: -5rpx;
}.color {color: #000000 !important;
}.color_second {color: #999999;
}.express-status-address {font-size: 34rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;
}.express-time {font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(102, 102, 102, 1);padding-top: 15rpx;
}
.express-time2{font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(102, 102, 102, 1);padding-top: 35rpx;padding-left: 5rpx;
}.express-left-date {display: flex;width: 300rpx;align-items: center;flex-direction: column;justify-content: center;
}.online-top-closing {width: 2rpx;height: 140rpx;background: #999999;position: absolute;top: 62rpx;left: 27rpx;}.online-top-closing2 {width: 1rpx;height: 58rpx;position: absolute;top: 80rpx;left: 25rpx;border-left: 1rpx dashed #999999;}.express-text {font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(153, 153, 153, 1);padding-top: 20rpx;
}.dot-closing {width: 49rpx;height: 49rpx;border-radius: 50%;margin-top: 50rpx;/* margin-bottom:-45rpx; */border: 1rpx solid #d7d7d7;text-align: center;line-height: 50rpx;font-size: 30rpx;color: #d7d7d7;animation: myfirst;animation-fill-mode: forwards;position: absolute;top: 150rpx;left: 4rpx;}.dot-closing2{width: 49rpx;height: 49rpx;border-radius: 50%;margin-top: 50rpx;text-align: center;line-height: 49rpx;font-size: 26rpx;color: #fff;background: #FC3B45;animation: myfirst;position: absolute;top: -24rpx;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;position: absolute;top: 175rpx;left: 4rpx;}@keyframes myfirst {to {font-weight: bold;transform: rotate(270deg);}
}.dot-shou {width: 49rpx;height: 49rpx;border-radius: 50%;border: 1rpx solid #000;background: #000;margin-top: 6rpx;margin-right: 10rpx;
}.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%;min-height: 150rpx;color: #666;padding-left: 10rpx;
}
.express-right2 {width: 90%;color: #666;padding-left: 10rpx;
}
.line {height: 10rpx;
}.buttom {width: 100%;height: 400rpx;line-height: 400rpx;text-align: center;color: #999;
}/* 点击收缩展开 */
.shrinkage {display: flex;align-items: center;justify-content: center;margin-top: 30rpx;
}.shrinkage text {font-size: 20rpx;font-family: PingFangSC-Regular, PingFang SC;color: #666666;letter-spacing: 3rpx;padding-right: 10rpx;
}.shrinkage image {width: 28rpx;height: 28rpx;
}

js:

Page({data: {expresslist:{//物流详情列表 ,expName:'德邦物流',number:'10209003000422',list:[{display:'0',//已签收 判断是否加class条件status:'已签收',text:'【揭阳市】已离开 广东揭阳分拨中心：发往',time:'2020-06-20 18:33:42'},{display:'1',status:'派送中',text:'【揭阳市】已离开 广东揭阳分拨中心：发往 co',time:'2020-06-20 18:33:42'},{display:'1',status:'派送中',text:'【揭阳市】已离开 广东揭阳分拨中心：发往 co',time:'2020-06-20 18:33:42'},{display:'1',status:'派送中',text:'【揭阳市】已离开 广东揭阳分拨中心：发往 co',time:'2020-06-20 18:33:42'},{display:'1',status:'派送中',text:'【揭阳市】已离开 广东揭阳分拨中心：发往 co',time:'2020-06-20 18:33:42'}]},expressstatus:'',//物流状态// showexpress:falseshrinkageOnoff:true,//查看更多物流信息按钮隐藏},properties: {productAttr:{type: Object,},},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},//展开收缩//先不展开unshrinkage(){console.log(newarr,'newarr');return this.data.expresslist.list.slice(0,2)},//点击展开shrinkage(){this.setData({shrinkageOnoff:false,// expresslist:this.data.expresslist})},})

微信小程序物流信息展示相关推荐

[微信小程序]物流信息样式加动画效果(源代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图片:(信息仅为示例)  ...
微信小程序--字体展示
以下为微信小程序font-family中提供的十四种字体如果同时设置font-size,有时会对font-family的效果产生干扰,导致字体设置无效,需注意字体大小问题. 字体一 font-fam ...
微信小程序map展示
今天对微信小程序进行了运用,对于移动端自己做的比较少,现在大多数的项目就是百度,也就是CV工程师微信小程序的代码 wxml <view class="" hover-cla ...
通俗易懂的五星评价代码——微信小程序如何展示像淘宝天猫那样五星好评？
项目背景 2020年起始,微信官方宣布支持小程序直播.陆续有很多的商家与开发者参与到这场微信生态直播大潮中,作为电商小程序评价内容必不可少的,官方没有提供评价组件只能自己动手丰衣足食.网上看了很多资料 ...
微信小程序单纯展示用户头像、昵称、性别，不通过后台接口获取
open-data 用于展示微信开放的数据. 使用方法 <open-data type="groupName" open-gid="xxxxxx"> ...
微信小程序订单展示（3）
order-model.js: import {Base} from '../../utils/base.js'class Order extends Base{constructor(){super ...
微信小程序实现展示图片（图片推广小程序可以使用）
实现效果图: 首先就是这个封面是一些图片展示界面,后台返回的都是图片.然后根据返回数据数组的下标进行分类,第一排只显示数组为1,4,7一次类推,第二列是2,5,8的index,第三列是3,6,9等等, ...
微信小程序 —— 倒计时(展示时钟)
以下所述参考网上众多大佬略写,本人只是菜鸟一枚,记录博客主要怕自己记不住,方便以后参考,有何不足,欢迎补充- 方式方法和网上大多大佬有雷同,因为我也是参考网上各位大佬的- 一.单独一个页面只有一个时展 ...
wechat微信小程序panda展示公司信息
运行效果 wxml <view class="page-body"><view class="operate"><view cla ...

微信小程序物流信息展示

微信小程序物流信息展示相关推荐

最新文章

热门文章