<!--pages/booking/booking.wxml-->
<view class="container">
   <view class="userDate">
        <view class="userName iconfont icon-name">
            姓名
            <text>{{userName}}</text>
        </view>
        <view class="userPhone iconfont icon-phone">
            手机号
            <text>{{userPhone}}</text>
        </view>
        <view class="userTime iconfont icon-time">
            时间筛选
            <picker class="comboBox" bindchange="bindPickerTime" value="{{index}}" range="{{times}}">
                <view class="picker">
                  {{times[index]}}
                </view>
            </picker>
        </view>
        <view class="name iconfont icon-floor">
            预约楼层
            <picker class="comboCovers" disabled="{{picker}}" bindchange="bindPickerOrder" value="{{first}}" range="{{floor}}">
                <view class="picker {{picker == true ? 'comboRoom' : ''}}">
                  {{floor[first]}}
                </view>
            </picker>
        </view>
        <view class="name iconfont icon-seat">
            座位平面图{{}}
        </view>
    </view>
    <button type="default" bindtap="btnSubmit" hover-class="other-button-hover">{{btnSubmit}}</button>
</view>

/* pages/booking/booking.wxss */
page{
  background-color: #fff;
}
.userDate{
    padding:24rpx;
    background-color:#fff;
}
.userDate > view{
    line-height:70rpx;
    font-size:14px;
     border-bottom: 1px solid #dcdcdc;
}
.userDate > view text,picker{
    float: right;
}
.iconfont:before{
    color:#b02923;
    font-size:18px;
    padding-right: 10rpx;
    text-align: center;
    vertical-align: top;
    font-weight:bold;
    display: inline-block;
}
.picker{
    position: relative;
    padding-right:45rpx;
}
.picker:before{
    content:'';
    height:8px;
    width:8px;
    display:block;
    border:1px solid #555;
    border-left-width:0;
    border-bottom-width:0;
    position:absolute;
    top:10px;
    right:6px;
    -webkit-transform:rotate(135deg);
       -moz-transform:rotate(135deg);
            transform:rotate(135deg);
}
button{
    background-color:#b02923;
    color:#fff;
    margin-top:200rpx;
    width:80%;
}
.comboRoom{
    padding-right:0;
}
.comboRoom:before{
    content:'';
    border:none;
}

// pages/booking/booking.js
Page({
  data:{
    times: ['08:00--12:00','14:00--18:00'],
    floor:['1F', '2F', '3F'],
    index: 0,
    first: 0,
    picker:true
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    if(options.id == undefined){
      this.setData({
        picker: false
      })
    }
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
    // 读取用户信息
    var userInfo = wx.getStorageSync('userInfo');
    if(userInfo.length !== 0){
      this.setData({
        userName: userInfo.userName,
        userPhone: userInfo.userPhone,
        login: true,
        btnSubmit: '确认预定'
      })
    }else{
      this.setData({
        userName: '',
        userPhone: '',
        login: false,
        btnSubmit: '登录'
      })
    }
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  bindPickerTime: function(e) {
    this.setData({
      index: e.detail.value
    })
  },
  bindPickerOrder: function(e) {
    this.setData({
      first: e.detail.value
    })
  },
  btnSubmit:function(){
    if(this.data.login){
      console.log('预定成功')
    }else{
      wx.navigateTo({
        url: '../login/login'
      })
    }
  }
})