baozhida-figure-platter/pages/index/components/calendar.vue

<template>
	<view class="calendar">
		<view class="content" @tap.stop>
			<view class="head_calendar">
				<view>取消</view>
				<view class="card_tag">
					<view class="tab_item center_in" :class="current == item.type ? 'activate_tab' :''"
						v-for="(item,index) in tagData" :key="index" @click="getTab(item)">{{item.title}}</view>
				</view>
				<view class="today_card">
					<view class="today_box" v-if="current != 'four'">今</view>
				</view>
			</view>
			<view class="title" v-if="current == 'solar'">
				<view class="left">
					{{showData}}
				</view>
				<view class="sure" @click="sure">
					确定
				</view>
			</view>
			<view class="card_time_tag" v-if="current != 'four'">
				<view class="time_tag">年</view>
				<view class="time_tag">月</view>
				<view class="time_tag">日</view>
				<view class="time_tag">时</view>
				<view class="time_tag">分</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="selectValue" @change="bindChange"
				v-if="current != 'four'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column v-if="isHourShow">
					<view class="item" v-for="(item,index) in lunarHour" :key="index">
						{{isActive ? item.solar : item.label}}
					</view>
				</picker-view-column>
				<picker-view-column v-if="isHourShow">
					<view class="item" v-for="(item,index) in minuteHour" :key="index">
						{{isActive ? item.solar : item.label}}
					</view>
				</picker-view-column>
			</picker-view>
			<view class="card_time_tag" v-if="current == 'four'">
				<view class="time_tag">年柱</view>
				<view class="time_tag">月柱</view>
				<view class="time_tag">日柱</view>
				<view class="time_tag">时柱</view>
			</view>
			<view class="card_four_box" v-if="current == 'four'">
				<view class="card_prin">
					<view class="cipal_box_flex" v-for="(item1,index) in principal" :key="index"
						@click="getCloudy(item1,index)">
						<view class="cipal_box" :class="getfour(item1,index) ? 'activate_cipal' : ''">{{item1}}
						</view>
					</view>
				</view>
				<view class="range_hint">查找范围：1801-2099年</view>
			</view>
			<view class="saving_time">
				<span class="iconfont icon-yiwen"></span>
				<span class="saving_title">夏令时</span>
				<u-switch v-model="summer" activeColor="#b2955d" inactiveColor="#e9e9eb" size="18"></u-switch>
			</view>
			<view class="confirm_title">确定</view>
			<!-- <view class="bottom" v-if="isSwitch">
				<view class="switch">
					<view class="left" :class="{active:isActive}" @click="switchBtn('solar')">
						公历
					</view>
					<view class="right" :class="{active:!isActive}" @click="switchBtn('lunar')">
						农历
					</view>
					<view class="bg" :class="type"></view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import conversion from "./calendar.js"
	import lunarHour from "./information.js"
	import minuteHour from "./minute.js"
	export default {
		name: "calendar",
		data() {
			return {
				oldYear: 1950, //最大年份
				type: "solar", //lunar农历，solar公历
				isActive: true, //true公历
				showData: "", //显示数据
				// showMask:false,
				checked: true,
				years: [],
				months: [],
				days: [],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				lunarHour: [],
				minuteHour: [],
				date: "",
				hour: "",
				leap_month: 0, //1为闰月0为非闰月
				sureYear: "1990", //默认弹出显示年份
				sureMonth: "06", //默认弹出显示月份
				selectValue: [40, 9, 9, 11, 31], //默认弹出选择的状态1990-06-10 10
				showYear: '',
				showMonth: '',
				nextFinally: true,
				tagData: [{
					type: 'solar',
					title: '公历',
				}, {
					type: 'lunar',
					title: '农历',
				}, {
					type: 'four',
					title: '四柱',
				}],
				summer: false,
			};
		},
		props: {
			showMask: {
				type: Boolean,
				default: false
			},
			isHourShow: {
				type: Boolean,
				default: true
			},
			isSwitch: {
				type: Boolean,
				default: true
			},
			current: {
				type: [String, Number],
				default: 'solar'
			},
			// 主柱
			principal: {
				type: Array,
				default: []
			},
			// 副柱
			subpost: {
				type: Array,
				default: []
			},
		},
		components: {

		},
		created() {
			this.getTime();
		},
		methods: {
			pickerHS() {
				this.$emit("sure", false);
			},
			// 提交
			sure() {
				if (!this.nextFinally) {
					this.$u.toast("别着急，正在选时间");
					return false;
				}
				let data = {
					"text": this.showData, //显示数据
					"type": this.type,
					"brithday": {
						"brithday[date]": this.date,
						"brithday[hour]": this.hour,
						"brithday[type]": this.type,
						// "brithday[leap_month]":this.leap_month,
					},
					"newBirthday": {
						brithday: {
							date: this.date,
							hour: this.hour,
							type: this.type,
						}
					},
					"date": this.date,
					"hour": this.hour || 0,
					"year": this.showYear,
					"month": this.coverTo(Number(this.showMonth)),
					"day": this.coverTo(this.selectValue[2] + 1),
				}
				if (this.type == 'lunar') {
					data.brithday["brithday[leap_month]"] = this.leap_month;
					data.newBirthday.brithday.leap_month = this.leap_month;
					data.leap_month = this.leap_month;
				}
				this.$emit("sure", data);
				this.nextFinally = true;
			},
			//进来获取公历的1990-02-10 10,初始化
			getTime() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				this.years = [];
				this.days = [];
				this.months = [];
				for (let i = this.oldYear; i <= date.getFullYear(); i++) {
					if (this.isActive) {
						this.years.push(i);
					} else {
						this.years.push(i);
						// this.years.push(conversion.toChinaYear(i));
					}
				}
				if (this.isActive) {
					this.getsolarMonthDays(this.sureYear, this.sureMonth, this.selectValue);
				} else {
					this.getlunarMonthDays(this.sureYear, this.sureMonth, this.selectValue);
				}
				this.lunarHour = lunarHour.lunarHour;
				this.minuteHour = minuteHour.minuteHour
			},
			bindChange: function(e) {
				const val = e.detail.value;
				let year = val[0] + this.oldYear,
					month = val[1] + 1,
					day = val[2] + 1;
				this.days = [];
				this.months = [];
				this.selectValue = e.detail.value;
				this.nextFinally = false;
				//公历返回每个月天数
				if (this.isActive) {
					this.getsolarMonthDays(year, month, val);
				} else {
					this.getlunarMonthDays(year, month, val);
				}
			},
			// D=>DD,M=>MM,日，月转换 1=>01
			coverTo(num) {
				return num < 10 ? ("0" + num) : num
			},
			// 获取公历的月份和天数
			getsolarMonthDays(year, month, val) {
				// console.log(val, "下标")
				function padZero(month) {
					return month < 10 ? '0' + month : month.toString();
				}
				for (let i = 1; i <= 12; i++) {
					// this.months.push(i + "月");
					this.months.push(padZero(i));
				}
				for (let i = 1; i <= conversion.solarDays(year, month); i++) {
					// this.days.push(i + "日");
					this.days.push(padZero(i));
				}
				this.leap_month = 0;
				this.date = `${val[0]+this.oldYear}-${this.coverTo(val[1]+1)}-${this.coverTo(val[2]+1)}`;
				this.hour = val[3] - 1;
				let showHour = this.isHourShow ? `${val[3] != 0 ? (val[3] - 1) + '时' : '' }` : '';
				let minute = this.isHourShow ? `${val[4] != 0 ? (val[4] - 1) + '分' : '' }` : '';
				this.showData =
					`公历 ${val[0]+this.oldYear}年${this.coverTo(val[1]+1)}月${this.coverTo(val[2]+1)}日 ${showHour}${minute}`;
				this.showYear = `${val[0]+this.oldYear}`;
				this.showMonth = `${val[1]+1}`;
				setTimeout(e => {
					this.nextFinally = true;
				}, 200)
			},
			// 获取农历的月份和天数
			getlunarMonthDays(year, month, e) {
				console.log(e, "下标")
				let leap_month = conversion.leapMonth(year);
				//返回农历 闰月没有就返回0
				for (let i = 1; i <= 12; i++) {
					this.months.push(conversion.toChinaMonth(i));
					if (i == leap_month) {
						this.months.push("闰" + conversion.toChinaMonth(i));
					}
				}
				// 农历返回天数
				// **leapMonth 返回闰月 conversion.leapMonth(year)
				// **monthDays 返回非闰月的天数
				// **leapDays 返回闰月的天数
				if (conversion.leapMonth(year) != 0 && (conversion.leapMonth(year) == month || (month - 1) == conversion
						.leapMonth(year))) {
					for (let i = 1; i <= conversion.leapDays(year, conversion.leapMonth(year)); i++) {
						this.days.push(conversion.toChinaDay(i));
					}
				} else {
					let lunarMonth = '';
					if (conversion.leapMonth(year)) {
						lunarMonth = month < conversion.leapMonth(year) ? month : (month - 1);
					} else {
						lunarMonth = month;
					}
					for (let i = 1; i <= conversion.monthDays(year, lunarMonth); i++) {
						this.days.push(conversion.toChinaDay(i));
					}
				}
				if (e) {
					const val = e;
					let year = val[0] + this.oldYear,
						month = val[1],
						day = val[2],
						hour = val[3] ? val[3] : 0,
						m = "",
						d = "",
						h = "";
					m = this.months[month];
					d = this.days[day]
					h = this.lunarHour[hour].value + "时";
					this.leap_month = (month == leap_month && leap_month != 0) ? 1 : 0;
					let lunarToMonth = this.coverTo(leap_month != 0 ? ((month + 1) <= leap_month ? (month + 1) : month) : (
						month + 1));
					console.log(lunarToMonth, "获取当前月份")
					this.date = `${year}-${lunarToMonth}-${this.coverTo(day+1)}`;
					this.hour = hour - 1;
					let showHour = this.isHourShow ? `${h}` : '';
					this.showData = `农历 ${conversion.toChinaYear(year)}年${m}${d} ${showHour == '24时' ? '' : showHour}`;
					this.showYear = year;
					this.showMonth = lunarToMonth;
				}
				setTimeout(e => {
					this.nextFinally = true;
				}, 150)
			},
			// 切换公历<=>农历 回显以及切换 this.$refs.yourname.switchBtb(type,data),type:"lunar" or "solar", data:{date:"1992-02-10",hour:3,leap_month:"0",type:"lunar"}
			switchBtn(type, data) {
				console.log(type, data, "切换")
				if (data) {
					// console.log(data,"回显")
					// 回显
					let year = this.$utils.formatDate(data.date).YYYY;
					let leapMonth = type == 'solar' ? 0 : conversion.leapMonth(year),
						month = this.$utils.formatDate(data.date).MM,
						day = this.$utils.formatDate(data.date).D,
						y = year - this.oldYear,
						// m = leapMonth != 0 ? (Number(month)-1 <= leapMonth ? Number(month) - 1 : Number(month)) : Number(month) - 1,
						m = data.leap_month == 1 ? Number(month) : (leapMonth != 0 ? (Number(month) <= leapMonth ? Number(
							month) - 1 : Number(month)) : Number(month) - 1),
						d = day - 1,
						h = Number(data.hour) + 1,
						s = Number(data.minute) + 1;
					// console.log(leapMonth,"是否闰月",m)
					this.leap_month = data.leap_month ? 1 : 0;
					this.type = data.type;
					this.sureYear = year; //默认弹出显示年份
					this.sureMonth = month; //默认弹出显示月份
					// console.log(m,"回显月份")
					this.selectValue = [y, m, d, h, s]; //默认弹出选择的状态1990-06-10 10
					// console.log(m,Number(month),leapMonth)
					// console.log(this.sureYear,this.sureMonth,this.selectValue,"回显")
				} else {
					// 农历公历互相联动切换
					if (this.type == type) {
						return false;
					}
					if (type == 'lunar') { //公历切换为农历
						let solarYear = this.selectValue[0] + this.oldYear; //公历年份
						let leapMonth = conversion.leapMonth(solarYear);
						let solarMonth = this.selectValue[1] + 1, //公历年月份
							solarDay = this.selectValue[2] + 1, //公历年日份
							hour = this.selectValue[3],
							minute = this.selectValue[4];
						let lunarDate = conversion.solar2lunar(solarYear, solarMonth, solarDay);
						this.sureYear = lunarDate.lYear; //默认弹出显示年份
						this.sureMonth = lunarDate.lMonth; //默认弹出显示月份
						this.leap_month = leapMonth != 0 ? 1 : 0;
						let y = lunarDate.lYear - this.oldYear,
							m = this.leap_month == 0 ? lunarDate.lMonth - 1 : (this.selectValue[1] < leapMonth ? lunarDate
								.lMonth - 1 : lunarDate.lMonth),
							d = lunarDate.lDay - 1;
						console.log(this.leap_month, "显示", leapMonth, lunarDate.lMonth, this.selectValue[1])
						this.selectValue = [y, m, d, hour, minute]; //默认弹出选择的状态1990-06-10 10
						// console.log(this.sureYear,this.sureMonth,this.selectValue,"回显农历")
					} else { //农历切换为公历
						let lunarYear = this.selectValue[0] + this.oldYear; //农历年份
						let leapMonth = conversion.leapMonth(lunarYear); //一年中的几月份是闰月
						let lunarMonth = leapMonth == 0 ? this.selectValue[1] + 1 : ((this.selectValue[1] + 1) <=
								leapMonth ? (this.selectValue[1] + 1) : this.selectValue[1]), //农历年月份
							lunarDay = this.selectValue[2] + 1, //农历年日份
							hour = this.selectValue[3],
							minute = this.selectValue[4];
						// console.log(this.selectValue[1],"月份index")
						let lunarDate = conversion.lunar2solar(lunarYear, lunarMonth, lunarDay, (leapMonth == this
							.selectValue[1] ? true : false));
						// console.log(lunarDate,"回显公历全部数据")
						this.sureYear = lunarDate.cYear; //默认弹出显示年份
						this.sureMonth = lunarDate.cMonth; //默认弹出显示月份
						this.leap_month = leapMonth != 0 ? 1 : 0;
						let y = lunarDate.cYear - this.oldYear,
							m = lunarDate.cMonth - 1,
							d = lunarDate.cDay - 1;
						this.selectValue = [y, m, d, hour, minute]; //默认弹出选择的状态1990-06-10 10
						// console.log(this.sureYear,this.sureMonth,this.selectValue,"回显公历")
					}
				}
				this.isActive = type == 'solar' ? true : false;
				this.type = type;
				this.getTime();
			},
			getTab(event) {
				if (event.type == 'solar') {
					this.switchBtn('solar')
				} else if (event.type == 'lunar') {
					this.switchBtn('lunar')
				}
				this.$emit('change', event)
			},
			getfour(event, index) {
				if (this.subpost[index]) {
					return true
				} else {
					return false
				}
			},
			getCloudy(event, index) {
				this.$emit('cloudy', event, index)
			},
		}
	}
</script>

<style lang="scss">
	.card_time_tag {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 10rpx;
		border-top: 1rpx solid #f5f5f5;
	}

	.time_tag {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #82848a;
		flex: 1;
	}

	.u-mask-zoom {
		transform: scale(1, 1);
	}

	.calendar {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 100%;
		margin-top: 20rpx;

		.content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			// height: 100%;
			background-color: #fff;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;

			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 76rpx;
				width: 100%;
				background-color: #f3f4f6;
				justify-content: space-between;
				border-radius: 40rpx;
				margin-bottom: 20rpx;

				.left {
					color: #666666;
					font-size: 30rpx;
					padding-left: 30rpx;
				}

				.sure {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 100%;
					background-color: #c4c4c4;
					color: #fff;
					font-size: 30rpx;
					border-radius: 50rpx;
				}
			}

			picker-view {
				width: 100%;
				height: 480rpx;
				// margin-top: 20rpx;

				/deep/.item {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
				}

				.uni-picker-view-wrapper {
					uni-picker-view-column {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #333333;
						font-size: 32rpx;
						font-weight: bold;

						.uni-picker-view-group {
							.uni-picker-view-content {
								text-align: center;
								line-height: 110rpx;

								.item {
									display: flex;
									align-items: center;
									justify-content: center;
									color: #333333;
									font-size: 32rpx;
									font-weight: bold;
								}
							}
						}
					}
				}

				/deep/.uni-picker-view-indicator {
					// text-align: center;
					// line-height: 110rpx;
				}
			}

			.bottom {
				height: 110rpx;
				width: calc(100% - 31rpx);
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 31rpx;
				background-color: #FFFFFF;

				.switch {
					background-color: #E6E6E6;
					width: 180rpx;
					height: 70rpx;
					display: flex;
					flex-direction: row;
					border-radius: 35rpx;
					justify-content: space-around;
					align-items: center;
					position: relative;

					.left {
						position: absolute;
						z-index: 1;
						left: 25%;
						font-size: 28rpx;
						transform: translateX(-50%);
					}

					.right {
						color: #333333;
						font-size: 28rpx;
						position: absolute;
						right: 0;
						transform: translateX(-25%);
						color: #333333;
						z-index: 1;
					}

					.bg {
						background-color: #EB344A;
						color: #333333;
						height: 70rpx;
						border-radius: 40rpx;
						width: 90rpx;
						position: absolute;
						// right: 0;
						top: 0;
						z-index: 0;

					}

					.active {
						color: #FFFFFF;
					}

					.lunar {
						left: 90rpx;
						animation: switchsolar 500ms;
					}

					@keyframes switchsolar {
						0% {
							left: 0;
						}

						100% {
							left: 90rpx;
						}
					}

					.solar {
						left: 0;
						animation: switchlunar 500ms;
					}

					@keyframes switchlunar {
						0% {
							left: 90rpx;
						}

						100% {
							left: 0;
						}
					}
				}
			}
		}
	}

	.head_calendar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.card_tag {
		display: flex;
		width: fit-content;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		border: 1rpx solid #e9e9e9;
		border-radius: 40rpx;
	}

	.tab_item {
		font-size: 30rpx;
		min-width: 140rpx;
		height: 64rpx;
		color: rgba(177, 177, 177, 1);
	}

	.activate_tab {
		color: #d5bd9d;
		background-color: #010101;
		border-radius: 40rpx;
	}

	.today_card {
		width: 80rpx;
	}

	.today_box {
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 64rpx;
		color: #d5bd9d;
		background-color: #010101;
		border-radius: 40rpx;
	}

	.range_hint {
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		margin-top: 30rpx;
	}

	.saving_time {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.icon-yiwen {
		color: #82848a;
		font-size: 40rpx;
	}

	.saving_title {
		color: #82848a;
		font-size: 32rpx;
		padding: 0rpx 10rpx;
	}

	.confirm_title {
		margin-top: 20rpx;
		border-radius: 40rpx;
		color: #d5bd9d;
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #010101;
	}

	.card_four_box {
		width: 100%;
		margin-bottom: 50rpx;
	}

	.card_prin {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.cipal_box_flex {
		flex: 0 0 25%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cipal_box {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		width: 120rpx;
		height: 120rpx;
		font-size: 50rpx;
		border-radius: 50%;
		background-color: #b8b8b8;
		margin-bottom: 20rpx;
	}

	.activate_cipal {
		background-color: #b2955d;
	}
</style>