uniapp开发微信小程序——魔改日期选择器woRangeSelector

指路✈

以下是魔改代码

<template>
	<view class="grid-layout">
		<view v-for="(item, index) in dataOptions" :key="index" @tap="onSelectTime(item, index)">
			<view class="time-layout" :class="[bgComputed(item, index)]">
				<view class="flex-center main-text" :class="[textComputed(item, index)]">{{ item.label }}</view>
				<view class="flex-center subtitle-text" :class="[textSubtitleComputed(item, index)]">{{ item.subtitle }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { reactive, computed } from 'vue';

	export default {
		data() {
			return {
				dataOptions: [],
				rangeValue: [],
			};
		},
		props: {
			selectedTime: {
				type: Array,
				default: () => [],
			},
			options: {
				type: Array,
				default: () => [],
			},
		},
		computed: {
			bgComputed() {
				return (item, index) => {
					if (item.disabled) {
						return '';
					}

					// console.log("bg", this.rangeValue)
					if (this.rangeValue.includes(item.value)) {

						if (this.rangeValue.length >= 1) {
							return 'click-bg single-radius';
						}

						// if (this.rangeValue.length == 1 || this.rangeValue[0] === this.rangeValue[1]) {
						// 	return 'click-bg single-radius';
						// } 

						// else {
						// 	if (this.rangeValue[0] === item.value) {
						// 		return 'click-bg start-radius';
						// 	} else {
						// 		return 'click-bg end-radius';
						// 	}
						// }
					}
					if (this.rangeValue.length > 1) {
						if (item.value > this.rangeValue[0] && item.value < this.rangeValue[1]) {
							return 'normal-bg';
						}
						if (item.value > this.rangeValue[2] && item.value < this.rangeValue[3]) {
							return 'normal-bg';
						}
					}
					return '';
				};
			},
			textComputed() {
				return (item, index) => {
					if (item.disabled) {
						return 'time-disabled-text';
					}
					if (this.rangeValue.includes(item.value)) {
						return 'selectd-text';
					}
					return 'time-text';
				};
			},
			textSubtitleComputed() {
				return (item, index) => {
					if (item.disabled) {
						return 'time-disabled-text';
					}
					if (this.rangeValue.includes(item.value)) {
						return 'selectd-subtitle';
					}
					return 'time-subtitle';
				};
			},
		},
		watch: {
			selectedTime(value) {
				if (value.length) {
					this.rangeValue = [value[0], value[value.length - 1]];
					console.log("this.rangeValueqqq", this.rangeValue)
				} else {
					this.rangeValue = [];
				}
			},
		},
		mounted() {
			this.dataOptions = this.options
			this.rangeValue=this.selectedTime
		},
		methods: {
			onSelectTime(item, index) {
				// 如果当前时间格子被禁用，则直接返回，不执行后续逻辑
				if (item.disabled) {
					return;
				}
				// 如果已经选择了两个时间点 
				// 判断新选择的时间点是否在已选择的时间点之间 在之间的话则重新选择 一个时间点   
				// 判断新选择的时间点是否与已选择的时间点相邻（比如 新选择是15 相邻已选择的时间点是14或者新选择是12 相邻已选择的时间点是13） 相邻的话则用新选择的时间点替换相邻的时间点
				// 判断新选择的时间点是否与已选择的时间点相隔 比如 新选择是15 相隔已选择的时间点是11，13或者新选择是12 相隔已选择的时间点是14，19） 相隔的话则新选择的时间点作为新数据

				// 如果已经选择三个时间点 
				// 判断新选择的时间点 是否与已选择时间点中的时间点this.rangeValue[1]或者this.rangeValue[0]相邻  相邻的话 则从新选择的时间点和已选择的时间点中选最小和最大的时间点为已选择的时间点   

				// 如果已经选择四个时间点 




				// 如果已经选择了一个时间点
				else if (this.rangeValue.length === 1) {
					// 如果新选择的时间点在已选择的时间点之前，则更新第一个时间点为当前选择的时间点
					if (this.rangeValue[0] > index) {
						// this.rangeValue[0] = item.value;
						this.rangeValue.unshift(item.value);
					}
					// 如果新选择的时间点在已选择的时间点之后
					else {
						// 从第一个时间点到当前选择的时间点之间检查是否有禁用的时间点
						for (let i = this.rangeValue[0]; i < index; i++) {
							// 如果存在禁用的时间点，则将前一个有效时间点的值添加到 rangeValue 中，并触发 changeSelect 事件
							if (this.dataOptions[i].disabled) {
								this.rangeValue.push(this.dataOptions[i - 1].value);
								this.$emit('changeSelect', this.rangeValue);
								return;
							}
						}
						// 如果没有禁用的时间点，则将当前选择的时间点添加到 rangeValue 中
						this.rangeValue.push(item.value);
					}
				} else if (this.rangeValue.length === 2) {

					// this.rangeValue = [item.value];
					// console.log("如果已经选择了两个时间点，重新选择第一个时间点", this.rangeValue)

					// 判断新选择的时间点是否在已选择的时间点之间，如果是，则重新选择一个时间点
					if (item.value > this.rangeValue[0] && item.value < this.rangeValue[1]) {
						this.rangeValue = [item.value];
					}
					// 判断新选择的时间点是否与已选择的时间点相邻，如果是，则用新选择的时间点替换相邻的时间点
					else if (item.value === this.rangeValue[0] - 1 || item.value === this.rangeValue[1] + 1) {
						if (item.value === this.rangeValue[0] - 1) {
							// this.rangeValue[0] = item.value;
							this.$set(this.rangeValue, 0, item.value); // 使用 Vue.$set 来修改数组第一个元素
						} else {
							// this.rangeValue[1] = item.value;
							this.$set(this.rangeValue, 1, item.value); // 使用 Vue.$set 来修改数组第二个元素
						}
					}
					// 判断新选择的时间点是否与已选择的时间点相隔，如果是，则新选择的时间点作为新数据
					else if (item.value < this.rangeValue[0] || item.value > this.rangeValue[1]) {
						if (item.value < this.rangeValue[0]) {
							this.rangeValue.push(item.value);
						}
						if (item.value > this.rangeValue[1]) {
							this.rangeValue.push(item.value);
						}
					}

				} else if (this.rangeValue.length === 3) {
					if ((item.value <= this.rangeValue[0] - 1 && this.rangeValue[2] > this.rangeValue[1]) || item.value ===
						this.rangeValue[1] + 1) {
						// Math.min(item.value, ...this.rangeValue), Math.max(item.value, ...this.rangeValue)
						const arr = [Math.min(item.value, ...this.rangeValue), Math.max(item.value, ...this.rangeValue)]
						this.rangeValue = []
						this.rangeValue.push(...arr)

					} else {

						// 新选择的 this.rangeValue[0]后面
						if (item.value > this.rangeValue[2] && item.value > this.rangeValue[0]) {
							this.rangeValue.push(item.value)

						}
						// 新选择的 this.rangeValue[0]前面
						if (item.value > this.rangeValue[2] && item.value < this.rangeValue[0] - 1) {
							console.log("前面")
							// this.rangeValue.splice(2, 0, item.value)
							this.rangeValue.push(item.value)

							console.log("最新", this.rangeValue)


						}
						// 新选择的 this.rangeValue[0]后面
						if (item.value < this.rangeValue[2]) {
							console.log("后面")
							this.rangeValue.splice(2, 0, item.value)
						}
					}
				} else if (this.rangeValue.length === 4) {

					if (item.value === this.rangeValue[0] - 1 || item.value === this.rangeValue[1] + 1 || item.value ===
						this.rangeValue[2] - 1 || item.value === this.rangeValue[3] + 1) {
						// 小于this.rangeValue[0]

						if (item.value === this.rangeValue[0] - 1) {

							this.$set(this.rangeValue, 0, item.value);
							if (item.value > this.rangeValue[2]) {
								const arr3 = [Math.min(item.value, ...this.rangeValue), Math.max(item.value, ...this
									.rangeValue)]
								this.rangeValue = []
								this.rangeValue.push(...arr3)
							}
						}
						// 小于this.rangeValue[2]
						if (item.value === this.rangeValue[2] - 1) {

							this.$set(this.rangeValue, 2, item.value);

							if (item.value == this.rangeValue[1] + 1) {
								const arr1 = [Math.min(item.value, ...this.rangeValue), Math.max(item.value, ...this
									.rangeValue)]
								this.rangeValue = []
								this.rangeValue.push(...arr1)
							}
						}
						// 大于this.rangeValue[1]
						if (item.value === this.rangeValue[1] + 1) {
							// this.rangeValue[1] = item.value;

							this.$set(this.rangeValue, 1, item.value);

							if (item.value == this.rangeValue[2] - 1) {
								const arr2 = [Math.min(item.value, ...this.rangeValue), Math.max(item.value, ...this
									.rangeValue)]
								this.rangeValue = []
								this.rangeValue.push(...arr2)
							}
						}
						// 大于this.rangeValue[3]
						if (item.value === this.rangeValue[3] + 1) {
							this.$set(this.rangeValue, 3, item.value);
						}




					} else {
						this.rangeValue = []
						this.rangeValue.push(item.value);
					}

				} else if (this.rangeValue.length > 4) {

					this.rangeValue = []
					this.rangeValue.push(item.value);
				} else {
					this.rangeValue = []
					this.rangeValue.push(item.value);
				}
				// 如果还没有选择任何时间点，则直接将当前时间点添加到 rangeValue 中




				// 触发 changeSelect 事件，向父组件传递更新后的 rangeValue
				this.$emit('changeSelect', this.rangeValue);
			},
		},
	};
</script>

<style scoped lang="scss">
	.grid-layout {
		height: 300px;
		display: grid;
		grid-template-columns: repeat(6, 126rpx);
		row-gap: 14rpx;
	}

	.main-text {
		font-size: 26rpx;
		font-weight: 600;
	}

	.subtitle-text {
		font-size: 26rpx;
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time-layout {
		padding: 16rpx 16rpx;
	}

	.time-disabled-text {
		color: #999999;
	}

	.time-text {
		color: #FFFFFF;
		margin-bottom: 28rpx;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: 52rpx;
			left: 40rpx;
			width: 15rpx;
			height: 3rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			background: #A8A7AB;


		}
	}

	.time-subtitle {
		color: #FFFFFF;
	}

	.normal-bg {
		// background: #fff5e9;
		background: #332252;
	}

	.click-bg {
		// background: #e78d00;
		background: linear-gradient(90deg, #7F3AD2, #8E4CDE);
	}

	.single-radius {
		border-radius: 8rpx;
	}

	.start-radius {
		border-radius: 8rpx;
	}

	.end-radius {
		border-radius: 8rpx;
	}

	.selectd-text {
		color: #FFFFFF;
		margin-bottom: 28rpx;
		position: relative;
		
		&::after {
			content: "";
			position: absolute;
			top: 52rpx;
			left: 40rpx;
			width: 15rpx;
			height: 3rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			background: #A8A7AB;
		}
	}

	.selectd-subtitle {
		color: rgba(255, 255, 255, 1);
	}
</style>

效果图