app收支记录日期筛选切换，清除默认值

components/uni-datePicker/uni-datePicker.vue

@@ -28,7 +28,8 @@
 					<view class="quickOptions dis f-c" v-if="quickOptionsShow">
 						<view class=" dis a-c j-start">
 							<view class="tab" :class="{ tabactive: OptionsTabIndex == index }"
-								v-for="(item, index) in quickOptions" :key="index" @click="OptionsTabSelect(item, index)">
+								v-for="(item, index) in quickOptions" :key="index"
+								@click="OptionsTabSelect(item, index)">
 								<text>{{ item }}</text>
 							</view>
 						</view>
@@ -67,365 +68,366 @@
 	</div>
 </template>
 <script>
-export default {
-	data() {
-		return {
-			modelshow: this.show,
-			currentIndex: this.current,
-			currentName: "自定义时间",
-			quickOptions: ["本周", "本月", "本年"], //快捷选项
-			OptionsTabIndex: null, //下标
-			startShow: true,
-			endShow: false,
-			interviewStartTime: '', //开始时间
-			interviewEndTime: '', //结束时间
-			monthTime: '', //月份
-			years: [],
-			year: null,
-			year1: null,
-			months: [],
-			month: null,
-			month1: null,
-			days: [],
-			day: null,
-			hours: [],
-			hour: null,
-			minutes: [],
-			minute: null,
-			value: [],
-			monthvalue: [],
-			indicatorStyle: `height: 50px`,
-			visible: true //控制日期显示
-		}
-	},
-	props: {
-		contentTabslist: {
-			type: Array,
-			default: () => [{ //选项卡
-				name: '选择月份'
-			}, {
-				name: '自定义时间'
-			}]
-		},
-		//关闭图标
-		closeable: {
-			type: Boolean,
-			default: true,
-		},
-		show: {
-			type: Boolean,
-			default: false
-		},
-		// 快捷选项显示
-		quickOptionsShow: {
-			type: Boolean,
-			default: true
+	export default {
+		data() {
+			return {
+				modelshow: this.show,
+				currentIndex: this.current,
+				currentName: "自定义时间",
+				quickOptions: ["本周", "本月", "本年"], //快捷选项
+				OptionsTabIndex: null, //下标
+				startShow: true,
+				endShow: false,
+				interviewStartTime: '', //开始时间
+				interviewEndTime: '', //结束时间
+				monthTime: '', //月份
+				years: [],
+				year: null,
+				year1: null,
+				months: [],
+				month: null,
+				month1: null,
+				days: [],
+				day: null,
+				hours: [],
+				hour: null,
+				minutes: [],
+				minute: null,
+				value: [],
+				monthvalue: [],
+				indicatorStyle: `height: 50px`,
+				visible: true //控制日期显示
+			}
 		},
-		current: {
-			type: Number,
-			default: 1,
-		}
-	},
-	mounted() {
-		this.init();
-	},
-	watch: {
-		show(newVal) {
-			this.modelshow = newVal
+		props: {
+			contentTabslist: {
+				type: Array,
+				default: () => [{ //选项卡
+					name: '选择月份'
+				}, {
+					name: '自定义时间'
+				}]
+			},
+			//关闭图标
+			closeable: {
+				type: Boolean,
+				default: true,
+			},
+			show: {
+				type: Boolean,
+				default: false
+			},
+			// 快捷选项显示
+			quickOptionsShow: {
+				type: Boolean,
+				default: true
+			},
+			current: {
+				type: Number,
+				default: 1,
+			}
 		},
-		current(newVal) {
-			this.currentIndex = newVal
-		}
-	},
-	methods: {
-		//选项卡切换
-		click(item) {
-			this.currentName = item.name;
-			this.currentIndex = item.index;
+		mounted() {
+			this.init();
 		},
-		//快捷选择
-		OptionsTabSelect(item, index) {
-			switch (item) {
-				case "本周":
-					const WeekRange = this.getWeekRange();
-					this.interviewStartTime = WeekRange.start;
-					this.interviewEndTime = WeekRange.end;
-					break;
-				case "本月":
-					const currentMonthRange = this.getCurrentMonthRange();
-					this.interviewStartTime = currentMonthRange.start;
-					this.interviewEndTime = currentMonthRange.end;
-					break;
-				case "本年":
-					const currentYear = new Date().getFullYear();
-					this.interviewStartTime = `${currentYear}-01-01`;
-					this.interviewEndTime = `${currentYear}-12-31`;
-					break;
-				default:
-					break;
+		watch: {
+			show(newVal) {
+				this.modelshow = newVal
+			},
+			current(newVal) {
+				this.currentIndex = newVal
 			}
-			this.OptionsTabIndex = index;
 		},
-		//获取本月
-		getCurrentMonthRange() {
-			const today = new Date();
-			const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); // 本月第一天
-			const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 本月最后一天
+		methods: {
+			//选项卡切换
+			click(item) {
+				this.currentName = item.name;
+				this.currentIndex = item.index;
+				this.$emit('tabClick', item.name);
+			},
+			//快捷选择
+			OptionsTabSelect(item, index) {
+				switch (item) {
+					case "本周":
+						const WeekRange = this.getWeekRange();
+						this.interviewStartTime = WeekRange.start;
+						this.interviewEndTime = WeekRange.end;
+						break;
+					case "本月":
+						const currentMonthRange = this.getCurrentMonthRange();
+						this.interviewStartTime = currentMonthRange.start;
+						this.interviewEndTime = currentMonthRange.end;
+						break;
+					case "本年":
+						const currentYear = new Date().getFullYear();
+						this.interviewStartTime = `${currentYear}-01-01`;
+						this.interviewEndTime = `${currentYear}-12-31`;
+						break;
+					default:
+						break;
+				}
+				this.OptionsTabIndex = index;
+			},
+			//获取本月
+			getCurrentMonthRange() {
+				const today = new Date();
+				const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); // 本月第一天
+				const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 本月最后一天
 
-			// 格式化为 YYYY-MM-DD
-			const formatDate = (date) => {
-				const year = date.getFullYear();
-				const month = String(date.getMonth() + 1).padStart(2, '0');
-				const day = String(date.getDate()).padStart(2, '0');
-				return `${year}-${month}-${day}`;
-			};
+				// 格式化为 YYYY-MM-DD
+				const formatDate = (date) => {
+					const year = date.getFullYear();
+					const month = String(date.getMonth() + 1).padStart(2, '0');
+					const day = String(date.getDate()).padStart(2, '0');
+					return `${year}-${month}-${day}`;
+				};
 
-			return {
-				start: formatDate(firstDay),
-				end: formatDate(lastDay)
-			};
-		},
-		//获取本周
-		getWeekRange(date = new Date()) {
-			// 获取当前日期是星期几（0-6，0 是周日）
-			const dayOfWeek = date.getDay();
+				return {
+					start: formatDate(firstDay),
+					end: formatDate(lastDay)
+				};
+			},
+			//获取本周
+			getWeekRange(date = new Date()) {
+				// 获取当前日期是星期几（0-6，0 是周日）
+				const dayOfWeek = date.getDay();
 
-			// 计算本周的第一天（周一）
-			const startOfWeek = new Date(date);
-			startOfWeek.setDate(date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)); // 如果周日，则减去6天
+				// 计算本周的第一天（周一）
+				const startOfWeek = new Date(date);
+				startOfWeek.setDate(date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)); // 如果周日，则减去6天
 
-			// 计算本周的最后一天（周日）
-			const endOfWeek = new Date(startOfWeek);
-			endOfWeek.setDate(startOfWeek.getDate() + 6);
-			// 格式化为 YYYY-MM-DD
-			const formatDate = (date) => {
-				const year = date.getFullYear();
-				const month = String(date.getMonth() + 1).padStart(2, '0');
-				const day = String(date.getDate()).padStart(2, '0');
-				return `${year}-${month}-${day}`;
-			};
-			return {
-				start: formatDate(startOfWeek),
-				end: formatDate(endOfWeek)
-			};
-		},
-		open() {
-			this.$refs.popup.open()
-		},
-		bindChange: function (e) {
-			const val = e.detail.value; //年月日当前选中下标数组
-			let year = this.years[val[0]] //获取对应年份下标
-			let isDay = 30,
-				days = [];
-			const currentMonth = parseInt(this.months[val[1]]);
-			if (currentMonth == 2) {
-				if ((val[0] % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
-					isDay = 29;
+				// 计算本周的最后一天（周日）
+				const endOfWeek = new Date(startOfWeek);
+				endOfWeek.setDate(startOfWeek.getDate() + 6);
+				// 格式化为 YYYY-MM-DD
+				const formatDate = (date) => {
+					const year = date.getFullYear();
+					const month = String(date.getMonth() + 1).padStart(2, '0');
+					const day = String(date.getDate()).padStart(2, '0');
+					return `${year}-${month}-${day}`;
+				};
+				return {
+					start: formatDate(startOfWeek),
+					end: formatDate(endOfWeek)
+				};
+			},
+			open() {
+				this.$refs.popup.open()
+			},
+			bindChange: function(e) {
+				const val = e.detail.value; //年月日当前选中下标数组
+				let year = this.years[val[0]] //获取对应年份下标
+				let isDay = 30,
+					days = [];
+				const currentMonth = parseInt(this.months[val[1]]);
+				if (currentMonth == 2) {
+					if ((val[0] % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
+						isDay = 29;
+					} else {
+						isDay = 28;
+					}
+				} else if ([1, 3, 5, 7, 8, 10, 12].includes(currentMonth)) {
+					isDay = 31;
 				} else {
-					isDay = 28;
+					isDay = 30;
 				}
-			} else if ([1, 3, 5, 7, 8, 10, 12].includes(currentMonth)) {
-				isDay = 31;
-			} else {
-				isDay = 30;
-			}
 
-			for (let i = 1; i <= isDay; i++) {
-				days.push(String(i).padStart(2, '0'))
-			}
-			this.days = days;
-			this.year = this.years[val[0]]
-			this.month = this.months[val[1]]
-			this.day = this.days[val[2]];
-			// this.monthTime = this.year + '-' + this.month;
-			if (this.startShow) {
-				this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
-			}
-			if (this.endShow) {
-				this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
-			}
-		},
-		//月份滚动事件
-		monthbindChange: function (e) {
-			const val = e.detail.value; //年月日当前选中下标数组
-			this.year1 = this.years[val[0]] //获取对应年份下标
-			this.month1 = this.months[val[1]]
-			this.monthTime = this.year1 + '-' + this.month1;
-		},
-		init() {
-			const date = new Date();
-			const years = []
-			const year = date.getFullYear()
-			const months = []
-			const month = date.getMonth() + 1
-			const days = []
-			const day = date.getDate()
+				for (let i = 1; i <= isDay; i++) {
+					days.push(String(i).padStart(2, '0'))
+				}
+				this.days = days;
+				this.year = this.years[val[0]]
+				this.month = this.months[val[1]]
+				this.day = this.days[val[2]];
+				// this.monthTime = this.year + '-' + this.month;
+				if (this.startShow) {
+					this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
+				}
+				if (this.endShow) {
+					this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
+				}
+			},
+			//月份滚动事件
+			monthbindChange: function(e) {
+				const val = e.detail.value; //年月日当前选中下标数组
+				this.year1 = this.years[val[0]] //获取对应年份下标
+				this.month1 = this.months[val[1]]
+				this.monthTime = this.year1 + '-' + this.month1;
+			},
+			init() {
+				const date = new Date();
+				const years = []
+				const year = date.getFullYear()
+				const months = []
+				const month = date.getMonth() + 1
+				const days = []
+				const day = date.getDate()
 
-			let isDay = 30;
-			if (month == 2) {
-				if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
-					isDay = 29;
+				let isDay = 30;
+				if (month == 2) {
+					if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
+						isDay = 29;
+					} else {
+						isDay = 28;
+					}
+				} else if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
+					isDay = 31;
 				} else {
-					isDay = 28;
+					isDay = 30;
 				}
-			} else if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
-				isDay = 31;
-			} else {
-				isDay = 30;
-			}
 
-			for (let i = date.getFullYear(); i >= 1900; i--) {
-				years.push(i)
-			}
-			for (let i = 1; i <= 12; i++) {
-				months.push(String(i).padStart(2, '0'))
-			}
-			for (let i = 1; i <= isDay; i++) {
-				days.push(String(i).padStart(2, '0'))
-			}
+				for (let i = date.getFullYear(); i >= 1900; i--) {
+					years.push(i)
+				}
+				for (let i = 1; i <= 12; i++) {
+					months.push(String(i).padStart(2, '0'))
+				}
+				for (let i = 1; i <= isDay; i++) {
+					days.push(String(i).padStart(2, '0'))
+				}
 
-			this.years = years
-			this.year = year
-			this.year1 = year
-			this.months = months
-			this.month = String(month).padStart(2, '0')
-			this.month1 = String(month).padStart(2, '0')
-			this.days = days
-			this.day = String(day).padStart(2, '0')
-			this.value = [0, month - 1, day - 1]
-			this.monthvalue = [0, month - 1]
-			this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
-			this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
-			this.monthTime = this.year1 + '-' + this.month1;
+				this.years = years
+				this.year = year
+				this.year1 = year
+				this.months = months
+				this.month = String(month).padStart(2, '0')
+				this.month1 = String(month).padStart(2, '0')
+				this.days = days
+				this.day = String(day).padStart(2, '0')
+				this.value = [0, month - 1, day - 1]
+				this.monthvalue = [0, month - 1]
+				this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
+				this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
+				this.monthTime = this.year1 + '-' + this.month1;
 
+			},
+			close() {
+				this.$emit('close');
+			},
+			reset() {
+				this.interviewStartTime = ''
+				this.interviewEndTime = ''
+			},
+			startClick() {
+				console.log(1);
+				// this.interviewStartTime=''
+				this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
+				this.startShow = true
+				this.endShow = false
+			},
+			endClick() {
+				this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
+				this.startShow = false
+				this.endShow = true
+			},
+			confirm() {
+				if (this.currentName == "自定义时间") {
+					this.$emit('customTime', this.interviewStartTime, this.interviewEndTime);
+				} else {
+					this.$emit('customMonth', this.monthTime);
+				}
+			},
 		},
-		close() {
-			this.$emit('close');
-		},
-		reset() {
-			this.interviewStartTime = ''
-			this.interviewEndTime = ''
-		},
-		startClick() {
-			console.log(1);
-			// this.interviewStartTime=''
-			this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
-			this.startShow = true
-			this.endShow = false
-		},
-		endClick() {
-			this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
-			this.startShow = false
-			this.endShow = true
-		},
-		confirm() {
-			if (this.currentName == "自定义时间") {
-				this.$emit('customTime', this.interviewStartTime, this.interviewEndTime);
-			} else {
-				this.$emit('customMonth', this.monthTime);
-			}
-		},
-	},
-}
+	}
 </script>
 <style lang="scss" scoped>
-.popup {
-	border-radius: 10px 10px 0 0 !important;
-}
+	.popup {
+		border-radius: 10px 10px 0 0 !important;
+	}
 
-.popup-title {
-	border-bottom: 1rpx solid #EEEEEE;
-	margin-bottom: 40rpx;
+	.popup-title {
+		border-bottom: 1rpx solid #EEEEEE;
+		margin-bottom: 40rpx;
 
-	text:first-child {
-		font-weight: 600;
-	}
+		text:first-child {
+			font-weight: 600;
+		}
 
-	text:last-child {
-		position: absolute;
-		right: 10px;
-		font-size: 21px;
-		color: #999999;
-		line-height: 23px;
+		text:last-child {
+			position: absolute;
+			right: 10px;
+			font-size: 21px;
+			color: #999999;
+			line-height: 23px;
+		}
 	}
-}
 
-.quickOptions {
-	padding: 0 42rpx;
-	box-sizing: border-box;
-	margin-bottom: 20rpx;
+	.quickOptions {
+		padding: 0 42rpx;
+		box-sizing: border-box;
+		margin-bottom: 20rpx;
 
 
-	.tab {
-		padding: 9rpx 24rpx;
-		box-sizing: border-box;
-		font-size: 30rpx;
-		color: #666;
-		border-radius: 4rpx 4rpx 4rpx 4rpx;
-		border: 1rpx solid #EEEEEE;
-		margin-right: 30rpx;
-	}
+		.tab {
+			padding: 9rpx 24rpx;
+			box-sizing: border-box;
+			font-size: 30rpx;
+			color: #666;
+			border-radius: 4rpx 4rpx 4rpx 4rpx;
+			border: 1rpx solid #EEEEEE;
+			margin-right: 30rpx;
+		}
 
-	.tabactive {
-		background: #FDE935;
-		color: #333;
-		border: 1rpx solid #FDE935;
+		.tabactive {
+			background: #FDE935;
+			color: #333;
+			border: 1rpx solid #FDE935;
+		}
 	}
-}
 
-.popup-footer {
-	padding: 20rpx 45rpx;
-	box-sizing: border-box;
+	.popup-footer {
+		padding: 20rpx 45rpx;
+		box-sizing: border-box;
 
-	view {
-		font-size: 30rpx;
-		padding: 20rpx;
-		flex: 1;
-	}
+		view {
+			font-size: 30rpx;
+			padding: 20rpx;
+			flex: 1;
+		}
 
-	view:first-child {
-		color: #333;
-		background: transparent;
-		border-radius: 50rpx;
-		border: 1rpx solid #FDE935;
-		margin-right: 28rpx;
-	}
+		view:first-child {
+			color: #333;
+			background: transparent;
+			border-radius: 50rpx;
+			border: 1rpx solid #FDE935;
+			margin-right: 28rpx;
+		}
 
-	view:last-child {
-		background: #FDE935;
-		border-radius: 50rpx;
-		color: #1F1F1F;
+		view:last-child {
+			background: #FDE935;
+			border-radius: 50rpx;
+			color: #1F1F1F;
+		}
 	}
-}
 
-.popup-data {
+	.popup-data {
 
-	text {
-		font-size: 14px;
-		color: #999999;
-		display: inline-block;
-		width: 44%;
-		text-align: center;
-		border: 1px solid #DDDDDD;
-		border-radius: 4rpx;
-		font-size: 30rpx;
-		padding: 7rpx;
-		box-sizing: border-box;
-	}
+		text {
+			font-size: 14px;
+			color: #999999;
+			display: inline-block;
+			width: 44%;
+			text-align: center;
+			border: 1px solid #DDDDDD;
+			border-radius: 4rpx;
+			font-size: 30rpx;
+			padding: 7rpx;
+			box-sizing: border-box;
+		}
 
-	.active {
-		border: 1px solid #FDE935;
-		color: #333;
+		.active {
+			border: 1px solid #FDE935;
+			color: #333;
+		}
 	}
-}
 
-.picker-view {
-	width: 100%;
-	height: 400rpx;
+	.picker-view {
+		width: 100%;
+		height: 400rpx;
 
-	.item {
-		font-size: 28rpx;
-		color: #333;
+		.item {
+			font-size: 28rpx;
+			color: #333;
+		}
 	}
-}
 </style>

pages/wallet/incomeExpenseRecord.vue

@@ -70,7 +70,7 @@
 		</view>
 		<!-- 日期组件 -->
 		<uni-datePicker :show="dateShow" @close="dateShow=false" @customTime="customTime"
-			@customMonth="customMonthchange"></uni-datePicker>
+			@customMonth="customMonthchange" @tabClick="tabClick"></uni-datePicker>
 		<!-- 筛选组件 -->
 		<uni-Popup :show="incomeExpenseShow" @close='incomeExpenseShow=false' headerTitle="收支类型"
 			:statusList="quickOptions" contentType="status" @statusConfirm='incomeExpenseConfirm'>
@@ -209,6 +209,15 @@
 				this.dateShow = false;
 				this.transactionRecord();
 			},
+			tabClick(name) {
+				console.log(name);
+				if (name == '选择月份') {
+					this.info.createTimeStart = "";
+					this.info.createTimeEnd = "";
+				} else {
+					this.info.month = "";
+				}
+			}
 		}
 	}
 </script>