<!--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' }) } } }) |
模板简介:该模板名称为【微信小程序详细预订页展示样式制作设计教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。