不要告訴別人！預約日歷小程序(微信小程序日歷打卡)

小程序手寫日歷

不需要調(diào)接口，想要渲染幾個月的數(shù)據(jù)，手動傳入即可根據(jù)思否 Peggy7這篇文章改了一下。{{canlendar_data[cur].year}}年{{canlendar_data[cur].month}}月{{item}}{{item.fullDate>=nowDate && item.fullDate<=maxDate &&!item.available?'滿':''}}{{checkDate===item.fullDate ? '已選' : ''}}{{item.day?item.day:''}}{{rule}}提 交import {imgObj}from '@/utils/imgs'import httpsfrom '@/utils/common'const {get,throttle}=https;let hotel_id='',timer=null,cur_year='',cur_month='',cur_day='',arr=[];export default {data () {return {imgObj:imgObj,rule:'',disable:true,//按鈕是否可點擊week_list: ['日','一','二','三','四','五','六'],checkDate:'',//選擇的日期cur:0,//第幾個月份nowDate:'',//今天maxDate:'',//最大日期canlendar_data:[]onLoad(options){hotel_id=options.hotelId;// let {spa_date}=this.$store.state;// this.checkDate=spa_date.date[0]+'-'+spa_date.date[1]+'-'+spa_date.date[2];this.getDate_();const date =new Date();cur_year = date.getFullYear();cur_month = date.getMonth() +1;cur_day = date.getDate();let month = cur_month.toString().length ===1 ?`0${cur_month}` : cur_month;let day = cur_day.toString().length ===1 ?`0${cur_day}` : cur_day;let nowDate =`${cur_year}-${month}-${day}`;this.nowDate=nowDate;onUnload(){//this.reset();clearTimeout(timer);methods: {reset(){this.rule='';this.checkDate='';goPrevMonth(){if(this.cur==0){return false}else{this.cur--goNextMonth(){if(this.cur==(this.canlendar_data.length-1)){return false}else{this.cur++chooseDate(e) {const available = e.currentTarget.dataset.available;const fullDate = e.currentTarget.dataset.fulldate;if(!available) {return false;}else{this.checkDate=fullDate;}// chooseTheDate(data,index){//this.theCheck=data;//this.theCheckIndex=index;//this.disable=false;async getDate_() {const loginResult =await get('api_v2/free/reservation',{hotel_id:hotel_idif (loginResult.code==200) {let data=loginResult.data;let newBrr=[];data.options.map((n,index)=>{let tomo =new Date();tomo.setTime(tomo.getTime() + index *24 *60 *60 *1000);//1天 以后let tomoYear=tomo.getFullYear(),tomoMonth=tomo.getMonth() +1,tomoDate=tomo.getDate();tomoMonth=tomoMonth<10?'0'+tomoMonth:tomoMonth;tomoDate=tomoDate<10?'0'+tomoDate:tomoDate;newBrr.push({val:tomoYear+'-'+tomoMonth+'-'+tomoDate,flag:nthis.maxDate=newBrr[newBrr.length-1].val;arr=newBrr;this.fillCalendar(6);this.rule=data.rule.replace(/\\n/g,"\n");this.disable=false;}submitFree:throttle(async function() {wx.showLoading({title:'',mask:true})let {checkDate}=this;let that=this;if(checkDate==''){wx.showToast({title:'請選擇預約日期',icon:'none',duration:2000})return false;}const loginResult =await get('api_v2/free/submit',{hotel_id:hotel_id,estimated_at:checkDateif (loginResult.code==200) {wx.hideLoading();let data=loginResult.data;let orderid=data.order_id;that.goOrderdetail(orderid);that.$fire.fire('alreadyFree');}goBack(){wx.navigateBack({delta:1})goOrderdetail:throttle(function(id) {wx.redirectTo({url:'/pages/orderdetailspa/index?orderId='+id// 獲取每月總天數(shù)getAllDaysOfMonth(year,month) {return new Date(year,month,0).getDate();// 獲取每月第一天是星期幾getFirstDayOfMonth(year,month) {return new Date(year, month -1, 1).getDay();// 計算本月前空了幾格getEmptyGrids(year,month) {// FirstDayOfMonth代表本月的第一天是星期幾const FirstDayOfMonth =this.getFirstDayOfMonth(year, month);let emptyGrids = [];// 有空格的情況if (FirstDayOfMonth >0) {for (let i =0; i < FirstDayOfMonth; i++) {emptyGrids.push({'num':'','fullDate':'x'? //x是我自己定義的一個值，代表沒有日期});}// 將空格放入數(shù)組return emptyGrids;}else{// 否則返回一個新數(shù)組return [];}// 計算本月日歷getDaysOfThisMonth(year,month) {let days = [];const AllDaysOfMonth =this.getAllDaysOfMonth(year, month);let fullMonth = month.toString().length ===1 ?`0${month}`:month;for (let i =0; i < AllDaysOfMonth; i++) {let day = i+1, fullDay = day,fullDate='';fullDay = fullDay.toString().length ===1 ?`0${day}` : fullDay;fullDate=`${year}-${fullMonth}-${fullDay}`;let obj={fullDay,fullDate,'available':true}for(let j=0;jif(fullDate==arr[j].val){obj.available=arr[j].flag}days.push(obj);}// 返回每個月的具體日期return days;// 循環(huán)渲染日歷// 從本月開始渲染，n代表包括本月開始連續(xù)渲染幾個月fillCalendar(n) {let year = cur_year, month = cur_month, fullMonth, canlendar_data = [];// 計算年月以及具體日歷for (let i = cur_month; i < cur_month + n; i++) {let EmptyGrids =this.getEmptyGrids(year, month);let DaysOfThisMonth =this.getDaysOfThisMonth(year, month);// 把空格和具體日歷合為一個數(shù)組let allDays = [...EmptyGrids, ...DaysOfThisMonth];// 對年份和月份的計算做一些判斷if (month >12) {year++;month =1;fullMonth ='01'canlendar_data.push({month,fullMonth,allDays });month++;}else{fullMonth = month.toString().length ===1 ?`0${month}` : month;canlendar_data.push({month,fullMonth,allDays });month++;}this.canlendar_data=canlendar_data;