午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

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

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

wxmlview class="container" input placeholder="輸(shu)入快遞單號" placeholder-class="placeColor" bindinput="getText"/ !--顯示查得的快遞信息-- scroll-view scroll-y="true" clas ...

 
 
 

wxml

 

[html] view plain copy
 
  1. <view class="container">  
  2.     <input placeholder="輸入快遞(di)單號" placeholder-class="placeColor" bindinput="getText"/>  
  3.     <!--顯示查得的快遞(di)信息-->  
  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. &nbsp;   background: #565656;  
  4. }  
  5. scroll-view{  
  6. &nbsp;   border: 2rpx solid #f60;  
  7. }  
  8.   
  9. .container{  
  10.   &nbsp; display: flex;  
  11.  &nbsp;  flex-direction: column;  
  12.     align-items: center;&nbsp; 
  13. &nbsp;  &nbsp;padding: 80rpx 0;  
  14. }  
  15.   
  16. input{  
  17.  &nbsp;  width: 550rpx;  
  18.     padding: 10rpx 0; &nbsp;
  19.     text-align: center;&nbsp; 
  20.     border: 2px solid&nbsp;#f60;  
  21.  &nbsp;  border-radius: 10rpx;  
  22.  &nbsp;  color: #fff;  
  23. }  
  24. .placeColor{  
  25.     color: ;#fff;  
  26. }  
  27.   
  28. .scroll{  
  29.     height: 600rpx;  
  30.     width: 100%;  
  31.   &nbsp; margin-top:&nbsp;20rpx;  
  32. }  
  33.   
  34. .info{  
  35.  &nbsp;  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%;&nbsp; 
  55.  &nbsp;  background: #f60;  
  56. &nbsp;   color: #fff;  
  57.   ;  margin-top: 5rpx;  
  58. }  
  59. .btngroup .default{  
  60.     background-color:&nbsp;#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:'快(kuai)遞(di)公司選(xuan)擇'  
  5.   },  
  6.   onLoad:function(options){  
  7.     // 頁(ye)面初始化 options為頁(ye)面跳轉(zhuan)所帶來的參數  
  8.     var orderNum = this.data.orderNum;    
  9.   },  
  10.   
  11.   search:function(){  
  12.       this.getExpressInfo(this.data.expressEnglish,this.data.orderNum);  
  13.   },  
  14.   
  15.   //傳入快遞(di)公司、快遞(di)單號獲取快遞(di)信息  
  16. &nbsp; getExpressInfo:function(param,orderNum){   
  17.     &nbsp; console.log(param,orderNum);       
  18.       var that = this;//由于函(han)數(shu)里面(mian)又(you)嵌(qian)套了一個函(han)數(shu)，所(suo)以需要先保存(cun)this指向，方便后(hou)面(mian)將數(shu)據傳遞(di)到data里面(mian)，  
  19.   
  20.       //讀(du)取快遞數(shu)據  
  21.    &nbsp;&nbsp; wx.request({  
  22.         //3323211723270  
  23.         url: '//www.kuaidi100.com/query?type='+param+'&postid='+orderNum+'',  
  24. &nbsp;       //數據(ju)讀取成(cheng)功(gong)  
  25.  &nbsp;      success: function(res){  
  26.             var data = res.data.data;  
  27.      &nbsp;&nbsp;     console.log("快(kuai)遞(di)信息:"+data);  
  28. &nbsp;  &nbsp;        //將數據傳遞給data  
  29.   ;          that.setData({dataInfo:data});  
  30.         },&nbsp; 
  31.         //數據(ju)讀取失敗  
  32.         fail:function(){ &nbsp;
  33.             console.log('訂單號有誤')  
  34.      ;   }  
  35.       }) &nbsp;
  36.   },  
  37.   
  38.   //獲得頁面的快遞單號  
  39.   getText:function(event){  
  40.       var orderNum = event.detail.value.trim();  
  41.       //將快遞(di)單號值傳遞(di)給data  
  42.       this.setData({&nbsp; 
  43.     &nbsp;   orderNum:orderNum  
  44.  &nbsp;    })  
  45.   },  
  46.   
  47.   //快遞(di)公司選擇(ze)點擊事件  
  48.   onBtnTap:function(){  
  49.       var that = this;//由于函數(shu)(shu)里面又(you)嵌(qian)套了一個函數(shu)(shu)，所以需要先保存this指向，方便后面將數(shu)(shu)據傳(chuan)遞(di)到(dao)data里面，  
  50.       var expressChinese = ['韻達','中(zhong)通','順豐(feng)','匯通','申通'];  
  51.       var expressEnglish = ['yunda','zhongtong','shunfeng','huitong','shentong'];  
  52.     ;  wx.showActionSheet({  
  53.           itemList:expressChinese, &nbsp;
  54.       &nbsp;   success:function(res){  
  55.               //點(dian)擊誰(shui)，返回誰(shui)對應的(de)itemList的(de)數組內的(de)下(xia)標編號  
  56.               var valueEnglish = expressEnglish[res.tapIndex];  
  57.               var valueChinese = expressChinese[res.tapIndex];  
  58.               that.setData({  
  59.                   expressEnglish:valueEnglish,  
  60.                   ;expressChinese:valueChinese  
  61.       &nbsp;       })  
  62.           }  
  63.       })  
  64.   }  
  65. })  
  66.  


易優小程序（企業(ye)版）+靈活api+前后(hou)代碼開(kai)源 碼云(yun)倉庫(ku):
本文地址：//www.jinyoudianli.com/wxmini/doc/course/18015.html 復制鏈接 如需定制(zhi)請聯系易優(you)客服咨詢：

工作日 8:30-12:00 14:30-18:00
周(zhou)六及部(bu)分(fen)節(jie)假日(ri)提供值班服務

易小優
轉人工 ×