仿智行火车票12306微信小程序火车票查询界面设计的实现

火车票查询界面可以输入始发站、终点站、出行日期、火车类型等内容进行火车票查询；提供飞机票页签，其与火车票页签可以进行相互切换显示；在火车票查询界面下面是4个快捷导航菜单：极速抢票、在线选座、抢手好货、超值酒店。如图19所示。

        图19  火车票界面

实现方法分为2步

1. 页签切换效果设计

（1）进入到pages/train/train.wxml文件，设计火车票与飞机票页签切换效果以及选中状态效果，设计两种样式：一种是选中样式select，另一种是正常样式normal，根据变量currentTab值来决定使用那个样式，同时提供switchNav切换导航的事件，具体代码如下所示。

<view class="haibao">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:80px;">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" style="width:100%;height:80px;"></image>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="content">
  <view class="navbg">
    <view id="0" class="{{currentTab == 0?'select':'normal'}}" bindtap="switchNav">火车票</view>
    <view id="1" class="{{currentTab == 1?'select':'normal'}}" bindtap="switchNav">飞机票</view>
  </view>
</view>

（2）进入到pages/train/train.wxss文件，添加导航背景灰色（# 898989），灰色背景上面是圆角矩形；添加页签选中时和默认时样式，页签选中时背景色是白色（#ffffff），文字是黑色（# 000000），页签默认文字颜色是白色（#ffffff），具体代码如下所示。

.content{
    height:500px;
    background-color: #F4F4F4; 
}
.navbg{
    width: 92%;
    background-color: #898989;
    height: 40px;
    margin: 0 auto;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    display: flex;
    flex-direction: row;
}
.select{
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #000000;
    font-size: 15px;
    margin: 0 auto;
    background-color: #ffffff;
}
.normal{
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    margin: 0 auto;
}

（3）进入到pages/train/train.js文件，定义变量currentTab默认值为0，添加switchNav事件，用来进行页签相互切换，动态改变变量currentTab的值，具体代码如下所示。

Page({
  data:{
      indicatorDots:false,
      autoplay:true,
      interval:5000,
      duration:1000,
      imgUrls:[
         '/images/haibao/1.jpg',
         '/images/haibao/2.jpg',
         '/images/haibao/3.jpg'
      ],
      currentTab:0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  switchNav:function (e) {
    var id = e.currentTarget.id;
    this.setData({ currentTab: id });
  }
})

界面效果如图20所示。

图20  页签切换效果

2. 火车票查询区域设计

（1）进入到pages/train/train.wxml文件，设计火车票查询区域，采用表单组件input文本框用来输入始发站、终点站、日期，采用switch组件用来选择高铁动车和学生票，提交按钮采用button组件，采用form组件用来提交表单，具体代码如下所示。

<view class="haibao">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:80px;">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" style="width:100%;height:80px;"></image>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="content">
  <view class="navbg">
    <view id="0" class="{{currentTab == 0?'select':'normal'}}" bindtap="switchNav">火车票</view>
    <view id="1" class="{{currentTab == 1?'select':'normal'}}" bindtap="switchNav">飞机票</view>
  </view>
  <view class="formbg">
    <form bindsubmit="formSubmit">
      <view class="station">
        <view>
          <input name="startStation" value="哈尔滨" />
        </view>
        <view>
          <image src="../../images/icon/hcp/xz.jpg" style="width:44px;height:45px;"></image>
        </view>
        <view>
          <input name="endStation" value="北京" />
        </view>
      </view>
      <view class="hr"></view>
      <view class="station">
        <view>
          <input name="date" value="2月2日" />
        </view>
        <view></view>
        <view>
          <text style="color:#5495E6;">
            <input name="week" value="2月2日" />
          </text>></view>
      </view>
      <view class="hr"></view>
      <view class="type">
        <view>高铁动车
          <switch name="gt" type="switch" />
        </view>
        <view>学生票
          <switch name="xs" type="switch" />
        </view>
      </view>
      <button class="btn" formType="submit">查询</button>
      <view class="record">
        <text>北京→佳木斯</text>
        <text>佳木斯→北京</text>
        <text>清除历史</text>
      </view>
    </form>
  </view>
  </view>

（2）进入到pages/train/train.wxss文件，添加相应的样式，具体代码如下所示。

.content{
    height:500px;
    background-color: #F4F4F4; 
}
.navbg{
    width: 92%;
    background-color: #898989;
    height: 40px;
    margin: 0 auto;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    display: flex;
    flex-direction: row;
}
.select{
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #000000;
    font-size: 15px;
    margin: 0 auto;
    background-color: #ffffff;
}
.normal{
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    margin: 0 auto;
}
.formbg{
    width: 92%;
    background-color: #ffffff;
    margin: 0 auto;
    padding-top:20px;
    padding-bottom: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.station{
    display: flex;
    flex-direction: row;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.station view{
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    width: 33%;
}
.station input{
   height: 45px;
   line-height: 45px;
}
.hr{
    height: 1px;
    background-color: #cccccc;
    opacity: 0.2;
    margin-top: 5px;
    margin-bottom: 5px;
}
.type{
    display: flex;
    flex-direction: row;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.type view{
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    width: 50%;
}
.type switch{
    margin-left:10px; 
}
.btn{
    width: 90%;
    height: 45px;
    line-height: 45px;
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    background-color: #5495E6;
    margin: 0 auto;
    margin-top:10px; 
    border-radius: 5px;
}
.record{
    text-align: center;
    margin-top:10px;
    font-size: 15px;
    color: #999999;
}
.record text{
    margin-right: 20px;
}

界面效果如图21所示。

图21  火车票查询表单

（3）在app.json文件中配置一个新的页面路径"pages/trainList/trainList"，用来设计火车票列表界面，微信小程序框架会自动建立相应trainList文件夹。

（4）在pages/train/train.js文件里，添加表单提交formSubmit事件，获得始发站、终点站、日期、星期数据值，把这些数据值带到trainList火车票列表界面，具体代码如下所示。

Page({
  data:{
      indicatorDots:false,
      autoplay:true,
      interval:5000,
      duration:1000,
      imgUrls:[
         '/images/haibao/1.jpg',
         '/images/haibao/2.jpg',
         '/images/haibao/3.jpg'
      ],
      currentTab:0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  switchNav:function (e) {
    var id = e.currentTarget.id;
    this.setData({ currentTab: id });
  },
  formSubmit:function(e){
    console.log(e);
    var startStation = e.detail.value.startStation;//始发站
    var endStation = e.detail.value.endStation;//终点站
    var date = e.detail.value.date;//日期：2月月2日
    var week = e.detail.value.week;//星期：周四
    wx.navigateTo({
      url: '../trainList/trainList?startStation=' + startStation+"&endStation="+endStation+"&date="+date+"&week="+week
    })
  }
})

在这个火车票查询界面，输入始发站和终点站，单击查询按钮，就会根据输入的内容进行相应的火车票列表的查询。