您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

微信小程序案例-快递查询

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2017-12-01 15:28热度:

wxmlview class="container" input placeholder="输入快递单号" placeholder-class="placeColor" bindinput="getText"/ !--显示查得的快递信息-- scroll-view scroll-y="true" clas ...

 
 
 

wxml

 

[html] view plain copy
 
  1. <view class="container">  
  2.     <input placeholder="输入快递单号" placeholder-class="placeColor" bindinput="getText"/>  
  3.     <!--显示查得的快递信息-->  
  4.     <scroll-view scroll-y="true" class="scroll">  
  5.         <view class="info" wx:for="{{dataInfo}}">  
  6.             <view class="time">{{item.time}}</view>  
  7.             <view class="context">{{item.context}}</view>  
  8.         </view>  
  9.     </scroll-view>  
  10.   
  11.     <view class="btngroup">  
  12.         <button type="primary" hover-class="none" bindtap="search">查询</button>  
  13.         <button type="primary" hover-class="none" bindtap="onBtnTap">{{expressChinese}}</button>  
  14.     </view>  
  15. </view>  

 

 

wxss

 

 

[html] view plain copy
 
  1. /* index/index.wxss */  
  2. page{  
  3.     background: #565656;  
  4. }  
  5. scroll-view{  
  6.     border: 2rpx solid #f60;  
  7. }  
  8.   
  9. .container{  
  10.     display: flex;  
  11.     flex-direction: column;  
  12.     align-items: center;  
  13.     padding: 80rpx 0;  
  14. }  
  15.   
  16. input{  
  17.     width: 550rpx;  
  18.     padding: 10rpx 0;  
  19.     text-align: center;  
  20.     border: 2px solid #f60;  
  21.     border-radius: 10rpx;  
  22.     color: #fff;  
  23. }  
  24. .placeColor{  
  25.     color: #fff;  
  26. }  
  27.   
  28. .scroll{  
  29.     height: 600rpx;  
  30.     width: 100%;  
  31.     margin-top: 20rpx;  
  32. }  
  33.   
  34. .info{  
  35.     padding: 30rpx;  
  36. }  
  37. .time{  
  38.     color: #fff;  
  39.     font-size: 14px;  
  40. }  
  41.   
  42. .context{  
  43.     color: #fff;  
  44.     font-size: 16px;  
  45.     margin-top: 10rpx;  
  46. }  
  47.   
  48. .btngroup{  
  49.     width: 100%;  
  50.     margin-top: 100rpx;  
  51.   
  52. }  
  53. .btngroup button{  
  54.     width: 100%;  
  55.     background: #f60;  
  56.     color: #fff;  
  57.     margin-top: 5rpx;  
  58. }  
  59. .btngroup .default{  
  60.     background-color: #f60;  
  61. }  
  62. .btngroup .warn{  
  63.     background-color: red;  
  64. }  

 

 

js

 

[html] view plain copy
 
  1. // index/index.js  
  2. Page({  
  3.   data:{  
  4.       expressChinese:'快递公司选择'  
  5.   },  
  6.   onLoad:function(options){  
  7.     // 页面初始化 options为页面跳转所带来的参数  
  8.     var orderNum = this.data.orderNum;    
  9.   },  
  10.   
  11.   search:function(){  
  12.       this.getExpressInfo(this.data.expressEnglish,this.data.orderNum);  
  13.   },  
  14.   
  15.   //传入快递公司、快递单号获取快递信息  
  16.   getExpressInfo:function(param,orderNum){   
  17.       console.log(param,orderNum);       
  18.       var that = this;//由于函数里面又嵌套了一个函数,所以需要先保存this指向,方便后面将数据传递到data里面,  
  19.   
  20.       //读取快递数据  
  21.       wx.request({  
  22.         //3323211723270  
  23.         url: 'http://www.kuaidi100.com/query?type='+param+'&postid='+orderNum+'',  
  24.         //数据读取成功  
  25.         success: function(res){  
  26.             var data = res.data.data;  
  27.             console.log("快递信息:"+data);  
  28.             //将数据传递给data  
  29.             that.setData({dataInfo:data});  
  30.         },  
  31.         //数据读取失败  
  32.         fail:function(){  
  33.             console.log('订单号有误')  
  34.         }  
  35.       })  
  36.   },  
  37.   
  38.   //获得页面的快递单号  
  39.   getText:function(event){  
  40.       var orderNum = event.detail.value.trim();  
  41.       //将快递单号值传递给data  
  42.       this.setData({  
  43.         orderNum:orderNum  
  44.       })  
  45.   },  
  46.   
  47.   //快递公司选择点击事件  
  48.   onBtnTap:function(){  
  49.       var that = this;//由于函数里面又嵌套了一个函数,所以需要先保存this指向,方便后面将数据传递到data里面,  
  50.       var expressChinese = ['韵达','中通','顺丰','汇通','申通'];  
  51.       var expressEnglish = ['yunda','zhongtong','shunfeng','huitong','shentong'];  
  52.       wx.showActionSheet({  
  53.           itemList:expressChinese,  
  54.           success:function(res){  
  55.               //点击谁,返回谁对应的itemList的数组内的下标编号  
  56.               var valueEnglish = expressEnglish[res.tapIndex];  
  57.               var valueChinese = expressChinese[res.tapIndex];  
  58.               that.setData({  
  59.                   expressEnglish:valueEnglish,  
  60.                   expressChinese:valueChinese  
  61.               })  
  62.           }  
  63.       })  
  64.   }  
  65. })  
  66.