wxmlview class="container" input placeholder="输入快递单号" placeholder-class="placeColor" bindinput="getText"/ !--显示查得的快递信息-- scroll-view scroll-y="true" clas ...
wxml
[html] view plain copy
- <view class="container">
- <input placeholder="输入快递单号" placeholder-class="placeColor" bindinput="getText"/>
- <!--显示查得的快递信息-->
- <scroll-view scroll-y="true" class="scroll">
- <view class="info" wx:for="{{dataInfo}}">
- <view class="time">{{item.time}}</view>
- <view class="context">{{item.context}}</view>
- </view>
- </scroll-view>
- <view class="btngroup">
- <button type="primary" hover-class="none" bindtap="search">查询</button>
- <button type="primary" hover-class="none" bindtap="onBtnTap">{{expressChinese}}</button>
- </view>
- </view>
wxss
[html] view plain copy
- /* index/index.wxss */
- page{
- background: #565656;
- }
- scroll-view{
- border: 2rpx solid #f60;
- }
- .container{
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 80rpx 0;
- }
- input{
- width: 550rpx;
- padding: 10rpx 0;
- text-align: center;
- border: 2px solid #f60;
- border-radius: 10rpx;
- color: #fff;
- }
- .placeColor{
- color: #fff;
- }
- .scroll{
- height: 600rpx;
- width: 100%;
- margin-top: 20rpx;
- }
- .info{
- padding: 30rpx;
- }
- .time{
- color: #fff;
- font-size: 14px;
- }
- .context{
- color: #fff;
- font-size: 16px;
- margin-top: 10rpx;
- }
- .btngroup{
- width: 100%;
- margin-top: 100rpx;
- }
- .btngroup button{
- width: 100%;
- background: #f60;
- color: #fff;
- margin-top: 5rpx;
- }
- .btngroup .default{
- background-color: #f60;
- }
- .btngroup .warn{
- background-color: red;
- }
js
[html] view plain copy
- // index/index.js
- Page({
- data:{
- expressChinese:'快递公司选择'
- },
- onLoad:function(options){
- // 页面初始化 options为页面跳转所带来的参数
- var orderNum = this.data.orderNum;
- },
- search:function(){
- this.getExpressInfo(this.data.expressEnglish,this.data.orderNum);
- },
- //传入快递公司、快递单号获取快递信息
- getExpressInfo:function(param,orderNum){
- console.log(param,orderNum);
- var that = this;//由于函数里面又嵌套了一个函数,所以需要先保存this指向,方便后面将数据传递到data里面,
- //读取快递数据
- wx.request({
- //3323211723270
- url: 'https://www.kuaidi100.com/query?type='+param+'&postid='+orderNum+'',
- //数据读取成功
- success: function(res){
- var data = res.data.data;
- console.log("快递信息:"+data);
- //将数据传递给data
- that.setData({dataInfo:data});
- },
- //数据读取失败
- fail:function(){
- console.log('订单号有误')
- }
- })
- },
- //获得页面的快递单号
- getText:function(event){
- var orderNum = event.detail.value.trim();
- //将快递单号值传递给data
- this.setData({
- orderNum:orderNum
- })
- },
- //快递公司选择点击事件
- onBtnTap:function(){
- var that = this;//由于函数里面又嵌套了一个函数,所以需要先保存this指向,方便后面将数据传递到data里面,
- var expressChinese = ['韵达','中通','顺丰','汇通','申通'];
- var expressEnglish = ['yunda','zhongtong','shunfeng','huitong','shentong'];
- wx.showActionSheet({
- itemList:expressChinese,
- success:function(res){
- //点击谁,返回谁对应的itemList的数组内的下标编号
- var valueEnglish = expressEnglish[res.tapIndex];
- var valueChinese = expressChinese[res.tapIndex];
- that.setData({
- expressEnglish:valueEnglish,
- expressChinese:valueChinese
- })
- }
- })
- }
- })