Przeglądaj źródła

优化自定义多功能日期组件,提高用户体验

@dongkboy 3 tygodni temu
rodzic
commit
25a1142dbd
1 zmienionych plików z 63 dodań i 4 usunięć
  1. 63 4
      components/uni-datePicker/uni-datePicker.vue

+ 63 - 4
components/uni-datePicker/uni-datePicker.vue

@@ -133,6 +133,15 @@
 		watch: {
 			show(newVal) {
 				this.modelshow = newVal
+				// 弹窗打开时,自动定位到已选日期
+				if (newVal) {
+					this.$nextTick(() => {
+						const targetDate = this.startShow ? this.interviewStartTime : this.interviewEndTime;
+						if (targetDate) {
+							this.updatePickerPosition(targetDate);
+						}
+					});
+				}
 			},
 			current(newVal) {
 				this.currentIndex = newVal
@@ -246,6 +255,8 @@
 				if (this.endShow) {
 					this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
 				}
+				// 同步更新 value,保持 picker 位置一致
+				this.value = val;
 			},
 			//月份滚动事件
 			monthbindChange: function(e) {
@@ -307,18 +318,66 @@
 			reset() {
 				this.interviewStartTime = ''
 				this.interviewEndTime = ''
+				this.startShow = false
+				this.endShow = false
 			},
 			startClick() {
-				console.log(1);
-				// this.interviewStartTime=''
-				this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
 				this.startShow = true
 				this.endShow = false
+				// 已有已选日期时,滚动到该日期;否则用当前 picker 位置
+				if (this.interviewStartTime) {
+					this.updatePickerPosition(this.interviewStartTime);
+				} else {
+					this.interviewStartTime = this.year + '-' + this.month + '-' + this.day;
+				}
 			},
 			endClick() {
-				this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
 				this.startShow = false
 				this.endShow = true
+				// 已有已选日期时,滚动到该日期;否则用当前 picker 位置
+				if (this.interviewEndTime) {
+					this.updatePickerPosition(this.interviewEndTime);
+				} else {
+					this.interviewEndTime = this.year + '-' + this.month + '-' + this.day;
+				}
+			},
+			// 根据日期字符串更新 picker 滚动位置
+			updatePickerPosition(dateStr) {
+				if (!dateStr) return;
+				const [yearStr, monthStr, dayStr] = dateStr.split('-');
+				const targetYear = parseInt(yearStr);
+				const targetMonth = parseInt(monthStr);
+				const targetDay = parseInt(dayStr);
+
+				// 查找年份和月份对应的下标 (this.years 是倒序,所以需要计算下标)
+				const yearIndex = this.years.findIndex(y => y === targetYear);
+				const monthIndex = targetMonth - 1; // months 数组是 1-12,下标 0-11
+
+				// 根据年月重新生成天数数组
+				let isDay = 30;
+				if (targetMonth === 2) {
+					if ((targetYear % 4 === 0 && targetYear % 100 !== 0) || (targetYear % 400 === 0)) {
+						isDay = 29;
+					} else {
+						isDay = 28;
+					}
+				} else if ([1, 3, 5, 7, 8, 10, 12].includes(targetMonth)) {
+					isDay = 31;
+				} else {
+					isDay = 30;
+				}
+				const days = [];
+				for (let i = 1; i <= isDay; i++) {
+					days.push(String(i).padStart(2, '0'));
+				}
+				this.days = days;
+				const dayIndex = targetDay - 1;
+
+				// 更新 picker 位置
+				this.value = [yearIndex, monthIndex, dayIndex];
+				this.year = targetYear;
+				this.month = String(targetMonth).padStart(2, '0');
+				this.day = String(targetDay).padStart(2, '0');
 			},
 			confirm() {
 				if (this.currentName == "自定义时间") {