145 lines
3.1 KiB
Vue
145 lines
3.1 KiB
Vue
<template>
|
|
<view class="date-picker">
|
|
<view class="date-list">
|
|
<view
|
|
v-for="(item, index) in dates"
|
|
:key="index"
|
|
class="date-item"
|
|
:class="{ active: index === activeIndex }"
|
|
@click="selectDate(index)"
|
|
>
|
|
<text class="label">{{ item.label }}</text>
|
|
<text class="date">{{ item.date }}</text>
|
|
</view>
|
|
|
|
<!-- 日历按钮 -->
|
|
<view class="calendar-btn btn-bom" @click="openCalendar">
|
|
<image src="/static/booking_calendar.png" mode="widthFix" class="calendar-img" />
|
|
<text class="calendar-text">日历</text>
|
|
</view>
|
|
</view>
|
|
<!-- 日历组件 -->
|
|
<Calender
|
|
:visible="calendarVisible"
|
|
mode="single"
|
|
:default-value="selectedDate"
|
|
@close="handleCalendarClose"
|
|
@select="handleDateSelect"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
const emit = defineEmits(['update:date']); // 声明事件
|
|
import Calender from '@/components/Calender/index.vue';
|
|
|
|
const activeIndex = ref(2); // 默认今天
|
|
const dates = ref([]);
|
|
|
|
const calendarVisible = ref(false)
|
|
const selectedDate = ref('')
|
|
|
|
// 处理日历关闭
|
|
const handleCalendarClose = () => {
|
|
calendarVisible.value = false
|
|
}
|
|
|
|
// 处理日期选择
|
|
const handleDateSelect = (data) => {
|
|
selectedDate.value = data.date
|
|
calendarVisible.value = false
|
|
console.log('选择的日期:', data.date)
|
|
emit('update:date', { fullDate: selectedDate.value}); // 传回父组件
|
|
}
|
|
|
|
// 初始化日期（前天、昨天、今天、明天、后天）
|
|
const initDates = () => {
|
|
const today = new Date();
|
|
const labels = ['前天', '昨天', '今天', '明天', '后天'];
|
|
for (let i = -2; i <= 2; i++) {
|
|
const d = new Date(today);
|
|
d.setDate(today.getDate() + i);
|
|
const month = d.getMonth() + 1;
|
|
const day = d.getDate();
|
|
dates.value.push({
|
|
label: labels[i + 2],
|
|
date: `${month}/${day}`,
|
|
fullDate: `${d.getFullYear()}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
|
});
|
|
}
|
|
};
|
|
|
|
const selectDate = (index) => {
|
|
activeIndex.value = index;
|
|
emit('update:date', dates.value[index]); // 传回父组件
|
|
};
|
|
|
|
const openCalendar = () => {
|
|
calendarVisible.value = true
|
|
};
|
|
|
|
onMounted(() => {
|
|
initDates();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.date-picker {
|
|
background: rgba(140, 236, 255, 0.24);
|
|
padding: 8rpx 0;
|
|
border-radius: 8rpx;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.date-list {
|
|
display: flex;
|
|
}
|
|
|
|
.date-item,
|
|
.calendar-btn {
|
|
flex: 1; /* 等宽 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12rpx 0;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.date {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #555;
|
|
}
|
|
|
|
.date-item.active {
|
|
background-color: #00A6FF;
|
|
}
|
|
.date-item.active .label,
|
|
.date-item.active .date {
|
|
color: #fff;
|
|
}
|
|
|
|
/* 日历按钮 */
|
|
.calendar-btn {
|
|
background: #fff;
|
|
border-radius: 0 16rpx 16rpx 0;
|
|
margin: -8rpx 0;
|
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
|
|
}
|
|
.calendar-img {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.calendar-text {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-top: 4rpx;
|
|
}
|
|
</style>
|