小程序快递100查询查看物流

小程序查看物流
1、wxml

<!-- 外层pages -->
<view class='pages'><!-- 头部 --><view class='head'><image class='head_img' src='{{img}}'></image><label class='head_name'>{{arr[state]}}</label><label class='head_title'>{{type}}：{{postid}}</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/gc.png'></image><!-- 判断列表中id==0并且长度小于1  已完成ICON无线 --><image class='list_img' wx:if="{{item.id==0&&list.length==1}}" src='/image/gx.png'></image><!-- 判断列表中id==1  灰色ICON --><image class='list_imgs' wx:if="{{item.id==1}}" src='/image/yc.png'></image><!-- 判断列表中id==2  灰色ICON --><image class='list_imgs' wx:if="{{item.id==2}}" src='/image/yc.png'></image><!-- 判断列表中id==3  飞机ICON --><image class='list_img' wx:if="{{item.id==3}}" src='/image/fj.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 class="zwwlxx {{stu==0?'':'hidden'}}">暂未查到物流信息</view>
</view>

2、wxss

page{border-top: 1px solid #eee;
}
.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: 54rpx;
}
/* 快递编号 */
.head_title{position: absolute;
font-size: 30rpx;
left: 230rpx;
top:137rpx;
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:-32rpx;
top:60rpx;
width:40rpx;
height:160rpx;
}
.list_img{position:absolute;
left:-32rpx;
top:50rpx;
width:40rpx;
height:40rpx;
}
.list_imgs{display: inline-flex;position: absolute;left: -28rpx;top: 40rpx;width: 32rpx;height: 211rpx;
}
.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;
}
.zwwlxx{color:#666;
margin-top:300rpx;
text-align: center;
font-size: 14px;
}

3、js

Page({data: {list: [],img:'',type:'',postid:'',//0在途中、1已揽收、2疑难、3已签收、4退签、5同城派送中、6退回、7转单arr: ['在途中', '已揽收', '疑难', '已签收', '退签', '同城派送中', '退回','转单'],state:1,stu:1,},query: function (type,postid) {var that = this;var type = type;var postid = postid;var data = {'key': '',//快递100的key'type': type,'postid': postid}wx.request({url: 'https://www.kuaidi100.com/query',data: data,header: {'content-type': 'application/json'},success: function(res) {if (res.data.status == 200) {if (res.data.data) {that.setData({state: res.data.state})for (var x in res.data.data) {var name = res.data.data[x].context;var dates = res.data.data[x].time;var id;console.log(x)if (x == 0) {if (res.data.state == 3) {id = 0} else {id = 1}} else if (x == res.data.data.length - 1) {id = 3} else {id = 2}var data1 = new Object();data1.name = name;data1.id = id;data1.dates = dates;var list1 = that.data.list;list1.push(data1);that.setData({list: list1,})}}}else{that.setData({stu: 0,})}}})},onLoad: function(options) {this.setData({type: options.name,postid:options.postid,img: wx.getStorageSync("img")})this.query(options.type,options.postid);},onReady: function() {// 页面渲染完成},onShow: function() {// 页面显示},onHide: function() {// 页面隐藏},onUnload: function() {wx.setStorageSync('img', '');}
})

4、图片
fj.png

gx.png

gc.png

yc.png

小程序快递100查询查看物流相关推荐

快速上手微信小程序-快递100
2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模 ...
续集关于上次简单微信小程序制作（快递100查询）
上次给大家简单介绍了小程序的实现原理以及传统APP与小程序的对比,这次给大家点干货: 一,移动互联网的八大平台 IOS.Android.H5.BAT.头条.手机厂商动态App平台阵营(H5.BAT. ...
java 快递100_使用快递100 查询链接实现快速查询的示例
Express-Query 本工程使用快递100 查询链接实现,仅供学习,禁止商业使用. 工程主要使用的是快递100官方提供的查询api //先查询该单号所属快递商 http://www.kuaidi ...
快递100快递java_使用快递100 查询链接实现快速查询的示例
Express-Query 本工程使用快递100 查询链接实现,仅供学习,禁止商业使用. 工程主要使用的是快递100官方提供的查询api //先查询该单号所属快递商 http://www.kuaidi ...
微信小程序云开发查询数据库结果为空
微信小程序云开发查询数据库结果为空问题描述: 先上代码: getNotice : function(){var that = thisconst db = wx.cloud.database()db ...
微信公众平台发布小程序数据助手可查看运营数据
微信公众平台发布小程序数据助手可查看运营数据用手机也能看小程序后台数据了 " 微信公众平台发布官方小程序「小程序数据助手」,支持相关的开发和运营人员在手机端更方便.及时地查看运营数据.& ...
微信小程序实现条件查询示例
微信小程序实现条件查询示例 index.js //index.js //获取应用实例 const app = getApp() const db = wx.cloud.database(); cons ...
微信小程序实现一键查询全国快递物流地图轨迹
随着电子商务的快速发展,物流行业成为了一个关键的领域.对于用户来说,了解快递物流的实时状态和轨迹信息非常重要.本教程将介绍如何在微信小程序中实现一键查询全国快递物流地图轨迹的功能.通过这个功能,用户可 ...
【小程序】快递100智能获取物流公司和物流信息
举个例子,如何只通过一个单号,获取到物流单号的物流信息.要用到下面两个接口,免费,无需注册快递100的key就可以用. 智能识别接口接口地址:http://www.kuaidi100.com/aut ...

小程序快递100查询查看物流

小程序快递100查询查看物流相关推荐

最新文章

热门文章

小程序 快递100查询查看物流

小程序 快递100查询查看物流相关推荐

最新文章

热门文章

小程序快递100查询查看物流

小程序快递100查询查看物流相关推荐