小程序模板網(wǎng)

微信小程序案例-快遞查詢

發(fā)布時間：2017-12-01 15:30 所屬欄目：小程序開發(fā)教程

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為頁面跳轉(zhuǎn)所帶來的參數(shù)  
  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;//由于函數(shù)里面又嵌套了一個函數(shù)，所以需要先保存this指向，方便后面將數(shù)據(jù)傳遞到data里面，  
  19.   
  20.       //讀取快遞數(shù)據(jù)  
  21.       wx.request({  
  22.         //3323211723270  
  23.         url: 'http://www.kuaidi100.com/query?type='+param+'&postid='+orderNum+'',  
  24.         //數(shù)據(jù)讀取成功  
  25.         success: function(res){  
  26.             var data = res.data.data;  
  27.             console.log("快遞信息:"+data);  
  28.             //將數(shù)據(jù)傳遞給data  
  29.             that.setData({dataInfo:data});  
  30.         },  
  31.         //數(shù)據(jù)讀取失敗  
  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;//由于函數(shù)里面又嵌套了一個函數(shù)，所以需要先保存this指向，方便后面將數(shù)據(jù)傳遞到data里面，  
  50.       var expressChinese = ['韻達','中通','順豐','匯通','申通'];  
  51.       var expressEnglish = ['yunda','zhongtong','shunfeng','huitong','shentong'];  
  52.       wx.showActionSheet({  
  53.           itemList:expressChinese,  
  54.           success:function(res){  
  55.               //點擊誰，返回誰對應的itemList的數(shù)組內(nèi)的下標編號  
  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.  


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.u-renovate.com/wxmini/doc/course/18015.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×