Ci2Order.vue/App/components/CalendarCard/CalendarCard.vue

<template>
	<view class="calendar">
		<view class="calendar-grid mt-20 mb-20" style="border: none;background: white;">
			<view class="calendar-grid-title">一</view>
			<view class="calendar-grid-title">二</view>
			<view class="calendar-grid-title">三</view>
			<view class="calendar-grid-title">四</view>
			<view class="calendar-grid-title">五</view>
			<view class="calendar-grid-title" style="color: #F7913D;">六</view>
			<view class="calendar-grid-title" style="color: #F7913D;">日</view>
		</view>
		<swiper class="swiper" circular :style="{height:swiperHeight+'rpx'}" :current="current"
			@change="(e)=>changeCurrent(e.detail.current)">
			<swiper-item>
				<view class="calendar-grid">
					<!-- ,item.date==today?'nowday':'',item.date==choose?'chooseday':'' -->
					<view :class="[item.mm!=month?'notexist':'']" v-for="(item,index) in dateList" :key="index"
						@click="chooseDate(item)">
						<!-- <template v-if="!$scopedSlots.default"> -->
							<view class="content-item flex-n fac fjb" :class="[item.mm!=month?'notexist-text':'']">
								<view class="content-item-text1" :class="[item.date==today?'nowday':'']">{{item.dd}}
								</view>
								<view class="content-item-text2">{{item.IDayCn}}</view>
							</view>
						<!-- </template> -->
						<view style="min-height: 120rpx;">
							<slot :data="item"></slot>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="calendar-grid">
					<!-- ,item.date==today?'nowday':'',item.date==choose?'chooseday':'' -->
					<view :class="[item.mm!=month?'notexist':'']" v-for="(item,index) in dateList" :key="index"
						@click="chooseDate(item)">
						<!-- <template v-if="!$scopedSlots.default"> -->
							<view class="content-item flex-n fac fjb" :class="[item.mm!=month?'notexist-text':'']">
								<view class="content-item-text1" :class="[item.date==today?'nowday':'']">{{item.dd}}
								</view>
								<view class="content-item-text2">初一</view>
							</view>
						<!-- </template> -->
						<view style="min-height: 120rpx;">
							<slot :data="item"></slot>
						</view>
					</view>
				</view>
			</swiper-item>

			<swiper-item>
				<view class="calendar-grid">
					<!-- ,item.date==today?'nowday':'',item.date==choose?'chooseday':'' -->
					<view :class="[item.mm!=month?'notexist':'']" v-for="(item,index) in dateList" :key="index"
						@click="chooseDate(item)">
						<!-- <template v-if="!$scopedSlots.default"> -->
							<view class="content-item flex-n fac fjb" :class="[item.mm!=month?'notexist-text':'']">
								<view class="content-item-text1" :class="[item.date==today?'nowday':'']">{{item.dd}}
								</view>
								<view class="content-item-text2">初一</view>
							</view>
						<!-- </template> -->
						<view style="min-height: 120rpx;">
							<slot :data="item"></slot>
						</view>
					</view>
				</view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	import soloarlunar from '@/common/js/solarlunar.js'
	export default {
		name: "CalendarCard",
		data() {
			return {
				dateList: [],
				month: 1,
				current: 0,
				swiperHeight: 0,
				xPos: 0,
				today: '',
				choose: '',
				firstLoading: true,
			};
		},
		watch: {
			choose(newval, oldval) {
				this.$emit('getDate', this.getDateInfo(newval))
			},
		},
		mounted() {
			this.today = this.getDateInfo().date;
			// this.getCanlendar(new Date())
			// console.error(this.$scopedSlots)
		},
		methods: {
			//设置日期
			setDate(date){
				this.getCanlendar(new Date(date))
			},
			chooseDate(item) {
				this.$emit('click',item)
				let strList = []; //滑动数
				this.choose = item.date;
				//和日历中间比看是是这个月 还是其他
				let current = this.current;
				//只有月才有前后翻
				if (this.getDateTime(item.date) < this.getDateTime(this.dateList[15].date) && (item.mm != this
						.dateList[15].mm)) {
					current = current - 1 == -1 ? 2 : current - 1;
					console.error('往前翻------', current)
				} else if (this.getDateTime(item.date) > this.getDateTime(this.dateList[15].date) && (item.mm != this
						.dateList[15].mm)) {
					console.error('往后翻------')
					current = current + 1 == 3 ? 0 : current + 1;
				}


				this.changeCurrent(current)
			},
			getDateTime(date = '') {
				return new Date(date).getTime();
			},

			//滑动结束切换日历
			changeCurrent(current) {
				let str = '0,1,2,0'; //滑动数
				if (str.indexOf(this.current + ',' + current) > -1) {
					console.log('左滑了')
					this.getCanlendar(new Date(new Date(this.dateList[this.dateList.length - 1].date).getTime() + 24 * 60 *
						60 * 1000))
				} else if (str.split(',').reverse().join(",").indexOf(this.current + ',' + current) > -1) {
					console.log('右滑了')
					this.getCanlendar(new Date(new Date(this.dateList[0].date).getTime() - 24 * 60 * 60 * 1000))
				}
				this.current = current;
			},
			setSwiperHeight() {
				this.swiperHeight =180 * Math.ceil(this.dateList.length / 7)

			},
			getCanlendar(date) {
				console.log(date)
				let d = this.getDateInfo(date);
				this.month = d.mm;
				let nowMonthDay = 0, //当前月的天数
					dateList = []; //日期列表

				/*1,3,5,7,8,10  31天*/
				/*4,6,9,11,12 30天*/
				/*2月份28，29*/
				if (d.mm == 2) {
					if (this.isRunYear(d.yy)) {
						nowMonthDay = 29;
					} else {
						nowMonthDay = 28;
					}
				} else if ([1, 3, 5, 7, 8, 10, 12].indexOf(d.mm) > -1) {
					nowMonthDay = 31;
				} else {
					nowMonthDay = 30;
				}
				let beforeDateList = [],
					afterDateList = [],
					lastDateTime = 0,
					lastDateXX = 1,
					beginDateTime = 0,
					beginDateXX = 1;
				for (let i = 1; i <= nowMonthDay; i++) {
					let dayxx = new Date(d.yy + '-' + d.mm + '-' + i).getDay() == 0 ? 7 : new Date(d.yy + '-' + d.mm +
							'-' + i)
						.getDay();
					if (i == 1) {
						beginDateXX = dayxx;
						beginDateTime = new Date(d.yy + '-' + d.mm + '-' + i).getTime();
					}
					if (nowMonthDay == i) {
						lastDateXX = dayxx;
						lastDateTime = new Date(d.yy + '-' + d.mm + '-' + i).getTime();
					}
					dateList.push(this.getDateInfo(d.yy + '-' + d.mm + '-' + i))
				}

				//最后一天不是星期日要补
				if (lastDateXX != 7) {
					for (let i = 1; i <= 7 - lastDateXX; i++) {
						afterDateList.push(this.getDateInfo(lastDateTime + i * 24 * 60 * 60 * 1000))
					}
					dateList = dateList.concat(afterDateList);
				}
				//第一天不是星期一要不
				if (beginDateXX != 1) {
					for (let i = beginDateXX - 1; i > 0; i--) {
						beforeDateList.push(this.getDateInfo(beginDateTime - i * 24 * 60 * 60 * 1000))
					}
					dateList = beforeDateList.concat(dateList);
				}

				this.dateList = dateList;
				this.$emit('nowDateList',dateList)
				console.log(this.dateList)
				if (this.firstLoading) {
					this.choose = this.today;
					this.firstLoading = false;
				} else {
					let haschoose = false;


					for (let i in dateList) {
						if (this.choose == dateList[i].date && this.choose.substring(0, 7) == dateList[15].date.substring(
								0, 7)) {
							haschoose = true;
							break;
						}
					}
					if (!haschoose) {
						this.choose = this.dateList[15].ym + '-01';

					}


				}


				// this.$emit('getDate',this.getDateInfo(this.choose))
				//设置完数据后计算高度

				this.$nextTick(() => {
					this.setSwiperHeight();
				})

			},
			getDateInfo(date = new Date()) {
				let d = new Date(date);
			
				return {
					yy: d.getFullYear(),
					mm: d.getMonth() + 1,
					dd: d.getDate(),
					xx: d.getDay() == 0 ? 7 : d.getDay(),
					ym: d.getFullYear() + '-' + ((d.getMonth() + 1) > 9 ? (d.getMonth() + 1) : ('0' + (d.getMonth() +
						1))),
				    IDayCn:soloarlunar.solar2lunar(d.getFullYear(), d.getMonth() + 1,d.getDate()).IDayCn,
						
					date: d.getFullYear() + '-' + ((d.getMonth() + 1) > 9 ? (d.getMonth() + 1) : ('0' + (d.getMonth() +
						1))) + '-' + (d.getDate() > 9 ? d.getDate() : ('0' + d.getDate()))
				}
			},
			// 判断是不是为闰年的函数
			isRunYear(year) {
				// 如果是闰年我们返回true 否则返回false
				var flag = false;
				if (year % 4 == 0 && year % 100 !== 0 || year % 400 == 0) {
					flag = true;
				}
				return flag;
			}
		}
	}
</script>

<style scoped lang="scss">
	.calendar {
		background: white;

		.calendar-title {
			font-weight: 600;
		}

		.calendar-grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			grid-gap: 1px;
			border-top: 1px solid #E4E4E4;
			border-bottom: 1px solid #E4E4E4;
			background: #E4E4E4;

			>view {
				text-align: center;
				color: #333;
				font-size: 32rpx;
				padding:5rpx 0;
				background: white;
				overflow: hidden;
			}

			.notexist {
				background: #FAFAFA;
			}

			.content-item {
				&.notexist-text {
					color: #999;

					.content-item-text1 {
						color: #999;
					}
				}

				.content-item-text1 {
					color: #333;
				}

				.content-item-text2 {
					font-size: 12rpx;
					white-space: nowrap;
					text-align: right;
					color: #BBBBBB;
				}

				.nowday,
				.content-item-text1 {
					border-radius: 50%;
					width: 38rpx;
					height: 38rpx;
					min-width: 38rpx;
					font-size: 12rpx;
					line-height: 38rpx;
				}

				.nowday {
					color: white;
					background: #F7913D;

				}
			}


			.calendar-grid-title {
				color: #999;
				font-size: 28rpx;
				padding: 0;
			}
		}
	}
</style>