<!--pages/booking/booking.wxml--> <view class="container"> <view class="header"> <view class="header-date"> 日期:<picker mode="date" bindchange="bindDateChange" value="{{date}}" start='{{startDate}}' end='2019-09-01'><text class="picker">{{date}}</text></picker> </view> <view class="header-time"> 时间:<picker disabled="{{picker}}" bindchange="bindPickerOrder" value="{{first}}" range="{{daytime}}"><text class="picker">{{daytime[first]}}</text> </picker> </view> <view class="header-qrcode iconfont icon-qrcode" bindtap="getScanning"></view> </view> <view class="feather {{region == 'seat' ? 'feather-seats' : 'feather-chosen'}}"> 类型:<view class="feather-room"> <i class="iconfont icon-huiyishi"></i> 会议室 </view> <view class="feather-seats"> <i class="iconfont icon-zuowei"></i> 座位 </view> 楼层:<view class="feather-floor choice"> <!-- <i class="icon-arrowB"></i> --> <picker disabled="{{picker}}" bindchange="bindPickerFloor" value="{{num}}" range="{{floor}}"><text class="picker">{{floor[num]}}</text> </picker> </view> </view> <view class="region"> <view class="region-module region-seat" hidden="{{region != 'seat'}}"> <block wx:for="{{regionDataSeat.seat}}" wx:key="item.id"> <view class="region-title"> {{item.title}}: <text>(只能单选当天座位)</text> </view> <view class="region-conston"> <block wx:for="{{item.children}}" wx:for-item="child" wx:for-index="cIdx" wx:key="child.id"> <view data-chosen="{{child.chosen}}" data-mark="{{item.id}}-{{child.id}}" class="{{ child.chosen ? 'barred' : ''}} {{userChosen == item.id+'-'+child.id ? 'chosen' : 'nochosen'}}" bindtap="chooseSeat">{{child.title}}</view> </block> </view> </block> </view> <view class="region-module region-room" hidden="{{region == 'seat'}}"> <view class="region-title"> 会议室: <text>(只能单选单天会议室)</text> </view> <view class="region-conston"> <block wx:for="{{regionDataRoom.room}}" wx:key="item.id"> <view data-chosen="{{item.chosen}}" data-mark="{{item.id}}" class="{{item.chosen ? 'barred' : ''}} {{userChosen == item.id ? 'chosen' : 'nochosen'}}" bindtap="chooseRoom">{{item.title}}</view> </block> </view> </view> <view class="region-title">楼层平面图:</view> <view class="drawings"> <image src="./../../images/ico_ditu.png"></image> </view> </view> <button type="default" class="button-Submit" bindtap="submitBtn" data-login="{{login}}" hover-class="other-button-hover">提交预定</button> </view> |
/* pages/booking/booking.wxss */ page{ background-color:#fff; } .header{ background-color: #b02923; position: fixed; top: 0; left: 0; width: 100%; height: 88rpx; line-height: 88rpx; z-index:100; } .header > view{ display: inline-block; padding: 0 14rpx; } .header-date,.header-time{ background-color: #fff; border-radius: 4px; font-size: 28rpx; color: #b02923; height: 52rpx; line-height: 52rpx; } .header-time{ margin-left: 30rpx; } .header-date{ margin-left: 20rpx; } .header-qrcode{ position: absolute; top: 50%; right: 20rpx; margin-top: -48rpx; float: right; font-size: 50rpx; color:#fff; } .feather{ padding: 20rpx; margin-top: 88rpx; line-height: 80rpx; font-size: 28rpx; background-color: #fff; border-bottom: 1px solid #eee; } .feather > view{ display: inline-block; padding: 0 20rpx; margin-right: 24rpx; border-radius: 4px; } .feather image{ width: 36rpx; height: 36rpx; } .feather-seats .feather-room,.feather-chosen .feather-seats,.barred{ background-color: #c6c6c6; color: #999; } .feather-seats .feather-seats,.feather-chosen .feather-room,.chosen,.feather-floor.chosen{ background-color: #b02923; color: #fff; position: relative; } .chosen:after,.feather-seats .feather-seats:after,.feather-chosen .feather-room:after{ content: ''; background-image: url('./../../images/icon/ico_gouxuan.png'); background-size: 100%; width: 26rpx; height: 26rpx; position: absolute; bottom: 0; right: 0; } .feather-room .iconfont{ width:40rpx; height: 40rpx; margin-right: 4rpx; font-size: 36rpx; } .feather-floor.choice{ border: 1px solid #d1d1d1; color: #b02923; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* .feather-floor.chosen{ background-color: #b02923; color:#fff; } */ .region { background-color: #fff; } .region-conston{ overflow: hidden; border-bottom: 1px solid #eee; } .region-conston > view{ float: left; text-align: center; border-radius: 4px; background-color:#fff; color:#000; border: 1px solid #e1e1e1; font-size:30rpx; margin-bottom: 20rpx; margin-left: 20rpx; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .region-title{ font-size: 28rpx; padding: 20rpx; line-height:40rpx; } .region-title text{ font-size: 26rpx; color: #999; } .region-conston .chosen{ background-color:#b02923; color:#fff; border:none; } .region-conston .barred{ background-color:#c6c6c6; color:#999; border:none; } .drawings{ margin: 20rpx; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .drawings image{ width:100%; height: 658rpx; } .button-Submit{ margin: 70rpx auto; } /* 会议室 */ .region-room .region-conston> view{ width: 25%; height: 100rpx; line-height: 100rpx; } .region-seat .region-conston> view{ width: 16.666666667%; height: 70rpx; line-height: 70rpx; } picker{ display: inline-block; } .picker{ position: relative; display: inline-block; padding-right:36rpx; font-size:30rpx; } .picker:before { content:''; height: 8px; width: 8px; display: block; border: 1px solid #b02923; border-left-width: 0; border-bottom-width: 0; position: absolute; top: 6px; right: 8rpx; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } .feather-floor .picker::before{ top:24rpx; } |
// pages/booking/booking.js const app = getApp(); const util = require('../../utils/util.js'); const dataRoom = { room:[{ id:"10001", title:"会议室A", chosen:true, },{ id:"10002", title:"会议室B", chosen:false, },{ id:"10003", title:"会议室C", chosen:false, },{ id:"10004", title:"会议室D", chosen:true, },{ id:"10005", title:"会议室E", chosen:false, },{ id:"10006", title:"会议室F", chosen:false, }] }; const dataSeat = { seat:[{ id:"10001", title:"A区", children:[{ id:"20001", title:"01", chosen:true, },{ id:"20002", title:"02", chosen:false, },{ id:"20003", title:"03", chosen:true, },{ id:"20004", title:"04", chosen:true, }] },{ id:"10002", title:"B区", children:[{ id:"20001", title:"01", chosen:true, },{ id:"20002", title:"02", chosen:false, },{ id:"20003", title:"03", chosen:false, },{ id:"20004", title:"04", chosen:true, },{ id:"20005", title:"05", chosen:true, }] }] } Page({ data:{ region: 'seat', chosens: false, options: false, daytime:['上午', '下午'], floor:['1F', '2F', '3F'], first: 0, num: 0, regionDataSeat:[], regionDataRoom:[], userChosen: '' }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 this.setData({ region: options.type, date:util.formatTime(new Date) }); if(options.type == 'seat'){ var seats = dataSeat seats['userChosen'] = '' this.setData({ regionDataSeat: seats }); }else{ var rooms = dataRoom rooms['userChosen'] = '' this.setData({ regionDataRoom: rooms }); }; }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, chooseSeat:function(res){ var chosen = res.currentTarget.dataset.chosen; var mark = res.currentTarget.dataset.mark; if(!chosen){ var seats = this.data.regionDataSeat; this.setData({ userChosen: mark, regionDataSeat: seats }); }; }, chooseRoom:function(res){ var chosen = res.currentTarget.dataset.chosen; var mark = res.currentTarget.dataset.mark; if(!chosen){ var rooms = this.data.regionDataRoom; this.setData({ userChosen: mark, regionDataRoom: rooms }); }; }, bindDateChange: function(e) { // 日期 this.setData({ date: e.detail.value }); }, bindPickerOrder: function(e) { // 时间 this.setData({ first: e.detail.value }); }, bindPickerFloor: function(e){ // 楼层 this.setData({ num: e.detail.value }); }, submitBtn: function(e){ let title,type = this.data.region if(this.data.userChosen == ''){ if(type == 'seat'){ title = '请选择座位'; }else{ title = '请选择会议室'; }; wx.showToast({ title: title, icon: 'loading', duration: 1000 }); return false }else{ wx.showToast({ title: '提交预定', icon: 'loading', duration: 10000 }); }; setTimeout(function(){ wx.hideToast(); wx.navigateTo({ url: '../booking-detail/booking-detail?type='+type }); },2000); }, getScanning: function () { app.getScanning() }, }) |
模板简介:该模板名称为【微信小程序开发会议室预订页面样式制作设计教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。