Initial commit of akmon project
This commit is contained in:
268
pages/common/date-picker-modal.uvue
Normal file
268
pages/common/date-picker-modal.uvue
Normal file
@@ -0,0 +1,268 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user