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