<view class="container">
  <view class="search-container">
    <input bindinput="bindInputNo" class="no-input" placeholder-style="font-size:20rpx;" auto-focus placeholder="输入快递单号查询"/>
    <button bindtap="bindSearachTab"  type="primary" size="mini" class="btn-search" >查询</button>
  </view>
  <view class="result">
    <scroll-view scroll-y="true">
      <view class="res" wx:for="{{items}}">
        <text class="res-text">时间:{{item.datetime}}</text>
        <text class="res-text">备注:{{item.remark}}</text>
        <text class="res-text">地点:{{item.zone}}</text>
      </view>
    </scroll-view>
  </view>
  <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange">
    <view> {{Error_Msg}} </view>
  </modal>
  <view class="body-view">
  <loading hidden="{{hiddenLoding}}" bindchange="loadingChange">
    加载中...
  </loading>
</view>
</view>

.no-input{
  border-bottom: solid lightgray 2rpx;
  height: 50rpx;
  font-size: 35rpx;
  width: 80%;
}

.search-container{
  display: flex;
  margin-top: 20rpx;
}

.result{
  margin-top: 50rpx;
  padding: 20rpx;
}

.res{
  border: 1rpx solid lightgray;
  padding: 5rpx;
}

.res-text{
  font-size: 30rpx;
  display: block;
  margin-top: 10rpx;
}

var app = getApp();
var apiKey = app.globalData.apiKey;
Page( {
  data: {
    no:"",
    modalHidden:true,
    hiddenLoding : true,
    Error_Msg : ''
  },
  onLoad : function(options){
    this.setData({
      currentExpress : {
        com : options.no
      }
    });
    
  },
  modalChange:function(){
    this.setData({
      modalHidden:true
    });
  },
  bindInputNo:function(event){
    this.setData({
      no:event.detail.value
    });
  },
  bindSearachTab:function(){
    var that = this;
    that.setData({
      hiddenLoding:false
    });
    wx.request({
      url : 'http://v.juhe.cn/exp/index',
      data : {
       key : apiKey,
       com : this.data.currentExpress.com,
       no : this.data.no
      },
      success:function(res){
        var result = res.data;
        console.info(result);
        if(result.error_code != 0){
          that.setData({
            Error_Msg : result.reason,
            modalHidden: false
          });
          return;
        }

        that.setData({
          items : result.result.list
        });
      },
      complete:function(){
        that.setData({
          hiddenLoding:true
        });
      }
    });
  }

  
});