首页 > 小程序教程 > 微信小程序红色会议室作为预定页面样式制作设计教程下载

微信小程序红色会议室作为预定页面样式制作设计教程下载

上一篇 下一篇
本文给大家带来的是微信小程序红色会议室作为预定页面样式制作设计教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--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>



 
二、wxss样式文件代码如下:
/* 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;
}
三、js页面代码如下:
// 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: '暂无预定会议室'
      });
  }
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 24,447次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-25
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
响应式 微信公众平台 微信模板 自适应 微信文章 企业网站 单页式简历模板 微信图片 微信素材 html5
您可能会喜欢的其他模板