leromro-mini/components/its-calendar/its-calendar.vue

<template>
	<view>
		<view class="calendar">
			<scroll-view class="calendar_day_scroll" scroll-x="true" show-scrollbar="false">
				<view class="calendar_day">
					<view class="day_x" :style="{'color': (day_index == index ? '#FE3B3C' : '')}"
						v-for="(item, index) in dayArr" :key="index" @click.stop="dayList(item,index)">
						<view class="day_x_a">{{item.weeks}}</view>
						<view class="day_x_b">{{item.days}}</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="calendar_time_scroll" scroll-y="true" show-scrollbar="false">
				<view class="calendar_time">
					<view class="time_x" 
						:class="{
							'time_x_sty': item?.checked, 
							'disabled-time': item?.disabled || item?.hasReservation === 1
						}" 
						v-for="(item, index) in timeHostArr[day_index]" 
						:key="index"
						@click="handleTimeClick(item)">
						<text>{{item?.hours}}</text>
						<text v-if="item.hasReservation === 1" class="hasRe-text">已预约</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="calendar_footer">
			{{ selectRange  }}
			<view class="remark_content">{{remark}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			timeArr: {
				type: Array,
				default: () => []
			},

			timeHostArr: {
				type: Array,
				default: () => []
			},
			businessDuration: {  // 从父组件接收的服务时长（分钟）
				type: Number,
				default: 0
			},
			minQuantity: {  // 从父组件接收的购买次数（次数）
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				dayArr: [],
				day_index: 0,
				host_index: '',
				nowTimes: new Date().getTime(), // 只保留一个定义
				disableAfterTime: null,
				selectedTime: null,
				selectedDay: null, // 新增：记录选择的日期
				selectedTimeSlots: {}, // 存储每个日期的选择状态
				upItem: null, //  保留上一个点击的item，外部情况下再刷新状态
				filteredSlots: []
			}
		},
		watch: {
			timeArr: {
				handler(newVal) {
					// console.log(newVal, '>>>>>>>时间范围');
					let dateArr = newVal.map(item => {
						let day = new Date(item)
						const daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
						return {
							weeks: daysOfWeek[day.getDay()],
							days: item.slice(5)
						}
					})
					this.dayArr = dateArr
				},
				immediate: true,
				deep: true
			},
			timeHostArr: {
				handler(newVal) {
					// console.log(newVal, '>>>>>>>时间更新');
					// 当timeHostArr更新时，恢复之前的选择状态
					if (newVal && newVal.length > 0) {
						this.restoreSelections();
					}
				},
				deep: true
			}
		},
		mounted() {
			
		},
		computed: {
			// 计算选中区域
			selectRange() {
				const reservations = this.timeHostArr[this.day_index]
				console.log(reservations, '>>>>>reservations');
				// console.log(JSON.stringify(current), '>>>>>current');
				// return current
				const result = [];
				  let currentGroup = null;
				
				  for (const item of reservations) {
				    if (item.checked) {
				      // 遇到新的checked项，创建新组
				      if (currentGroup) {
				        result.push(currentGroup);
				      }
				      currentGroup = [item];
				    } else if (currentGroup && item.disabled && item.hasReservation === 0) {
				      // 如果当前有活跃的组，且符合disabled和hasReservation条件，加入当前组
				      currentGroup.push(item);
				    } else if (currentGroup) {
				      // 不符合连续条件，结束当前组
				      result.push(currentGroup);
				      currentGroup = null;
				    }
				  }
				
				  // 添加最后一组（如果有）
				  if (currentGroup) {
				    result.push(currentGroup);
				  }
				  
				  const timeRangeArr = result.map(arr => {
					  return arr[0].hours + '-' +arr[arr.length -1].hours
				  })
				  
				  
				  return timeRangeArr;
			}
		},
		methods: {
			// 恢复选择状态
			restoreSelections() {
				// console.log('>>>>>>执行了', this.selectedTimeSlots);
				if (!this.timeHostArr[this.day_index]) return;
				
				// console.log('>>>>>>执行了2', this.selectedTimeSlots);
				
				// 遍历当前日期的时间槽
				this.timeHostArr[this.day_index].forEach(slot => {
					// 检查这个时间槽是否在之前被选中
					const dateKey = this.timeArr[this.day_index];
					// console.log(dateKey, '>>>>dateKey');
					// console.log(this.selectedTimeSlots[dateKey], '>>>>this.selectedTimeSlots[dateKey]');
					if (this.selectedTimeSlots[dateKey] && 
						this.selectedTimeSlots[dateKey].includes(slot.timeStamp)) {
						slot.checked = true;
						
						// 计算并禁用后续的时间段
						const seconds = this.businessDuration * this.minQuantity * 60;
						// const startTimestamp = 
						const endTimestamp = slot.timeStamp + seconds;
						
						// 禁用后续的时间段
						this.timeHostArr[this.day_index].forEach(s => {
							// 差一个范围控制变量，是否在可选择范围内
							if (s.timeStamp > slot.timeStamp && s.timeStamp <= endTimestamp) {
								s.disabled = true
							}
						});
						
		
					}
				});
			},
			
			handleTimeClick(item) {
				this.upItem = item
				
				const durationMs = this.businessDuration  * this.minQuantity * 60 * 1000;
				const itemTime = item.timeStamp > 9999999999 ? item.timeStamp : item.timeStamp * 1000;
				const slots = this.timeHostArr[this.day_index] || [];
				const currentDate = this.timeArr[this.day_index];

				// 1. 判断当前时间是否在任何已预约时间段的服务时长范围内
				let inReservedRange = false;
				for (let slot of slots) {
					if (slot.hasReservation === 1) {
						const reservedTime = slot.timeStamp > 9999999999 ? slot.timeStamp : slot.timeStamp * 1000;
						const start = reservedTime - durationMs;
						const end = reservedTime + durationMs;
						if (itemTime >= start && itemTime < end) {
							inReservedRange = true;
							break;
						}
					}
				}
				if (inReservedRange) {
					uni.showToast({ title: '服务时长不足，请选择其他时间段', icon: 'none' });
					return false;
				}

				// 2. 判断当前点击时间与所有已选时间段的服务时长有无重叠（多选判断）
				const selectedArr = this.selectedTimeSlots[currentDate] || [];
				if (!item.checked) { // 只在选中时判断
					for (let t of selectedArr) {
						if (t === item.timeStamp) continue; // 跳过自己
						const tStart = t > 9999999999 ? t : t * 1000;
						const tEnd = tStart + durationMs;
						if (
							(itemTime >= tStart && itemTime < tEnd) ||
							(itemTime < tStart && itemTime + durationMs > tStart)
						) {
							uni.showToast({ title: '时间段不在服务范围内', icon: 'none' });
							return false;
						}
					}
				}

				// 3. 检查当前时间到结束是否有足够的时间段
				const seconds = this.businessDuration  * this.minQuantity * 60;
				const endTimestamp = (item.timeStamp + seconds);
				
				// 找出当前时间到服务结束时间之间的所有时间段
				const filteredSlots = this.timeHostArr[this.day_index].filter(i => {
					return (i.timeStamp > item.timeStamp && i.timeStamp <= endTimestamp);
				});
				this.filteredSlots = filteredSlots;
				 
				// 检查这些时间段中是否有已预约的时间
				const hasReservedSlot = filteredSlots.some(slot => slot.hasReservation === 1);
				if (hasReservedSlot) {
					uni.showToast({ title: '所选时间段内有已预约时间，请选择其他时间', icon: 'none' });
					return false;
				}
				 
				// 时间差值(数组中的最后一项 - 当前点击项)
				const timestampDifferenceValue = filteredSlots.length ? (filteredSlots[filteredSlots.length - 1].timeStamp - item.timeStamp) * 1000 : 0;
				
				// 选择时间，后续服务时间是否充足，不充足结束逻辑执行 timeStamp
				if (timestampDifferenceValue < durationMs) { // 所选时间差值 小于 服务时间值 结束执行
					uni.showToast({ title: '所选时间的服务时间不充足！', icon: 'none' });
					return false;
				}
					
				if (!item.checked) {
					filteredSlots.forEach(v => {
						v.disabled = true;
					});
					item.checked = true;
					if (!this.selectedTimeSlots[currentDate]) {
						this.selectedTimeSlots[currentDate] = [];
					}
					this.selectedTimeSlots[currentDate].push(item.timeStamp);
				} else {
					filteredSlots.forEach(v => {
						if (v.hasReservation !== 1) v.disabled = false;
					});
					item.checked = false;
					if (this.selectedTimeSlots[currentDate]) {
						const index = this.selectedTimeSlots[currentDate].indexOf(item.timeStamp);
						if (index > -1) {
							this.selectedTimeSlots[currentDate].splice(index, 1);
						}
					}
				}
				this.hosts(item);
			},
			
			async handleTimeClick2() {
				if (!this.upItem) return;
				
				let item = this.upItem;
				const currentDate = this.timeArr[this.day_index];
				const durationMs = this.businessDuration * this.minQuantity * 60 * 1000;
				const itemTime = item.timeStamp > 9999999999 ? item.timeStamp : item.timeStamp * 1000;
				const slots = this.timeHostArr[this.day_index] || [];
				
				// 保留之前的选择状态，只重置disabled状态
				this.timeHostArr[this.day_index].forEach(s => {
					if (s.hasReservation !== 1 && !s.checked) {
						s.disabled = false;
					}
				});
				
				// 1. 检查是否与已预约时间冲突
				let inReservedRange = false;
				for (let slot of slots) {
					if (slot.hasReservation === 1) {
						const reservedTime = slot.timeStamp > 9999999999 ? slot.timeStamp : slot.timeStamp * 1000;
						const start = reservedTime - durationMs;
						const end = reservedTime + durationMs;
						if (itemTime >= start && itemTime < end) {
							inReservedRange = true;
							break;
						}
					}
				}
				if (inReservedRange) {
					uni.showToast({ title: '服务时长不足，请选择其他时间段', icon: 'none' });
					return false;
				}
				
				// 2. 检查是否有足够的后续时间段
				const seconds = this.businessDuration * this.minQuantity * 60;
				const endTimestamp = (item.timeStamp + seconds);
				
				// 找出从当前时间到结束时间之间的所有时间段
				const filteredSlots = this.timeHostArr[this.day_index].filter(i => {
					return (i.timeStamp > item.timeStamp && i.timeStamp <= endTimestamp);
				});
				this.filteredSlots = filteredSlots;
				
				// 检查这些时间段中是否有已预约的时间
				const hasReservedSlot = filteredSlots.some(slot => slot.hasReservation === 1);
				if (hasReservedSlot) {
					uni.showToast({ title: '所选时间段内有已预约时间，请选择其他时间', icon: 'none' });
					return false;
				}
				
				// 检查时间是否足够
				const timestampDifferenceValue = filteredSlots.length ? (filteredSlots[filteredSlots.length - 1].timeStamp - item.timeStamp) * 1000 : 0;
				if (timestampDifferenceValue < durationMs) {
					uni.showToast({ title: '所选时间的服务时间不充足！', icon: 'none' });
					return false;
				}
				
				// 所有检查通过，更新disabled状态
				// filteredSlots.forEach(v => {
				// 	if (v.hasReservation !== 1 && !v.checked) {
				// 		v.disabled = true;
				// 	}
				// });
				
				this.hosts(item);
			},
			
			// 点击日期
			dayList(e, index) {
				this.day_index = index
				this.$emit('getByDate', this.timeArr[index])
			},
			// 转换时间戳为毫秒
			ensureMillisecond(timestamp) {
				return timestamp > 9999999999 ? timestamp : timestamp * 1000;
			},

			shouldDisable(item) {
				if (!item) return true;
				
				// 已预约
				if (item.hasReservation === 1) return true;

				const itemTime = this.ensureMillisecond(item.timeStamp);

				// 过去时间
				if (this.nowTimes > itemTime) return true;

				return false;
			},
			hosts(item) {
				const itemTime = this.ensureMillisecond(item.timeStamp);

				this.host_index = item.timeStamp; // 显示用原始值
				this.selectedTime = itemTime;
				this.disableAfterTime = itemTime + (this.businessDuration * this.minQuantity * 60 * 1000);
				this.$emit('getByTime', {
					...item,
					timeStamp: itemTime // 传递转换后的值
				});
			},

			// 点击立即预约
			sub() {
				if (this.host_index == '') {
					this.$tool.toast('请选择时间');
				} else {
					let day = this.dayArr[this.day_index];
					let time = this.times(this.host_index);
					let comTime = {
						days: day.days,
						weeks: day.weeks,
						hours: this.host_All.hours,
						timeStamp: this.host_All.timeStamp,
						time: time
					};
					this.$emit('getTime', comTime);
				}
			},

			// 格式化时间
			times(data) {
				let date = new Date(data * 1000);
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; // 小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; // 分钟补0
				return h + ':' + m;
			},
			time(data, type) {
				let date = new Date(data * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; // 月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; // 天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; // 小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; // 分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; // 秒补0
				if (type == 'yymmdd') {
					return y + '-' + MM + '-' + d;
				} else if (type == 'hhmmss') {
					return h + ':' + m + ':' + s;
				} else {
					return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.calendar {
		width: 710rpx;
		height: 460rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto 10rpx;
		border-radius: 8rpx;
	}

	.calendar_day_scroll {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		&::-webkit-scrollbar {
			display: none;
		}
	}

	.calendar_day {
		display: flex;
		flex-direction: row;
		width: max-content;
		height: 120rpx;
	}

	.day_x {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100%;
		font-size: 30rpx;
		color: #333333;
		flex-shrink: 0;
		margin-right: 10rpx;
		background: #f8f8f8;
		border-radius: 12rpx;
		cursor: pointer;
	}

	.day_x_a {
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.day_x_b {
		font-size: 28rpx;
		color: #666;
	}

	.calendar_time_scroll {
		width: 100%;
		height: 380rpx;
		overflow-y: auto;
		background: #fff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.calendar_time {
		display: flex;
		width: 100%;
		flex-flow: row wrap;
		align-content: flex-start;
		margin: 20rpx 0;
		overflow-y: auto;
	}

	.time_x {
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 54rpx;
		border-radius: 26rpx;
		margin: 10rpx 0;
		font-size: 30rpx;
		color: #333333;

		display: flex;
		flex-direction: column;

		.hasRe-text {
			font-size: 20rpx;
			color: #999999;
		}
	}

	.time_x_sty {
		background-color: #FFE97B;
		color: #000000 !important;
	}

	.sub {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 710rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 30rpx auto;
		color: #FFFFFF;
		font-size: 36rpx;
		background-color: #FE3B3C;
	}

	.time_x {
	  /* 正常状态样式 */
	  &.disabled-time {
	    background-color: #f2f2f2;
	    color: #999999;
	    pointer-events: none;
	  }
	  
	  &.time_x_sty {
	    background-color: #FFE97B;
	    color: #000000;
	  }
	}

	.calendar_footer {
		width: 100%;
		background: #fff;
		border-radius: 12rpx;
		margin: 0 auto 20rpx auto;
		padding: 24rpx 32rpx;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
		display: flex;
		align-items: flex-start;
		min-height: 60rpx;
	}

	.remark_content {
		color: #333;
		word-break: break-all;
		flex: 1;
	}
</style>