微信小程序开发会议室预订页面样式制作设计教程

本文给大家带来的是微信小程序开发会议室预订页面样式制作设计教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--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>

二、wxss样式文件代码如下：

/* 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;
}

三、js页面代码如下：

// 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()
  },
})

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