<template>
|
<van-popup v-model:show="showPopup" position="center" round>
|
<div class="popup-content">
|
<h3>检查时间</h3>
|
<div class="date-range-buttons">
|
<van-button :type="typeData === '近三个月' ? 'primary' : 'default'" size="small" @click="selectDateRange('近三个月')">近三个月</van-button>
|
<van-button :type="typeData === '近6个月' ? 'primary' : 'default'" size="small" @click="selectDateRange('近6个月')">近6个月</van-button>
|
<van-button :type="typeData === '近1年' ? 'primary' : 'default'" size="small" @click="selectDateRange('近1年')">近1年</van-button>
|
<van-button :type="typeData === '全部' ? 'primary' : 'default'" size="small" @click="selectDateRange('全部')">全部</van-button>
|
</div>
|
<div class="date-range-inputs">
|
<van-field v-model="startDate" placeholder="请选择开始日期" readonly @click="openDatePicker('start')">
|
<template #button>
|
<van-icon name="arrow-down" />
|
</template>
|
</van-field>
|
<span>-</span>
|
<van-field v-model="endDate" placeholder="请选择结束日期" readonly @click="openDatePicker('end')">
|
<template #button>
|
<van-icon name="arrow-down" />
|
</template>
|
</van-field>
|
</div>
|
<div class="buttons">
|
<van-button type="default" block @click="cancel">取消</van-button>
|
<van-button type="primary" block @click="confirm">确认</van-button>
|
</div>
|
</div>
|
</van-popup>
|
|
<!-- 使用 DatetimePicker，放在底部弹出的 Popup 中 -->
|
<van-popup v-model:show="showDatePopup" position="bottom">
|
<van-datetime-picker
|
v-model="currentDate"
|
type="date"
|
:min-date="minDate"
|
:max-date="maxDate"
|
@confirm="onConfirmDate"
|
@cancel="closeDatePicker"
|
/>
|
</van-popup>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue'
|
|
const props = defineProps({
|
modelValue: Boolean,
|
})
|
const emit = defineEmits(['update:modelValue', 'confirm'])
|
|
// 控制主弹窗的显示/隐藏 (v-model)
|
const showPopup = computed({
|
get: () => props.modelValue,
|
set: value => emit('update:modelValue', value),
|
})
|
|
// 日期选择相关的状态
|
const startDate = ref('')
|
const endDate = ref('')
|
const currentDate = ref(new Date())
|
const minDate = new Date(2020, 0, 1) // 2020-01-01
|
const maxDate = new Date(2050, 11, 31) // 2050-12-31
|
|
// 控制日期选择器弹窗 (DatetimePicker) 的显示/隐藏
|
const showDatePopup = ref(false)
|
// 记录当前是选择开始日期还是结束日期
|
const datePickerType = ref('')
|
const typeData=ref('近三个月')
|
// 选择预设时间范围
|
const selectDateRange = (range) => {
|
const now = new Date()
|
typeData.value=range
|
switch (range) {
|
case '近三个月':
|
const threeMonthsAgo = new Date(now)
|
threeMonthsAgo.setMonth(now.getMonth() - 3)
|
startDate.value = formatDate(threeMonthsAgo)
|
endDate.value = formatDate(now)
|
break
|
case '近6个月':
|
const sixMonthsAgo = new Date(now)
|
sixMonthsAgo.setMonth(now.getMonth() - 6)
|
startDate.value = formatDate(sixMonthsAgo)
|
endDate.value = formatDate(now)
|
break
|
case '近1年':
|
const oneYearAgo = new Date(now)
|
oneYearAgo.setFullYear(now.getFullYear() - 1)
|
startDate.value = formatDate(oneYearAgo)
|
endDate.value = formatDate(now)
|
break
|
case '全部':
|
startDate.value = ''
|
endDate.value = ''
|
break
|
}
|
}
|
|
// 格式化日期为 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}`
|
}
|
|
// 打开日期选择器弹窗 (方法名已更改)
|
const openDatePicker = (type) => {
|
if (typeData.value==='全部'){
|
return
|
}
|
datePickerType.value = type
|
// 设置当前选择的日期：如果已有值则用已有值，否则用今天
|
if (type === 'start' && startDate.value) {
|
currentDate.value = new Date(startDate.value)
|
} else if (type === 'end' && endDate.value) {
|
currentDate.value = new Date(endDate.value)
|
} else {
|
currentDate.value = new Date()
|
}
|
showDatePopup.value = true // 显示日期选择器弹窗
|
}
|
|
// 关闭日期选择器弹窗 (方法名已更改)
|
const closeDatePicker = () => {
|
showDatePopup.value = false
|
}
|
|
// 确认选择日期
|
const onConfirmDate = (value) => {
|
if (datePickerType.value === 'start') {
|
startDate.value = formatDate(value)
|
} else if (datePickerType.value === 'end') {
|
endDate.value = formatDate(value)
|
}
|
closeDatePicker() // 确认后关闭弹窗
|
}
|
|
// 取消主弹窗
|
const cancel = () => {
|
emit('update:modelValue', false)
|
}
|
|
// 确认选择并关闭主弹窗
|
const confirm = () => {
|
emit('confirm', { startDate: startDate.value, endDate: endDate.value, type: typeData.value })
|
emit('update:modelValue', false)
|
}
|
onMounted(()=>{
|
// 初始化为近三个月
|
selectDateRange('近三个月')
|
})
|
</script>
|
|
<style scoped>
|
.popup-content {
|
padding: 20px;
|
text-align: center;
|
width: 80vw;
|
max-width: 400px;
|
}
|
|
.date-range-buttons {
|
margin-bottom: 20px;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.date-range-buttons .van-button {
|
flex: 1;
|
margin: 0 5px;
|
}
|
|
.date-range-inputs {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
}
|
|
.date-range-inputs span {
|
margin: 0 10px;
|
}
|
|
.buttons {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 20px;
|
}
|
|
.buttons .van-button {
|
width: 48%;
|
}
|
</style>
|
