小程序酒店预定日期选择

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：/u012562411/article/details/85287537

例如图中18-19是满房那么该日期是就不能被选择 26 27 28都是不能被选中的

需求说明

1.小程序最多选择俩天日期

2.如果已经预定了则为满房

3.不能选择小于当前时间的日期

4.该流程是用户预订房间时必须是vip如果不是vip的话是先购买vip然后在根据选择的房间进行预约，

ps：如果预约的日期为18号19号20号的（选择的为俩天日期：酒店入住是住晚上；那么选择的日期就是18号和19号而选择的20号是木有关系的）那么当前房间的18号19号为满房且用户是不能够点击的20号是可以正常点击的

ps:举个列子 如果20号恰巧已经被预定出去了 （也就是说20是满房状态）那么19号就不能和21号点击了（虽然最多选择俩天但是20号满房状态所以不能够选择） 如果点击20号是可以的虽20号是满房但是 他选择的是19号晚上和20号不牵扯所以20号是可被点击

5.刚刚优化了部分功能 上图中有显示如果当25号还没有被预定出去的时候 26-27号和23-24却被预定了那么点击25号的时候26号还是可以的点击的 但是27号却不能点击 -09-18号更新

js源码

var common = require('../../common.js');var util = require('../../utils/util.js');var config = common.getconfig();var vm = null;const app = getApp()Page({data: {calendar: [],// 构建顶部日期时使用date: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],dateList: ['-09-18', '-09-19', '-09-22', '-09-23', '-09-24', '-09-26', '-09-27', '-09-28'],inTime: '',id:'',outTime: '',toDay:'', //当前日期token:'',type:0, // 1会员 0不是falg:0,equitiesList:[],sort:0,agree:0},// 日历初始化dataInit(setYear, setMonth) {// 当前时间/传入的时间var now = setYear ? new Date(setYear, setMonth) : new Date();var year = setYear || now.getFullYear();// 传入的月份已经加1var month = setMonth || now.getMonth() + 1;// 构建某日数据时使用var obj = {};// 需要遍历的日历数组数据var dateArr = [];// 需要的格子数，为当前星期数+当月天数var arrLen = 0;// 该月加1的数值，如果大于11，则为下年，月份重置为1 // 目标月1号对应的星期var startWeek = new Date(year + '-' + (month < 10 ? '0' + month : month) + '-01').getDay();//获取目标月有多少天var dayNums = new Date(year, month < 10 ? '0' + month : month, 0).getDate();var num = 0;// 计算当月需要的格子数 = 当前星期数+当月天数arrLen = startWeek * 1 + dayNums * 1;for (var i = 0; i < arrLen; i++) {if (i >= startWeek) {num = i - startWeek + 1;obj = {/** 返回值说明* isToday ： -12-27* dateNum : 27*/isToday: year + '-' + (month < 10 ? '0' + month : month) + '-' + (num < 10 ? '0' + num : num),dateNum: num,is_select:0}} else {// 填补空缺// 例如-12月第一天是星期6，则需要补6个空格obj = {};}dateArr[i] = obj;};return dateArr;},sub() { if (vm.data.type==0){vm.setData({falg:1})}else{wx.request({url: config.goods_wx_applet_buy_url,data: {token: vm.data.token,id: vm.data.id,enter_date: vm.data.inTime,leave_date: vm.data.outTime},header: {"content-type": "application/x-www-form-urlencoded"},method: 'POST',success: function (ret) {if (ret.data.status == 1) {wx.showToast({title: ret.data.msg,icon: "none",duration: 1000,})wx.hideLoading()vm.wxpay(ret);} else {wx.hideLoading()wx.showToast({title: ret.data.msg,icon: "none",duration: 1000,})}}})}},pay() {if (vm.data.agree == 0) {wx.showToast({title: '请阅读勾选唐宿服务条款',icon: 'none'})return;}var id = vm.data.equitiesList[vm.data.sort].id;if (id == 0) {wx.showToast({title: '请选择需购买的会员',})return;}wx.request({url: config.buyMember_url,header: {'content-type': 'application/json'},method: 'get',data: {token: vm.data.token,id: id},success: ret => {console.log(ret)wx.showToast({title: ret.data.msg,icon: "none",duration: 1000,})wx.hideLoading()vm.wxpays(ret);}})},wxpay(ret) {wx.requestPayment({timeStamp: ret.data.data.sortedMap['timeStamp'],nonceStr: ret.data.data.sortedMap['nonceStr'],package: ret.data.data.sortedMap['package'],signType: ret.data.data.sortedMap['signType'],paySign: ret.data.data.sortedMap['paySign'],success: function (res) {if (res) {console.log(res);if (res) {wx.showModal({title: '支付成功',content: '',})setTimeout(function () {wx.reLaunch({url: '/pages/order/myOrder/myOrder?status=-1',})}, 500)} else {setTimeout(function () {wx.reLaunch({url: '/pages/order/myOrder/myOrder?status=1',})}, 500)}}},fail: function (res) {console.log(res);console.log(123213);wx.reLaunch({url: '/pages/order/myOrder/myOrder?status=-1',})}})},wxpays(ret) {wx.requestPayment({timeStamp: ret.data.data.sortedMap['timeStamp'],nonceStr: ret.data.data.sortedMap['nonceStr'],package: ret.data.data.sortedMap['package'],signType: ret.data.data.sortedMap['signType'],paySign: ret.data.data.sortedMap['paySign'],success: function (res) {if (res) {console.log(res);if (res) {wx.showModal({title: '支付成功',content: '',})setTimeout(function () {vm.my_index();}, 500)} else {vm.my_index();}}},fail: function (res) {console.log(res);console.log(123213);vm.my_index();}})},// 点击了日期，选择入住时间或者离店时间dayClick(e) {console.log(e); var vm = this;var eTime = e.currentTarget.dataset.day; //当前点击的日期var inTime = vm.data.inTime; //入驻var outTime = vm.data.outTime; //离开if (inTime==''){ //判断入驻日期是否选择 木有选择if (vm.data.dateList.indexOf(eTime) !== -1) {//点击的日期在数组中wx.showToast({title: '当天以为预定了哦~',icon: 'none'})}else{if (inTime == '' || (new Date(eTime) <= new Date(inTime)) || outTime != '') { //默认入驻日期// 如果入住时间为空或选择的时间小于等于入住时间，则选择的时间为入住时间inTime = eTime;outTime = '';}else{//判断点击当前日期 和 入驻日期进行比较var times = vm.getDateDiff(inTime, eTime, "day");console.log(times);if (times > 2) {wx.showToast({title: '亲爱的唐宿会员:预定不能超过2晚哦~',icon: 'none'})inTime = eTime;outTime = ''}}}}else{if (inTime && outTime!=''){if (vm.data.dateList.indexOf(eTime) !== -1) {//点击的日期在数组中wx.showToast({title: '当天以预定了哦~',icon: 'none'})return;}}if (inTime == '' || (new Date(eTime) <= new Date(inTime)) || outTime != '') { //默认入驻日期if (vm.data.dateList.indexOf(eTime) !== -1) {//点击的日期在数组中wx.showToast({title: '当天以预定了哦~',icon: 'none'})}else{// 如果入住时间为空或选择的时间小于等于入住时间，则选择的时间为入住时间inTime = eTime;outTime = '';}} else {//判断点击当前日期 和 入驻日期进行比较var times = vm.getDateDiff(inTime, eTime, "day");if (times > 2) {wx.showToast({title: '亲爱的唐宿会员:预定不能超过2晚哦~',icon: 'none'})if (vm.data.dateList.indexOf(eTime) !== -1){wx.showToast({title: '当天以预定了哦~',icon: 'none'})}else{inTime = eTime;outTime = ''}}if (times == 2) {var all_time = vm.getAll(inTime, eTime);if (vm.data.dateList.indexOf(all_time[1]) !== -1) {wx.showToast({title: '预定房源包含满房，请重新选择哦~',icon: 'none'})} else {outTime = eTime;console.log(outTime);}}if (times == 1) {outTime = eTime;}}}console.log(outTime);vm.setData({inTime,outTime})},getAll:function(begin, end) {// 开始日期和结束日期if (!begin || !end) {// 去除空的可能性wx.showToast({title: '选择的时间不能为空哦~',icon:'none'})return false;}// 在时间Date的原型中定义一个format方法Date.prototype.format = function () {var s = "";// 定义一个字符串，目的，要时间格式按照我们的要求拼接var month = vm.getMonth() + 1;var day = vm.getDate();s += vm.getFullYear() + "-";s += '0'+month + "-";s += day;return s;// 得到的格式如 "-11-20" }var ab = begin.split('-');// 把日期参数分割，注意，如果以'/'连接，则分割'/'var ae = end.split('-');var db = new Date();db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);// 返回符合UTC的时间格式var de = new Date();de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);var unixDb = db.getTime();var unixDe = de.getTime();console.log(unixDb);var arr = [];for (var k = unixDb; k <= unixDe;) {arr.push(vm.getTimes(parseInt(k)));k = k + 24 * 60 * 60 * 1000;}return arr;// 返回两个日期之间的所有日期数组。},getTimes:function(nS) {var date = new Date(parseInt(nS));var year = date.getFullYear();var mon = date.getMonth() + 1;var day = date.getDate();var hours = date.getHours();var minu = date.getMinutes();var sec = date.getSeconds();return year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day) ;},getDateDiff:function (startTime, endTime, diffType) {//将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 startTime = startTime.replace(/\-/g, "/");endTime = endTime.replace(/\-/g, "/");//将计算间隔类性字符转换为小写diffType = diffType.toLowerCase();var sTime =new Date(startTime); //开始时间var eTime =new Date(endTime); //结束时间//作为除数的数字var timeType =1;switch (diffType) {case"second":timeType =1000;break;case"minute":timeType =1000*60;break;case"hour":timeType =1000*3600;break;case"day":timeType =1000*3600*24;break;default:break;}return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));},//排序选择radioChange: function (e) {console.log(e);vm.setData({sort: e.detail.value})},changese: function (e) {if (vm.data.agree == 1) {vm.setData({agree: 0})} else {vm.setData({agree: 1})}},init(){wx.request({url: config.checkHousingRecord_url,header: {'content-type': 'application/json'},data: {id: vm.data.id},method: 'get',success: ret => {console.log(ret)vm.setData({dateList: ret.data.data.dateList})}})},close() {vm.setData({falg: 0})},tk() {wx.navigateTo({url: '/pages/tk/tk',})},xy(e) {wx.navigateTo({url: '/pages/xy/xy?id=' + e.currentTarget.dataset.id,})},my_index(){wx.request({url: config.equitiesList_url,header: {'content-type': 'application/json'},methods: 'get',success: ret => {console.log(ret)vm.setData({equitiesList: ret.data.data.equitiesList})}})wx.request({url: config.my_index_url,method: 'get',header: {'content-type': 'application/json'},data: {token: vm.data.token},success: ret => {console.log(ret);if (ret) {if (ret.data.status) {vm.setData({type: ret.data.data.account.type})} else {wx.showToast({title: ret.data.msg,icon: 'none'})}}}})},onLoad(options) {vm = this;vm.setData({id: options.id,token: wx.getStorageSync('token')})//vm.init();setTimeout(function(){// 获取本月时间var nowTime = new Date();var year = nowTime.getFullYear();var month = nowTime.getMonth();var months = month + 1 > 12 ? 1 : month + 1;var toDay = nowTime.getFullYear() + '-' + (months < 10 ? '0' + months : months) + '-' + nowTime.getDate();var time = [];var timeArray = {};// 循环6个月的数据for (var i = 0; i < 6; i++) {year = month + 1 > 12 ? year + 1 : year;month = month + 1 > 12 ? 1 : month + 1;// 每个月的数据time = vm.dataInit(year, month);// 接收数据timeArray[year + '年' + (month < 10 ? '0' + month : month) + '月'] = time;};var arr = [];for (let z in timeArray) {arr.push(timeArray[z]); //属性}for (var j = 0; j < arr.length; j++) {for (var k = 0; k < arr[j].length; k++) {arr[j][k].is_select = 0;if (vm.data.dateList.indexOf(arr[j][k].isToday) !== -1) {arr[j][k].is_select = 1;} else {arr[j][k].is_select = 0}}}console.log(arr);console.log(timeArray);vm.setData({calendar: timeArray,toDay: toDay,id: options.id,token: wx.getStorageSync('token')});},500)vm.my_index();},})

html代码

<view class="page"><view class="top"><view class="reserve-time"><text>入住时间</text>{{inTime}}<text>离店时间</text>{{outTime}}</view><!-- 星期 --><view class='header'><block wx:for='{{date}}' wx:key="this*"><view class='{{item == "周六" || item == "周日" ? "weekMark" : ""}}'>{{item}}</view></block></view></view><!-- 日期 --><view class="date-content"><block wx:for='{{calendar}}' wx:for-item='calendarItem' wx:for-index='idx' wx:key="ids"><view class='date-box'><view class="title aui-text-center">{{idx}}</view><view class="content aui-font-size-26"><block wx:for='{{calendarItem}}' wx:key="index"><view wx:if="{{item.isToday < toDay}}" class='days not-select'><view>{{item.dateNum}}</view></view><view wx:else class='days {{(item.isToday > inTime && item.isToday < outTime) || item.isToday == inTime || item.isToday == outTime ? "day-select" : ""}} {{item.is_select ==1 ? "not-select" : ""}}' data-id='{{item.dateNum}}' data-day='{{item.isToday}}' bindtap="dayClick"><view class='{{item.isToday == outTime ? "day-select" : ""}}'>{{item.dateNum}}</view><view wx:if="{{item.dateNum!=undefined}}"><view class='manfang aui-font-size-20 {{(item.isToday > inTime && item.isToday < outTime) || item.isToday == inTime || item.isToday == outTime ? "day-select" : ""}}' ><block wx:if="{{item.is_select==1}}"><view class=' aui-font-size-20' style="color:#fff" wx:if="{{item.isToday == outTime}}"> 离开 </view><view class=' aui-font-size-20' wx:else> 满房 </view></block><block wx:else><view class=' aui-font-size-20' style="color:#fff" wx:if="{{item.isToday == inTime}}"> 入住 </view><view class=' aui-font-size-20' style="color:#fff" wx:if="{{item.isToday == outTime}}"> 离开 </view></block></view></view><!-- <view class='manfang aui-font-size-20' style="color:#fff" wx:if="{{item.isToday == inTime}}"> 入住 </view><view class='manfang aui-font-size-20' style="color:#fff" wx:if="{{item.isToday == outTime}}"> 离开 </view> --></view> </block></view></view></block></view><view class="aui-bar aui-bar-tab aui-padded-15 footer" id="footer" wx:if="{{inTime!='' && outTime!=''}}" bindtap="sub"><view class="aui-btn aui-btn-block aui-btn-theme aui-font-size-14">确定</view></view><view class="aui-bar aui-bar-tab aui-padded-15 footer" id="footer" wx:else><view class="aui-btn aui-btn-block aui-font-size-14" style="color:#fff">确定</view></view></view><view class="popup" wx:if="{{falg==1}}"><view class="inner aui-padded-b-5"><view class="aui-bar aui-bar-nav aui-bar-light aui-padded-r-5"><view class="aui-pull-right aui-btn" bindtap="close"><image src="/images/close2.png" mode="widthFix" style="width:40rpx;"></image></view></view><view class="aui-padded-15"><view class="aui-text-center aui-text-gray aui-padded-b-15">您还不是唐宿的会员，立即开通会员资格？</view><radio-group class="radio-group" bindchange="radioChange"><view class="aui-text-left aui-padded-t-5 aui-padded-b-5 aui-font-size-36 list"><block wx:for="{{equitiesList}}" wx:key="kei"><view class="aui-padded-b-10 aui-padded-t-10 nr">{{item.name}}<radio color="#FA8B1D" class="aui-pull-right" value="{{index}}" checked="{{sort==index?true:false}}"/><view class="aui-text-grayer aui-font-size-24 aui-padded-t-5" bindtap="xy" data-id="{{item.id}}">《{{item.name}}唐宿享有权益》</view></view></block></view></radio-group></view><view class="aui-text-gray aui-padded-l-15 aui-padded-b-10"><checkbox-group bindchange="changese" ><checkbox color="#FA8B1D" name="text" value="1" checked="{{agree==1?true:false}}" /><text class="aui-font-size-24" bindtap="tk">同意《唐宿服务条款》</text></checkbox-group></view><view class="aui-padded-15" bindtap="pay"><view class="aui-btn aui-btn-block aui-font-size-14 aui-btn-danger btn" style="background-color:#FA8B1D !important">确认支付</view></view></view></view>

css代码

@import '../aui.wxss';@import '../common.wxss';@import '../global.wxss';page{background-color: #fff;margin-bottom: 180rpx;}.top{position: fixed;z-index: 9;top: 0;left: 0;width: 100%;background-color: #fff;border-bottom: solid 1px #f5f5f5;}.reserve-time {color: #cc4c2e;line-height: 45px;}.reserve-time text {color: #666;margin: 0 10px 0 20px;}.page, .date-content {width: 100vw;/* background: #f4f4f4; */}.header{font-size: 0;padding: 0 24rpx;background: #fff;margin-top: 10rpx}.header>view{display: inline-block;width: 14.285%;color: #333;font-size: 12px;text-align: center;line-height: 30px;}.yearMonth {font-size: 14px;line-height: 35px;color: #333;padding-left: 10px;box-sizing: border-box;}.header .weekMark{color: #cc4c2e;}.content {width: 100%;background: #fff;}.date-content {padding: 0 1%;box-sizing: border-box;margin-top: 180rpx;}.title {line-height: 35px;margin: 30rpx auto;}.days {width: 14.28%;text-align: center;display: inline-block;line-height: 50rpx;height: 80rpx;position: relative;}.days .manfang{position: absolute;top: 50rpx;left: 0;width: 100%;text-align: center;color: #AAAAAA;line-height:20rpx;height: 20rpx;}.day-select {color: #fff;background: #cc4c2e;}.not-select {color: #999 !important;}.aui-btn-block{height: 80rpx;line-height: 80rpx;}.popup{position: fixed;background-color: rgb(0,0,0,0.5);top: 0;left: 0;height: 100%;width: 100%;z-index: 9999;}.popup .inner{position: absolute;top: 35%;left: 50%;width: 90%;margin-left: -45%;margin-top: -180rpx;background-color: #fff;}radio {transform:scale(0.8);}

原文链接：原文链接

主要代码来自 逍遥生-前端 这位大神提供，我只是在原作者提供的源码的基础上再次根据需求更改了部分需求.