https://blog.csdn.net/qq_22718203/article/details/103505339
調(diào)接口榴鼎，返回的是一個日歷的數(shù)組伯诬，拿這些數(shù)據(jù)，去渲染日歷
<view class="tac bg_ffffff">
? ? <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}}
? ? <scroll-view :scroll-y="true" style="height:70vh">
? ? ? <view class="month-block fz28" v-for="(canlendar_item,index) in canlendar_data" :key="index">
? ? ? ? <view class="fz28 bg_eeeeee tac lh60">{{canlendar_item[0].title}}
? ? ? ? <view class="month-content">
? ? ? ? ? <view :class="[ item.valid==1 ? '':'color_999','month-day',in_date===item.date?'startActive':'',out_date===item.date? 'startActive':'',in_date
? ? ? ? ? ? ? ? :data-available="item.valid" :data-fulldate="item.date" v-for="(item,dd) in canlendar_item" :key="item.date">
? ? ? ? ? ? {{item.day ? item.day : ''}}
<block v-if="item.price>0">
? ? ? ? ? ? ? <view :class="[item.valid==1 ? '' : 'color_999','lh26 fz20']">{{RMB}}{{item.price}}
? ? ? ? ? ? <view class="fz20" style="height: 36rpx;line-height: 36rpx;">
? ? ? ? ? ? ? <block v-if="in_date===item.date">
? ? ? ? ? ? ? ? {{in_date===item.date ? '入住' : ''}}
? ? ? ? ? ? ? <block v-if="out_date===item.date">
? ? ? ? ? ? ? ? {{out_date===item.date ? '離店' : ''}}
? import httpsfrom '@/utils/common';
? const {RMB,get}=https;
? import {imgObj}from '@/utils/imgs';
export default {
props: ['canlendar_data','all_unvalid','checkdate'],
? data () {
return {
RMB:RMB,
? ? ? ? imgObj:imgObj,
? ? ? ? week_list: ['日','一','二','三','四','五','六'],
? ? ? ? in_date:'',//選擇的日期
? ? ? ? out_date:''
? ? }
},
mounted(){
let {check_date}=this.$store.state;
? ? if(check_date.check_in && check_date.check_in.length>0){
this.in_date=check_date.check_in[0]+'-'+check_date.check_in[1]+'-'+check_date.check_in[2];
? ? ? ? this.out_date=check_date.check_out[0]+'-'+check_date.check_out[1]+'-'+check_date.check_out[2]
}
},
watch:{
checkdate(newval,oldval){
let check_date=newval;
? ? ? ? if(check_date.check_in && check_date.check_in.length>0){
this.in_date=check_date.check_in[0]+'-'+check_date.check_in[1]+'-'+check_date.check_in[2];
? ? ? ? ? ? this.out_date=check_date.check_out[0]+'-'+check_date.check_out[1]+'-'+check_date.check_out[2]
}
}
},
? methods:{
getAllTime(starDay, endDay){
var arr = [];
? ? ? ? ? var dates = [];
? ? ? ? ? // 設(shè)置兩個日期UTC時間
? ? ? ? ? var db =new Date(starDay);
? ? ? ? ? var de =new Date(endDay);
? ? ? ? ? // 獲取兩個日期GTM時間
? ? ? ? ? var s = db.getTime() -24 *60 *60 *1000;
? ? ? ? ? var d = de.getTime() -24 *60 *60 *1000;
? ? ? ? ? // 獲取到兩個日期之間的每一天的毫秒數(shù)
? ? ? ? ? for (var i = s; i <= d;) {
i = i +24 *60 *60 *1000;
? ? ? ? ? ? ? arr.push(parseInt(i))
}
// 獲取每一天的時間? YY-MM-DD
? ? ? ? ? for(var jin arr ){
var time =new Date(arr[j]);
? ? ? ? ? ? ? var year = time.getFullYear(time);
? ? ? ? ? ? ? var mouth = (time.getMonth() +1)>=10?(time.getMonth() +1):('0'+(time.getMonth() +1));
? ? ? ? ? ? ? var day = time.getDate()>=10?time.getDate():('0'+time.getDate());
? ? ? ? ? ? ? var YYMMDD = year +'-' + mouth +'-' + day;
? ? ? ? ? ? ? dates.push(YYMMDD)
}
return dates
},
? ? ? chooseDate(e) {
//this.validAll();
? ? ? ? ? const available = e.currentTarget.dataset.available;
? ? ? ? ? const fullDate = e.currentTarget.dataset.fulldate;
? ? ? ? ? let inTime=this.in_date,outTime=this.out_date;
? ? ? ? ? if(available==1) {
if (inTime =='' || (new Date(fullDate) <=new Date(inTime)) || outTime !='') {//選擇開始時間
? ? ? ? ? ? ? ? ? this.in_date=fullDate;
? ? ? ? ? ? ? ? ? this.out_date='';
? ? ? ? ? ? ? }else{//選擇結(jié)束時間
? ? ? ? ? ? ? ? let arr=this.getAllTime(this.in_date,fullDate),flag=false;
? ? ? ? ? ? ? ? for(let j=0;j
if(this.all_unvalid.includes(arr[j])){
flag=true
? ? ? ? ? ? ? ? ? }
}
if(flag){//判斷中間是否巫财，有滿房
? ? ? ? ? ? ? ? ? ? wx.showToast({
title:'中間有不可選日期盗似！',
? ? ? ? ? ? ? ? ? ? ? ? icon:'none',
? ? ? ? ? ? ? ? ? ? ? ? duration:2000
? ? ? ? ? ? ? ? ? ? })
this.in_date='';
? ? ? ? ? ? ? ? ? ? this.out_date='';
? ? ? ? ? ? ? ? }else{
this.out_date=fullDate;
? ? ? ? ? ? ? ? ? ? this.$emit('select',inTime,fullDate);
? ? ? ? ? ? ? ? }
}
}else{
return false;
? ? ? ? ? }
},
? }
}
? @import "../styles/freecalendar.less";
? .lh26{line-height:26rpx;}
.range_bg{background:#FFF9F2;}
</style>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
createhotel.vue 頁面
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({
'title': year+'年'+month+'月',
? ? ? ? ? ? ? ? 'fullDate':'x'? //x是我自己定義的一個值，代表沒有日期
? ? ? ? ? ? });
? ? ? ? }
// 將空格放入數(shù)組
? ? ? ? return emptyGrids;
? ? }else{
// 否則返回一個新數(shù)組
? ? ? ? return [];
? ? }
},
fillCalendar(n) {
let canlendar_data = [];
? ? for (let i =0; i < n; i++) {
let peryear=cale_origin[i][0].date.slice(0,4),permonty=cale_origin[i][0].date.slice(5,7);
? ? ? ? let EmptyGrids =this.getEmptyGrids(peryear, permonty);
? ? ? ? let item=cale_origin[i];
? ? ? ? let brr=EmptyGrids
for(let j=0;j
let theitem=cale_origin[i][j];
? ? ? ? ? ? theitem.title=peryear+'年'+permonty+'月';
? ? ? ? ? ? theitem.day=theitem.date.slice(8);
? ? ? ? ? ? brr.push(cale_origin[i][j])
}
canlendar_data.push(brr);
? ? ? ? //console.log(canlendar_data);
? ? }
this.canlendar_data=canlendar_data;
},
