Initial commit of akmon project

pages/test/popup-date-picker-test.uvue

@@ -0,0 +1,149 @@
+<template>
+	<view class="test-container">
+		<text class="title">弹出式日期选择器测试</text>
+		
+		<view class="test-section">
+			<text class="section-title">深色主题（适用于渐变背景）</text>
+			<view class="dark-background">
+				<popup-date-picker 
+					v-model:value="startDate"
+					placeholder="选择开始日期"
+					title="选择开始日期"
+					theme="dark"
+					@change="onStartDateChange"
+				/>
+				<popup-date-picker 
+					v-model:value="endDate"
+					placeholder="选择结束日期"
+					title="选择结束日期"
+					theme="dark"
+					@change="onEndDateChange"
+				/>
+			</view>
+		</view>
+		
+		<view class="test-section">
+			<text class="section-title">浅色主题（适用于白色背景）</text>
+			<view class="light-background">
+				<popup-date-picker 
+					v-model:value="testDate"
+					placeholder="选择测试日期"
+					title="选择测试日期"
+					theme="light"
+					@change="onTestDateChange"
+				/>
+			</view>
+		</view>
+		
+		<view class="result-section">
+			<text class="result-title">选择结果：</text>
+			<text class="result-text">开始日期: {{ startDate || '未选择' }}</text>
+			<text class="result-text">结束日期: {{ endDate || '未选择' }}</text>
+			<text class="result-text">测试日期: {{ testDate || '未选择' }}</text>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	import PopupDatePicker from '@/components/popup-date-picker/popup-date-picker.uvue'
+
+	export default {
+		components: {
+			PopupDatePicker
+		},
+		
+		data() {
+			return {
+				startDate: '',
+				endDate: '',
+				testDate: ''
+			}
+		},
+		
+		methods: {
+			onStartDateChange(date: string) {
+				console.log('开始日期选择:', date)
+				uni.showToast({
+					title: `开始日期: ${date}`,
+					icon: 'none'
+				})
+			},
+			
+			onEndDateChange(date: string) {
+				console.log('结束日期选择:', date)
+				uni.showToast({
+					title: `结束日期: ${date}`,
+					icon: 'none'
+				})
+			},
+			
+			onTestDateChange(date: string) {
+				console.log('测试日期选择:', date)
+				uni.showToast({
+					title: `测试日期: ${date}`,
+					icon: 'none'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.test-container {
+		padding: 40rpx;
+		min-height: 100vh;
+		background: #F5F5F5;
+	}
+	
+	.title {
+		font-size: 48rpx;
+		font-weight: bold;
+		color: #333;
+		text-align: center;
+		margin-bottom: 60rpx;
+	}
+	
+	.test-section {
+		margin-bottom: 60rpx;
+	}
+	
+	.section-title {
+		font-size: 32rpx;
+		font-weight: 400;
+		color: #666;
+		margin-bottom: 20rpx;
+	}
+		.dark-background {
+		background-image: linear-gradient(to bottom right, #667eea, #764ba2);
+		padding: 40rpx;
+		border-radius: 20rpx;
+		gap: 20rpx;
+	}
+	
+	.light-background {
+		background: #FFFFFF;
+		padding: 40rpx;
+		border-radius: 20rpx;
+		border: 1px solid #E5E7EB;
+	}
+	
+	.result-section {
+		background: #FFFFFF;
+		padding: 40rpx;
+		border-radius: 20rpx;
+		border: 1px solid #E5E7EB;
+	}
+	
+	.result-title {
+		font-size: 32rpx;
+		font-weight: 400;
+		color: #333;
+		margin-bottom: 20rpx;
+	}
+	
+	.result-text {
+		font-size: 28rpx;
+		color: #666;
+		margin-bottom: 10rpx;
+	}
+</style>