小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

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

发布时间：2017-12-01 15:30 所属栏目：小程序开发教程

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.  


易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18015.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询