https://segmentfault.com/a/1190000013502494
不需要调接口，想要渲染几个月的数据，手动传入即可
根据思否Peggy7 这篇文章改了一下。
<view class="freepop_body counter-warp">
<view class="tac bg_ffffff">
<view class="border_bot padtb20 padlr30 tac" v-if="canlendar_data&&canlendar_data.length>0">
<van-icon name="arrow-left" size="20" class="vam" @click="goPrevMonth"/>
<view class="inblock fz28 vam" style="margin: 0 50rpx">{{canlendar_data[cur].year}}年{{canlendar_data[cur].month}}月
<van-icon name="arrow" size="20" class="vam" @click="goNextMonth" />
<view class="week fz28 padtb20 border_bot" id="week">
<view :class="[idx===0||idx===6 ? 'relax':'','week-item']" v-for="(item,idx) inweek_list" :key="idx">{{item}}
<view class="month-block fz28" v-for="(canlendar_item,index) incanlendar_data" :key="index">
<block v-if="index===cur">
<view class="month-content">
<view :class="[item.fullDate>=nowDate&& item.fullDate<=maxDate&& item.available? '':'gray','month-day',checkDate===item.fullDate?'startActive':'']" @click="chooseDate" :data-available="item.fullDate>=nowDate&& item.fullDate<=maxDate&& item.available" :data-fulldate="item.fullDate" v-for="(item,dd) in canlendar_item.allDays" :key="item.fullDate">
<view class="isfull">
{{item.fullDate>=nowDate && item.fullDate<=maxDate &&!item.available?'满':''}}
<block v-if="checkDate===item.fullDate">
{{checkDate===item.fullDate ? '已选' : ''}}
{{item.day?item.day:''}}
<view style="padding: 40rpx 32rpx 0 32rpx;">
<text class="fz26">{{rule}}
<view class="fixedBar bg_f9f9f9" style="padding: 20rpx 50rpx">
<button class="globButton" style="border-radius: 10rpx" :disabled="disable" @click="submitFree">提 交
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_id
})
if (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:n
})
})
this.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:checkDate
})
if (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
})
}),
// 获取每月总天数
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是我自己定义的一个值，代表没有日期
});
}
// 将空格放入数组
return emptyGrids;
}else{
// 否则返回一个新数组
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={
day,
fullDay,
fullDate,
'available':true
}
for(let j=0;j
if(fullDate==arr[j].val){
obj.available=arr[j].flag
}
}
days.push(obj);
}
// 返回每个月的具体日期
return days;
},
// 循环渲染日历
// 从本月开始渲染，n代表包括本月开始连续渲染几个月
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);
// 把空格和具体日历合为一个数组
let allDays = [...EmptyGrids, ...DaysOfThisMonth];
// 对年份和月份的计算做一些判断
if (month >12) {
year++;
month =1;
fullMonth ='01'
canlendar_data.push({
year,
month,
fullMonth,
allDays });
month++;
}else{
fullMonth = month.toString().length ===1 ?`0${month}` : month;
canlendar_data.push({
year,
month,
fullMonth,
allDays });
month++;
}
}
this.canlendar_data=canlendar_data;
},
}
}
<style lang="less">
@import "../../../styles/freecalendar.less";
