akmon/pages/common/date-picker-modal.uvue

<template>
	<view class="date-picker-modal" :class="{ 'theme-light': theme === 'light', 'theme-dark': theme === 'dark' }">
		<!-- 导航栏 -->
		<view class="modal-header">
			<view class="header-left">
				<button @click="cancel" class="cancel-btn">
					<simple-icon type="close" :size="20" color="#6B7280" />
				</button>
			</view>
			<view class="header-center">
				<text class="header-title">{{ title }}</text>
			</view>
			<view class="header-right">
				<button @click="confirm" class="confirm-btn">
					<text class="confirm-text">确定</text>
				</button>
			</view>
		</view>
		
		<!-- 日期选择器内容 -->
		<view class="modal-content">
			<view class="picker-container">
				<picker-date 
					ref="datePicker"
					:value="selectedDate" 
					:start-year="startYear"
					:end-year="endYear"
					@change="onDateChange" 
				/>
			</view>
			
			<!-- 快捷选择 -->
			<view class="quick-select">
				<text class="quick-title">快捷选择</text>
				<view class="quick-buttons">
					<button @click="selectToday" class="quick-btn">今天</button>
					<button @click="selectYesterday" class="quick-btn">昨天</button>
					<button @click="selectLastWeek" class="quick-btn">上周</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="uts">
	export default {
		data() {
			return {
				selectedDate: '',
				title: '选择日期',
				theme: 'light',
				startYear: 2020,
				endYear: 2030
			}
		},
		
		onLoad(options: OnLoadOptions) {
			var currentDate = '';
			var title = '';
			var theme = '';
			var startYear = '';
			var endYear = '';

			// 兼容 UTS 平台，不能用 in 操作符，直接尝试读取属性并做 null 检查
			if (typeof options === 'object' && options !== null) {
				if (options.currentDate != null) currentDate = options.currentDate;
				if (options.title != null) title = options.title;
				if (options.theme != null) theme = options.theme;
				if (options.startYear != null) startYear = options.startYear;
				if (options.endYear != null) endYear = options.endYear;
			}

			if (currentDate !== '' && currentDate != null) {
				this.selectedDate = currentDate as string;
			} else {
				this.selectedDate = new Date().toISOString().split('T')[0];
			}

			if (title !== '' && title != null) {
				this.title = decodeURIComponent(title as string);
			}

			if (theme !== '' && theme != null) {
				this.theme = theme as string;
			}

			if (startYear !== '' && startYear != null) {
				this.startYear = parseInt(startYear as string);
			}

			if (endYear !== '' && endYear != null) {
				this.endYear = parseInt(endYear as string);
			}
		},
		
		methods: {
			// 日期改变回调
			onDateChange(date: string) {
				this.selectedDate = date
			},
			
			// 确认选择
			confirm() {
				// 通过事件通信将选择的日期传递给父页面
				const eventChannel = this.getOpenerEventChannel()
				if (eventChannel) {
					eventChannel.emit('dateSelected', {
						date: this.selectedDate
					})
				}
				
				// 关闭当前页面
				uni.navigateBack()
			},
			
			// 取消操作
			cancel() {
				uni.navigateBack()
			},
			
			// 选择今天
			selectToday() {
				const today = new Date().toISOString().split('T')[0]
				this.selectedDate = today
			},
			
			// 选择昨天
			selectYesterday() {
				const yesterday = new Date()
				yesterday.setDate(yesterday.getDate() - 1)
				this.selectedDate = yesterday.toISOString().split('T')[0]
			},
			
			// 选择上周的今天
			selectLastWeek() {
				const lastWeek = new Date()
				lastWeek.setDate(lastWeek.getDate() - 7)
				this.selectedDate = lastWeek.toISOString().split('T')[0]
			}
		}
	}
</script>

<style>
	.date-picker-modal {
		height: 100vh;
		background: #FFFFFF;
	}
	
	/* 导航栏样式 */
	.modal-header {
		height: 88rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #F3F4F6;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	
	.header-left,
	.header-right {
		width: 120rpx;
		height: 88rpx;
		align-items: center;
		justify-content: center;
	}
	
	.header-center {
		flex: 1;
		align-items: center;
		justify-content: center;
	}
		.cancel-btn {
		width: 60rpx;
		height: 60rpx;
		border: none;
		background: transparent;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
	}
		.confirm-btn {
		padding: 12rpx 24rpx;
		background: #6366F1;
		border: none;
		border-radius: 12rpx;
	}
	
	.confirm-text {
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 400;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: 400;
		color: #1F2937;
	}
	
	/* 内容区域 */
	.modal-content {
		flex: 1;
		padding: 40rpx 30rpx;
	}
	
	.picker-container {
		background: #F9FAFB;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
	}
	
	/* 快捷选择 */
	.quick-select {
		margin-top: 40rpx;
	}
	
	.quick-title {
		font-size: 28rpx;
		color: #6B7280;
		margin-bottom: 20rpx;
	}
		.quick-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}
		.quick-buttons .quick-btn {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
		.quick-btn {
		padding: 20rpx 30rpx;
		background: #F3F4F6;
		border: none;
		border-radius: 15rpx;
		font-size: 26rpx;
		color: #374151;
	}
	
	/* 深色主题 */
	.date-picker-modal.theme-dark {
		background: #1F2937;
	}
	
	.date-picker-modal.theme-dark .modal-header {
		background: #1F2937;
		border-bottom-color: #374151;
	}
	
	.date-picker-modal.theme-dark .header-title {
		color: #FFFFFF;
	}
	
	.date-picker-modal.theme-dark .picker-container {
		background: #374151;
	}
	
	.date-picker-modal.theme-dark .quick-title {
		color: #9CA3AF;
	}
		.date-picker-modal.theme-dark .quick-btn {
		background: #374151;
		color: #D1D5DB;
	}
</style>