Ci2Order.vue/App/components/z-date-area/z-date-area.vue

<template>
	<view>
		<view class="time-card shadow-2">
			<view class="flex-n fac top">
				<view class="now_time flex-1" v-if="monthDayList[15]">{{monthDayList[15].yy}}年{{monthDayList[15].mm>9?monthDayList[15].mm:('0'+monthDayList[15].mm)}}月</view>
				<view class="time-card-tab iconfont iconfanhui" @click="beforeMonth(monthDayList[15])"></view>
				<view class="time-card-tab time-card-tab-trans iconfont iconfanhui ml-100" @click="afterMonth(monthDayList[15])"></view>
			</view>
			<view class="time-card_container mt-38">
				<view class="time-card_week" :class="index>4?'time-card_week_day':''" v-for="(item,index) in weekName" :key="item">{{item}}</view>
				<view class="time-card_day" :class="item.mm!=monthDayList[15].mm?'time-card_day_out':''" v-for="(item,index) in monthDayList"
				 :key="index" @click="chooseDay(item,index)">
					<view class="time-card_day_item" :class="[{'date_now':$Date.getDayDate().date==item.date},{'date_select':choose==index}]">
						{{item.dd}}
						<view class="date_imp flex-n fac fjc" v-if="importantDataList&&importantDataList[index]&&importantDataList[index].importantDates&&importantDataList[index].importantDates.length>0">
							<view class=" iconfont iconxing2"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		props:{
			value:String
		},
		model: {
			prop: 'value',
		},
		data() {
			return {
				weekName: ['一', '二', '三', '四', '五', '六', '日'],
				monthDayList: [],
				importantDataList: [],
				choose: 20,
			};
		},
		mounted() {
			//获取当前时间的信息
			var date = this.$Date.getDayDate();
			
			// this.day = date;
			this.monthDayList = this.$Date.getMonthDate({
				yy: date.yy,
				mm: date.mm,
				dd: date.dd
			});
			
			for (var i in this.monthDayList) {
				if (this.monthDayList[i].dd == date.dd && this.monthDayList[i].mm == date.mm) {
					this.choose = i;
					break;
				}
			}
		},
		watch: {
			value(newval, oldval) {
				console.log('反显日期',newval)
				if (newval) {
					var date = newval.split('-');
					this.monthDayList = this.$Date.getMonthDate({
						yy: date[0],
						mm: date[1],
						dd: date[2]
					});
					for (var i in this.monthDayList) {
						if (this.monthDayList[i].dd == date[2] && this.monthDayList[i].mm == date[1]) {
							this.choose = i;
							break;
						}
					}
				}
		
			},
		},
		methods:{
			//获取重点日期
			getImportantDate(startTime, endTime) {
				this.$axios.post('app/order/orderImportantDate', {
					"startTime": startTime,
					"endTime": endTime,
					"storeId": uni.getStorageSync('storeId')
				}).then(res => {
					console.log('重点日期', res.data)
					this.importantDataList = res.data.list;
				}).catch(err => {
					// this.$message.error(err.msg);
				})
			},
			//前一个月
			beforeMonth(date) {
				console.log(date, this.choose)
				this.monthDayList = this.$Date.getMonthDate({
					yy: date.mm - 1 > 0 ? date.yy : (date.yy - 1),
					mm: date.mm - 1 > 0 ? date.mm - 1 : 12,
					dd: date.dd
				});
				for(var i in this.monthDayList){
					if(this.monthDayList[i].dd==1){
						this.choose=i;
						break;
					}
				}
				this.chooseDay(this.monthDayList[this.choose], this.choose);
				this.getImportantDate(this.monthDayList[0].date, this.monthDayList[this.monthDayList.length - 1].date);
			},
			//后一个月
			afterMonth(date) {
				this.monthDayList = this.$Date.getMonthDate({
					yy: date.mm + 1 > 12 ? (date.yy + 1) : date.yy,
					mm: date.mm + 1 > 12 ? 1 : date.mm + 1,
					dd: date.dd
				});
				for(var i in this.monthDayList){
					if(this.monthDayList[i].dd==1){
						this.choose=i;
						break;
					}
				}
				this.chooseDay(this.monthDayList[this.choose], this.choose);
				this.getImportantDate(this.monthDayList[0].date, this.monthDayList[this.monthDayList.length - 1].date);
			},
			chooseDay(item, index) {
				console.log(item)
				this.choose = index;
				this.$emit('input',item.date)
				this.$emit('change',item);
			},
		}
	}
</script>

<style scoped lang="scss">
.time-card {
		padding: 46rpx 4rpx;

		.top {
			padding: 0 40rpx;
		}

		.now_time {
			font-weight: bold;
			color: #333333;
			font-size: 32rpx;
		}

		.time-card-tab {
			width: 18rpx;
			height: 34rpx;
			color: #2481EE;
		}

		.time-card-tab-trans {
			transform: rotateZ(180deg);
		}

		.time-card_container {
			display: grid;
			grid-template-columns: repeat(7, calc(100% / 7));
			color: #333333;
			text-align: center;

			.time-card_week {
				font-size: 28rpx;
				line-height: 50rpx;
				margin: 10rpx;
			}

			.time-card_week_day {
				color: #F7913D !important;
			}

			.time-card_day {
				font-size: 24rpx;
				justify-self: center;
				height: 70rpx;

				.time-card_day_item {
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin: 10rpx;
					position: relative;
					// background:rgba(247,145,61,1);
					border-radius: 50%;

					.date_imp {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						font-size: 20rpx;
						line-height: 24rpx;
						width: 24rpx;
						height: 24rpx;
						color: #e64340;
						background: white;
						border: 2rpx solid white;
						border-radius: 50%;

						.iconfont {
							font-size: 25rpx;
							transform: scale(0.8);
						}
					}
				}

				.date_select {
					border: 2rpx solid #F7913D !important;

					.date_imp {
						border: 2rpx solid #F7913D !important;

						.iconfont {
							font-size: 25rpx;
							transform: scale(0.8);
						}
					}
				}

				.date_now {
					background: #F7913D;
					color: white !important;
					box-shadow: 5rpx 5rpx 20rpx 0rpx #f5b47e;
					border: 2rpx solid #F7913D !important;

					.date_imp {
						border: 2rpx solid #F7913D !important;
						box-shadow: -1rpx 0rpx 10rpx 0rpx rgba(247, 145, 61, 0.1);

						.iconfont {
							font-size: 25rpx;
							transform: scale(0.8);
						}
					}
				}
			}

			.time-card_day_out {
				color: #999999 !important;
			}
		}
	}
</style>