150 lines
3.0 KiB
Plaintext
150 lines
3.0 KiB
Plaintext
<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>
|