sailun-agent/luntai/js/main.js

/* REM算法 */
var sw = window.innerWidth
document.documentElement.style.fontSize = (sw / 750) * 100 + 'px'
window.onresize = function () {
  var sw = window.innerWidth
  document.documentElement.style.fontSize = (sw / 750) * 100 + 'px'
}

Vue.component('mycalendarDay',{
	props:['data'],
	mounted() {
		console.log('mycalendarDay',this.data)
	},
	methods:{
		selectDate:function(v){
			this.$emit('selectDate',v)
		},
		addClass:function(v){
			return v.disabled + " "+ v.disabled2 + " " +v.start_date + "" + v.end_date +" " + v.active_date
		}
	},
	template:'<div>\
		<div class="day" v-for="(item2,index) in data.days" :class="addClass(item2)" @click="selectDate(item2)">{{item2.day}}</div>\
	</div>'
})

Vue.component('mycalendar',{
	props:{
		month_length:{//最长预定多少个月后
			type:Number,
			default:2
		},
		start:{
			type:String,
			default:''
		},
		end:{
			type:String,
			default:''
		}
	},
	data:function(){
		return {
			start: '', //开始时间。从当天开始。
			calendar: [],
			max_reserve_days: 0, //最长预定天数。，一个月按30天计划
			max_reserve_date: '', //最长可预定的日期。例如：2019-09-12
			select_start_ymd: '', //入住开始提交时间  例如：2019-5-8
			select_start_show: '', //入住开始显示时间  例如：05月08日
			select_end_ymd: '', //离店开始提交时间  例如：2019-5-8
			select_end_show: '', //离店开始显示时间  例如：05月08日
			select_index: 'start', //记录当前点击时间，所对应的时间是开始时间还是结束时间
			select_all_day: '',
		}
	},
	methods: {
		initDate: function() {
			var _this = this;
			// 创建时间对象
			let date = new Date();
			// 获取完整年月
			
			let fullDate = [
				date.getFullYear(),
				date.getMonth() + 1,
				date.getDate(),
				date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			];
			var select_start_ymd = _this.start;
			var select_start_ymd_show = '';
			var select_end_ymd = _this.end;
			var select_end_ymd_show = '';
			//debugger;
			if (select_start_ymd == '' || select_start_ymd == undefined || select_start_ymd == 'undefined' || _this.compareDate(
					select_start_ymd, fullDate[3]) == 3) {
				select_start_ymd = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
				select_start_ymd_show = _this.parseMonth(date.getMonth() + 1) + '月' + _this.parseDay(date.getDate()) + '日';
			}
	
			if (select_end_ymd == '' || select_end_ymd == undefined || select_end_ymd == 'undefined' || _this.compareDate(
					select_end_ymd, fullDate[3]) == 3) {
				let temp_date = new Date(date.getTime() + 86400 * 1000)
				select_end_ymd = temp_date.getFullYear() + '-' + (temp_date.getMonth() + 1) + '-' + temp_date.getDate();
				select_end_ymd_show = _this.parseMonth(temp_date.getMonth() + 1) + '月' + _this.parseDay(temp_date.getDate()) +
					'日';
			}
			//设置数据。并且保存缓存
			_this.select_start_ymd = select_start_ymd
			_this.select_end_ymd = select_end_ymd
	
			//通过月份。计划最长可预定天数和日期  ,最后一天为离店时间。所以多加一天可选择
			let max_reserve_days = _this.month_length * 30 + 1;
	
			//最大天数转换成毫秒数。再转换成时间
			let max_date = new Date(date.getTime() + max_reserve_days * 24 * 60 * 60 * 1000);
			let max_reserve_date = max_date.getFullYear() + '-' + (max_date.getMonth() + 1) + '-' + max_date.getDate() + '';
			_this.max_reserve_days = max_reserve_days
			_this.max_reserve_date = max_reserve_date
	
			//获取当前月份完整日期天数
			let cur_month_date = new Date(fullDate[0] + '-' + _this.parseMonth(fullDate[1]) + '-01')
			let cur_month = {};
			cur_month.fullYear = fullDate[0]; //  年
			cur_month.fullMonth = fullDate[1]; //月
			cur_month.dayLength = _this.getMonthDays(cur_month.fullMonth, cur_month.fullYear); //当前月份总共有多少天
			cur_month.firstDayWeek = cur_month_date.getDay(); //当前月份第一天星期几0~7
			cur_month.curDay = date.getDate(); //当前天
			cur_month.days = [];
			//初始化天数
			var item = {};
			for (let i = 1; i <= cur_month.dayLength; i++) {
				item = {
					ymd: cur_month.fullYear + '-' + cur_month.fullMonth + '-' + i,
					ymd_cn: _this.parseMonth(cur_month.fullMonth) + '月' + _this.parseDay(i) + '日',
					day: i,
					disabled: i < cur_month.curDay ? 'disabled' : '',
				};
				//开始时间
				item.start_date = _this.compareDate(_this.select_start_ymd, item.ymd) == 2 ? 'active-start' : '';
				//中间的日期
				item.active_date = (_this.compareDate(_this.select_start_ymd, item.ymd) == 3 && _this.compareDate(_this.select_end_ymd,
					item.ymd) == 1) ? 'active' : '';
				//结束时间
				item.end_date = _this.compareDate(_this.select_end_ymd, item.ymd) == 2 ? 'active-end' : '';
				//超过设置最长日期。禁止选择
				item.disabled2 = _this.compareDate(max_reserve_date, item.ymd) == 3 ? 'disabled' : '';
				cur_month['days'].push(item);
			}
	
			//前补0
			if (cur_month.firstDayWeek > 0) {
				for (let i = 0; i < cur_month.firstDayWeek; i++) {
					cur_month['days'].unshift('');
				}
			}
	
			_this.calendar.push(cur_month)
	
			var next_month_date;
			var nextfullDate = [];
			for (let i2 = 0; i2 < _this.month_length; i2++) {
				//下一个朋的天数信息
				next_month_date = new Date(fullDate[0], fullDate[1] + i2, '1');
				nextfullDate = [
					next_month_date.getFullYear(),
					next_month_date.getMonth() + 1,
				]
				var next_month = {};
				next_month.fullYear = nextfullDate[0]; //  年
				next_month.fullMonth = nextfullDate[1]; //月
				next_month.dayLength = _this.getMonthDays(next_month.fullMonth, next_month.fullYear); //当前月份总共有多少天
				next_month.firstDayWeek = next_month_date.getDay(); //当前月份第一天星期几0~6
				next_month.days = [];
				//初始化天数
				for (let i = 1; i <= next_month.dayLength; i++) {
					item = {
						ymd: next_month.fullYear + '-' + next_month.fullMonth + '-' + i,
						ymd_cn: _this.parseMonth(next_month.fullMonth) + '月' + _this.parseDay(i) + '日',
						day: i,
						active: '',
						disabled: '',
					};
					//开始时间
					item.start_date = _this.compareDate(_this.select_start_ymd, item.ymd) == 2 ? 'active-start' : '';
					//中间的日期
					item.active_date = (_this.compareDate(_this.select_start_ymd, item.ymd) == 3 && _this.compareDate(_this.select_end_ymd,
						item.ymd) == 1) ? 'active' : '';
					//结束时间
					item.end_date = _this.compareDate(_this.select_end_ymd, item.ymd) == 2 ? 'active-end' : '';
					//超过设置最长日期。禁止选择
					item.disabled2 = _this.compareDate(max_reserve_date, item.ymd) == 3 ? 'disabled' : '';
					next_month['days'].push(item);
				}
				//前补0
				if (next_month.firstDayWeek > 0) {
					for (let i = 0; i < next_month.firstDayWeek; i++) {
						next_month['days'].unshift('');
					}
				}
				_this.calendar.push(next_month)
			}
			console.log(_this.calendar);
		},
		//格式月份期
		parseMonth: function(month) {
			month = parseInt(month);
			if (month < 10) {
				month = '0' + month
			}
			return month;
		},
	
		//格式天
		parseDay: function(day) {
			day = parseInt(day);
			if (day < 10) {
				day = '0' + day
			}
			return day;
		},
		// 获取每个月的天数
		getMonthDays(m, year) {
			let days = [0, 31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			if (m != 2) {
				return days[m];
			}
			if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0 && year % 100 === 0)) {
				return 29
			} else {
				return 28
			}
		},
		compareDate(date1, date2) {
			var dateone = date1.replace(/-/g, '/');
			var datetwo = date2.replace(/-/g, '/');
			var oDate1 = new Date(dateone)
			var oDate2 = new Date(datetwo)
			if (oDate1.getTime() > oDate2.getTime()) {
				return 1; //大于
			} else if (oDate1.getTime() == oDate2.getTime()) {
				return 2; //等于
			} else {
				return 3; //小于
			}
		},
		//点击日期按钮
		selectDate: function(item) {
			var _this = this;
			let select_data = item;
			console.log(select_data)
			let select_start_ymd = _this.select_start_ymd;
			let select_end_ymd = _this.select_end_ymd;
			//如果是点击不能用的地址
			if (select_data.disabled != '') {
				return false;
			}
			if (_this.select_index == 'start') {
				select_start_ymd = select_data.ymd;
				_this.select_start_ymd = select_start_ymd;
				_this.select_start_ymd_show = select_data.ymd_cn;
				_this.select_end_ymd = '';
				_this.select_end_ymd_show = '';
				_this.select_index = 'end';
			} else if (_this.select_index == 'end') {
				let v = _this.compareDate(select_start_ymd, select_data.ymd)
				//如果选择的时间大于开始时间。则有效。否则重置开始时间
				if (v == 3) {
					_this.select_end_ymd = select_data.ymd;
					_this.select_end_ymd_show = select_data.ymd_cn;
					//将索引改为结束时间
					_this.select_index = 'start';
					//保存数据到缓存
					_this.saveDate();
				} else {
					_this.select_start_ymd = select_data.ymd;
					_this.select_start_ymd_show = select_data.ymd_cn;
					_this.select_end_ymd = '';
					_this.select_end_ymd_show = '';
					//将索引改为结束时间
					_this.select_index = 'end';
				}
	
			}
			_this.resetCalendar();
		},
		//重新计算一下日历
		resetCalendar: function() {
			let _this = this;
			let calendar = _this.calendar;
			if (calendar.length > 0) {
				for (var i in calendar) {
					if (calendar[i]['days'].length > 0) {
						for (var i2 in calendar[i]['days']) {
							if (calendar[i]['days'][i2] != '') {
								//开始时间
								calendar[i]['days'][i2]['start_date'] = _this.compareDate(_this.select_start_ymd, calendar[i]['days'][i2][
									'ymd'
								]) == 2 ? 'active-start' : '';
								//中间的日期
								calendar[i]['days'][i2]['active_date'] = (_this.compareDate(_this.select_start_ymd, calendar[i]['days'][i2]
										['ymd']) == 3 && _this.compareDate(_this.select_end_ymd, calendar[i]['days'][i2]['ymd']) == 1) ?
									'active' : '';
								//结束时间
								calendar[i]['days'][i2]['end_date'] = _this.compareDate(_this.select_end_ymd, calendar[i]['days'][i2][
									'ymd'
								]) == 2 ? 'active-end' : '';
							}
						}
					}
				}
			}
	
			_this.calendar = calendar;
		},
		//如果设置结束时间成功。保存一次当前时间。并且计算总天数。到缓存中
		saveDate: function() {
			var _this = this;
			var date1 = new Date(this.select_start_ymd.replace(/-/g, '/'));
			var date2 = new Date(this.select_end_ymd.replace(/-/g, '/'));
			//计算天数
			var days = parseInt((date2.getTime() - date1.getTime()) / 1000 / 86400);
			//保存缓存
			_this.select_all_day = days;
		},
		save:function(){
			this.$emit('comfirm',{
				startTime:this.$data.select_start_ymd,
				endTime:this.$data.select_end_ymd
			})
		},
		close:function(){
			this.$emit('close')
		}
	},
	mounted() {
		var _this = this;
		_this.$nextTick(function() {
			_this.initDate()
			console.log('calendar',_this.calendar)
		})
	},
	template:'<div><div class="myCalendar">\
			<div class="body">\
				<div class="calendar">\
					<div class="week-title">\
						<div>日</div>\
						<div>一</div>\
						<div>二</div>\
						<div>三</div>\
						<div>四</div>\
						<div>五</div>\
						<div>六</div>\
					</div>\
					<div class="box">\
						<div class="calendar-body">\
							<div v-for="(item,index) in calendar">\
								<div class="data-title">{{item.fullYear + "年" + item.fullMonth}}</div>\
								<div class="calendar-data">\
									<mycalendar-day :data="item" @selectDate="selectDate"></mycalendar-day>\
								</div>\
							</div>\
						</div>\
					</div>\
				</div>\
			</div>\
			<div class="screenbottom">\
				<div class="reset" @click="close">取消</div>\
				<div class="determine" @click="save">确定</div>\
			</div>\
		</div></div>'
})