<!--pages/orders/orders.wxml--> <view class="ordersTab"> <text bindtap="tabLeft" style="color:{{colLeft}};">座位</text> <text bindtap="tabRight" style="color:{{colRight}};">会议室</text> <view class="tabCalled" style="left:{{Left}}"></view> </view> <view style="height:90rpx;"></view> <view class="orderContent" hidden="{{hidden}}"> <!-- 会议室 --> <block wx:for="{{room}}" wx:key="item.id"> <view wx:if="{{item.complate === true}}" class="ordersRoom" hidden="{{ordersRoom}}" > <view class="roomLeft"> <text>预定时间: {{item.date}}</text> <text>楼层: {{item.floor}}</text> <text>会议室门号: {{item.roomNo}}</text> </view> <view class="roomBut" hidden="{{ordersBut}}"> <text bindtap="defaultLogin" > 归还 </text> <text bindtap="defaultLogin" > 取消 </text> </view> </view> <!-- 已完成 --> <view wx:elif="{{item.complate !== true}}" class="ordersRoom" hidden="{{ordersRoom}}" style="color:#999;"> <view class="roomLeft"> <text>预定时间: {{item.date}}</text> <text>楼层: {{item.floor}}</text> <text>会议室门号: {{item.roomNo}}</text> </view> </view> </block> <!-- 座位号 --> <block wx:for="{{seat}}" wx:key="item.id"> <view wx:if="{{item.complate === true}}" class="ordersSeat" hidden="{{ordersSeat}}" style="color:{{orderColor}}"> <view class="seatLeft"> <!-- <text>预定时间: {{item.date}}</text> --> <text>楼层: {{item.floor}}</text> <text>门牌号: {{item.roomNo}}</text> <text>座位号: {{item.seatNo}}</text> </view> <view class="seatBut" hidden="{{ordersBut}}"> <text bindtap="defaultLogin" > 归还 </text> <text bindtap="defaultLogin" > 取消 </text> </view> </view> <!-- 已完成 --> <view wx:elif="{{item.complate !== true}}" class="ordersSeat" hidden="{{ordersSeat}}" style="color:#999"> <view class="seatLeft"> <!-- <text>预定时间: {{item.date}}</text> --> <text>楼层: {{item.floor}}</text> <text>门牌号: {{item.roomNo}}</text> <text>座位号: {{item.seatNo}}</text> </view> </view> </block> </view> <view class="ordersTitle" hidden="{{prompt}}">{{ordersTitle}}</view> |
/* pages/orders/orders.wxss */ .ordersTab{ position: fixed; top:0; font-size: 34rpx; width: 100%; height: 80rpx; background-color: #fff; line-height: 80rpx; z-index:10; margin-bottom: 90rpx; } .ordersTab wx-text{ text-align:center; width:50%; display:block; float:left; } .ordersRoom{ margin-bottom: 30rpx; background-color: #fff; padding:36rpx; height:200rpx; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } .roomLeft{ float:left; } .roomLeft wx-text{ display:block; line-height:46rpx; } .roomBut{ float:right; } .ordersSeat{ background-color: #fff; padding:36rpx; height:200rpx; margin-bottom:30rpx; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } .seatLeft{ float:left; } .seatLeft wx-text{ display:block; line-height:46rpx; } .seatBut{ float:right; } .roomBut wx-text { display:block; box-sizing:border-box; font-size:13px; text-align:center; text-decoration:none; line-height:60rpx; border-radius:5px; -webkit-tap-highlight-color:transparent; overflow:hidden; color:#fff; background-color:#b02923; width:140rpx; height:60rpx; border:1px solid #b02923; margin-bottom:14rpx; } .seatBut wx-text { display:block; box-sizing:border-box; font-size:13px; text-align:center; text-decoration:none; line-height:60rpx; border-radius:5px; -webkit-tap-highlight-color:transparent; overflow:hidden; color:#fff; background-color:#b02923; width:140rpx; height:60rpx; border:1px solid #b02923; margin-bottom:14rpx; } .tabCalled{ width:40%; height:2px; background-color:#b02923; position: absolute; bottom:0; -webkit-transition:left .35s; /* Safari */ transition:left .35s; } .ordersTitle{ text-align: center; margin-top: 200rpx; font-size:16px; color:#666; } |
// pages/orders/orders.js Page({ data:{ Left:'5%', hidden: false, prompt: true, ordersTitle: '暂无预定座位', room:[{ date:'2017-02-07 10:00-12:00', floor:'4F', roomNo:'4022', complate:true },{ date:'2017-02-07 14:00-16:00', floor:'1F', roomNo:'1011', complate:true },{ date:'2017-02-05 14:00-16:00', floor:'17F', roomNo:'1736', complate:false }], seat:[{ date:'2017-02-04 10:00-12:00', floor:'1F', roomNo:'B', seatNo:'A1', complate:true },{ date:'2017-02-07 09:30-10:45', floor:'5F', roomNo:'A', seatNo:'B1', complate:true },{ date:'2017-02-08 14:00-16:00', floor:'1F', roomNo:'A', seatNo:'A11', complate:false },{ date:'2017-02-09 10:00-11:30', floor:'3F', roomNo:'F', seatNo:'A13', complate:false }] }, onLoad:function(){ // 页面初始化 options为页面跳转所带来的参数 this.setData({ ordersRoom:true, ordersSeat:false, colLeft:'#b02923', borLeft:'3px solid #b02923' }); }, onShow: function(){ const userInfo = wx.getStorageSync('userInfo'); console.log(userInfo) if(userInfo.length === 0){ this.setData({ hidden: true, prompt: false }) }else{ this.setData({ hidden: false, prompt: true }) } }, tabLeft:function(){ // 点击座位 this.setData({ ordersRoom:true, ordersSeat:false, colLeft:'#b02923', colRight:'', borRight:'', Left:'5%', ordersTitle: '暂无预定座位' }); }, tabRight:function(){ // 点击会议室 this.setData({ ordersRoom:false, ordersSeat:true, colLeft:'', borLeft:'', colRight:'#b02923', Left:'55%', ordersTitle: '暂无预定会议室' }); } }) |
模板简介:该模板名称为【微信小程序红色会议室作为预定页面样式制作设计教程下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。