微信小程序之线路查询

 线路查询界面布局：

主要代码：

<!--index.wxml-->

<view class="container">
  <!--城市定位-->
  <view class="top">  
    <view class="top_left">
    <text> {{city}}</text>
    </view>
  <!--搜索框-->
  <view class="top_right">
    <input  placeholder="search" type="text" value=""/> 
  </view>
<!--按钮切换-->
  <view class="btn" bindtap="changeBtn">
    <view class="{{currentIndex==0?'active':''}}" data-index="0">最近使用 
    </view>
  	<view class="{{currentIndex==1?'active':'active'}}" data-index="1">查询路线 
    </view>
    <view class="{{currentIndex==2?'active':''}}" data-index="2">收藏 
    </view>
  </view>
<view class="contain">
<!--站点查询-->
  <view class="from1">
     <input bindchange="inputStart"  placeholder="> 起始站" placeholder-class="from1-text" />
  </view>
  <view class="image">
	 <image  catchtap="bindImg" animation="{{animation}}" src="../../images/switch1.png" >
   </image>
</view>
  <view class="from2">
     <input bindchange="inputEnd" placeholder="> 终点站" placeholder-class="from2-text"/>
  </view>
  <!--查询按钮-->
  <image catchtap="searchReault" src="../../images/search6.png"></image>
  <!--扣费选择-->
  <view class="switch1">
    <text class="text">是否到站自动扣费?</text>
    <switch checked bindchange="switchChange"/>
  </view>
</view>
    <!--显示界面-->
    <view class="line">
<block  wx:for="{{busline}}"  wx:key="{{index}}">
<navigator class="list list-bg1" url="../busline/busline?id={{index}}"  wx:if="{{condition}}">
  <text class="text1">乘车方案{{index+1}}：</text>
  <text class="text2">{{item.vehicles}} <text class="text3">详细>></text></text> 
  </navigator>
  </block>
  </view>
  </view>
</view>

/**index.wxss**/

.top {
  float: left;
  width: 100%;
  height:90rpx;
  background:linear-gradient(to bottom,rgba(51,190,44,1), rgba(51,190,44,0.6));
  /*background:linear-gradient(rgba(140,224,178,0.9), rgba(140,224,178,0.6));*/
}
.top_left{
  float: left;
  width:25%;
   margin-top:10rpx;
  color: #fff;
  
}
.top_left text{
  color:#fff;
  margin-left: 12%;
  text-align:center;
  font-weight: bolder;
  font-size: 40rpx;
 /* text-shadow:0 0 0.2em rgba(0,0,0,.2),
                -0 -0 0.2em rgba(0,0,0,.2);*/
}
.top_right{
  height: 100%;
  /*background:#66CC9A;*/
  /*background:#5FAC4B;*/
}
/**搜索框**/
.top_right input{ 
    float:left;
    width:58%;
    margin-left:3%;
    height:60rpx;
    padding-left:32rpx;
    border-radius:12px;
    border:2px solid rgba(255,255,255,.3);
    box-shadow: inset 0px 0px 6px rgba(255,255,255,.1);
} 
.top_right text{
  float: left;
  margin-left:2%;
}/*
.search{ 
    position: relative;
} 
.search:before{
    float: right;
    margin-top: 10rpx;
    margin-right:-8%;
    content: ' '; 
    width:35rpx; 
    height:35rpx; 
    border:2px solid #fff; 
    border-radius:36rpx; 
    box-shadow: inset 1px 1px 10px rgba(0,0,0,.2);
}
.search:after { 
   float: right;
   margin-right:-60rpx; 
   margin-top:20px;
    content: ' '; 
    width:30rpx; 
    height:8rpx; 
    background: #fff; 
    border-radius: 8rpx 0 0 8rpx; 
    transform: rotate(45deg); 
} */
/*切换按钮*/
.btn{
  width:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;   
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-direction:row;
  flex-direction:row;
  font-size:40rpx;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  background: #fff;
  position:relative;
}
.btn,.btn:before{box-sizing:border-box}
.btn:before{
  content:'';
  width:200%;
  height:0;
  position:absolute;
  left:0;
  bottom:0;
  -webkit-transform:scale(.5);
  transform:scale(.5);
  -webkit-transform-origin:0 0;
  transform-origin:0 0}
.btn view{
  width:40%;
  height:3rem;
  line-height:3rem;
  text-align:center;
  color:#666;
  font-weight:500}
.btn view.active{color:#33BE2C;position:relative}
.btn view.active:after{
  content:'';
  width:200%;
  height:0;
  position:absolute;
  left:0;
  bottom:-.053333rem;
  border-bottom:4px solid #33BE2C;
  -webkit-transform:scale(.5);
  transform:scale(.5);
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
  }
.contain{
  width: 100%;
  margin-top:6px;
  background: #fff;
}
/*站点查询*/
.image{
  margin-left: 2%;
	width:25%;
	height:30px;
	display: block;
}
.image>image{
  margin-top:-18rpx;
	width:25px;
	height: 25px
}
.from1{
  float:left;
	display: block;
  margin-left:15%;
	width:55%;
  padding-top:11px;
  padding-bottom:6rpx;
  border-bottom:1px solid #ccc;
}
.from2{
  float:left;
  padding-top:8rpx;
	display: block;
  margin-left:15%;
	width:63%;
  padding-bottom:18px;
}
.from1-text{
  color:#B2B2B2;
  font-size: 30rpx;
  padding-bottom:4rpx;
}
.from2-text{
  color:#B2B2B2;
  font-size: 30rpx;
}
.contain>image{
	width:25px;
	height:25px;
  margin-top: -2px;
  margin-left: 5%;
  padding-bottom: 16px;
}
/*扣费选择*/
.switch1{
  display: block;
	float:left;
	width:100%;
	background: #fff;
  padding-top:10px;
	padding-bottom:5px;
}
.switch1 text{
  float: left;
  color:#424242;
  margin-top:30rpx;
  margin-left: 10px;
  text-align:center;
  font-size: 40rpx;
}
.switch1 switch{
  margin-top:10rpx;
  margin-bottom: 10rpx;
  margin-left:30%;
}
/*查询结果*/
.line{
  width:94%;
  margin:0 auto;
  line-height: 100rpx;
  margin-top:20%;
  box-shadow:3px 3px 3px rgba(0,0,0,.2); 
  border-radius:12rpx; 
}
.list text {
  flex-grow:2;
}
.text1 {
  width: 18%;
  margin-left:3%;
  text-align: center;
  font-size:36rpx;
  color:#424242;
}
.text2 {
  margin-left:2%;
  text-align: center;
  width:82%;
  font-size: 38rpx;
  color:#2CAB26;
}
.list-bg1:nth-of-type(n){
 background-color: #fff;
}
.text3{
  float: right;
  margin-right: 30rpx;
  font-size:34rpx;
}
.nolist {
  text-align: center;
  width: 100%;
  font-size: 28rpx;
  padding-top: 40rpx;
  color: #c82829;
}

/**index.js**/

var tcity = require("../../utils/citys.js");
var url="url";/*API地址：可参考极速数据*/
var ak="appkey";
Page({
  data:{
    busline:[],
    city: "",
    rotate: -180
  },
onLoad:function(options){  
    this.loadInfo();  
    console.log('onLoad...');
  }, 
  //获取经纬度信息
loadInfo:function(){  
  var page=this  
  wx.getLocation({  
    type: 'wgs84', 
    success: function(res){  
      // success  
      var latitude=res.latitude //纬度
       var longitude=res.longitude   //经度
      page.loadCity(latitude,longitude)  
    },  
    fail: function() {  
      // fail  
    },  
    complete: function() {  
      // complete  
    }  
  })  
  }, 
  //获取城市信息 
  loadCity:function(latitude,longitude){  
    var page =this  
    wx.request({  
    url: url+'geoconvert/coord2addr?lat='+latitude+'&lng='+longitude+'&type=baidu&appkey='+ak,
      data: {},  
      header:{  
        'Content-Type':'application/json'  
      },  
      success: function(res){  
        // success  
        console.log(res);  
        var city=res.data.result.city;
        var province= res.data.result.province
        var county=res.data.result.district
        page.setData({province:province}); 
        page.setData({city:city}); 
        page.setData({county:county});  
      },  
      fail: function() {  
        // fail  
      },  
      complete: function() {  
        // complete  
      }  
    })  
  }, 
  //按钮切换
  changeBtn: function(ev) {
    this.setData({
      currentIndex: ev.target.dataset.index
    });
  },
  //键盘输入起始位置站台
  inputStart:function(e){
    var that=this;
    that.setData({
      start:e.detail.value
    });
  },
   //键盘输入终点位置站台
  inputEnd:function(e){
    var that=this;
    that.setData({
      endaddr:e.detail.value
    });
  },
//交换地址
bindImg:function(){
    var that=this;
		var animation = wx.createAnimation({
      timingFunction: "ease",
      duration: 400
    })
    this.animation = animation;
    animation.rotateZ(this.data.rotate).step();
    
    this.setData({
      rotate: -1*this.data.rotate,
      animation: animation.export(),
    })

  },
//是否自动扣费
switchChange: function (e){
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
//点击查询按钮触发
  searchReault:function(){
    var that = this;
    //加载完成前，显示加载中的提示框
  wx.showToast({
    title:'正在努力加载中...',
    icon:'loading',
    duration:6000
  });
  //输入框没有输入的判断
  if(that.data.start== '' || that.data.endaddr== '' ){
    wx.hideToast();
    return;
  }
  //发起请求，根据公交站点查询符合线路信息
    wx.request({
      url:url+'city='+that.data.city+'&start='+that.data.start+'&end='+that.data.endaddr+'&appkey='+ak+'&type=transit',
      data: {},
      success: function(res){
        console.log(res.data)
        var data=res.data;
        that.setData({
          busline:data.result,        
          condition:true,
        });
     wx.setStorageSync('busline', data.result)   
        //数据加载完成后隐藏加载框
        wx.hideToast();

      },
    })
  }
})

/**app.json**/

{
  "pages":[
    "pages/index/index",
    "pages/state/state",
   "pages/busline/busline",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#33BE2C",
    "navigationBarTitleText": "慧行公交",
    "navigationBarTextStyle":"white"
  },
 "tabBar": {
    "selectedColor": "#33BE2C",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath":"/images/index1.png",
      "selectedIconPath":"/images/index.png"
      },
      { 
      "pagePath": "pages/state/state",
      "text": "状态",
      "iconPath":"/images/state1.png",
      "selectedIconPath":"/images/state.png"
      },
      {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath":"/images/mine1.png",
      "selectedIconPath":"/images/mine.png"
      }
      
    ]

/**app.wxss**/

page {
  background-color: #EFEFEF;/*页面颜色*/
  height: 100%;
}
/**app.wxss**/
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;
  background-color: #f8f8f8;
} 
.citypickers{
  position: fixed;
  height: 100%;
  width: 100%;
  min-height: 100%;
  background-color: red;
}
.citybody {
  position: fixed;
  bottom: 0px;
}
.cityheader {
  position: absolute;
  top:0px;
  width: 100%;
  z-index: 4;
}
.city-cancel {
  float: left;
  margin: 20rpx;
  color: #818181;
}
.city-true {
  float: right;
  margin: 20rpx;
  color: #2FB42E
}
.section .picker {
  background-color: #fff;
  border-bottom: 1px #d9d9d9 solid;
  border-top: 1px #d9d9d9 solid;
  padding: 20rpx;
}
  }
}