feat(资讯头条): 优化日期选择功能并显示当前选中日期
- 在日历图标旁显示当前选中的日期 - 调整日期选择范围从10天增加到20天 - 修复日期选择后的格式问题,确保包含时间信息 - 移除日历组件的range模式限制
This commit is contained in:
parent
0c9a07e76d
commit
654b908f16
|
|
@ -67,7 +67,17 @@
|
||||||
<view style="background-color: white; margin-top: 40rpx">
|
<view style="background-color: white; margin-top: 40rpx">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
<indexMenuTitle title="资讯头条 Top20"></indexMenuTitle>
|
<indexMenuTitle title="资讯头条 Top20"></indexMenuTitle>
|
||||||
<u-icon name="calendar" size="26" style="margin-right: 10px; margin-top: 10px" @click="showCalendar"></u-icon>
|
<view
|
||||||
|
style="display: flex; align-items: center; margin-right: 15rpx;font-size: 30rpx;gap: 10rpx;margin-top: 10rpx;">
|
||||||
|
{{ chooseDate.startDate.split(' ')[0] }}
|
||||||
|
<u-icon name="calendar" size="26" style="margin-right: 10rpx; " @click="showCalendar"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view style="display: flex; align-items: center; gap: 25rpx;margin-right: 15px;margin-top: 10px;">
|
||||||
|
<u-icon name="play-left-fill" color="#2979ff" size="20"></u-icon>
|
||||||
|
{{ chooseDate.startDate.split(' ')[0] }}
|
||||||
|
<u-icon name="play-right-fill" color="#2979ff" size="20"></u-icon>
|
||||||
|
</view> -->
|
||||||
</div>
|
</div>
|
||||||
<RankList :newsList="newsList"></RankList>
|
<RankList :newsList="newsList"></RankList>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -103,7 +113,7 @@
|
||||||
<LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
|
<LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
|
||||||
@handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
|
@handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
|
||||||
|
|
||||||
<u-calendar :show="calendarShow" :min-date="minDate" closeOnClickOverlay :max-date="maxDate" mode="range"
|
<u-calendar :show="calendarShow" :min-date="minDate" closeOnClickOverlay :max-date="maxDate"
|
||||||
@confirm="calendarConfirm" @close="calendarShow = false">
|
@confirm="calendarConfirm" @close="calendarShow = false">
|
||||||
</u-calendar>
|
</u-calendar>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -135,7 +145,7 @@ let month = d.getMonth() + 1;
|
||||||
month = month < 10 ? `0${month}` : month;
|
month = month < 10 ? `0${month}` : month;
|
||||||
const date = d.getDate();
|
const date = d.getDate();
|
||||||
const maxDate = `${year}-${month}-${date + 1}`;
|
const maxDate = `${year}-${month}-${date + 1}`;
|
||||||
const minDate = `${year}-${month}-${date - 10}`;
|
const minDate = `${year}-${month}-${date - 20}`;
|
||||||
|
|
||||||
const calendarShow = ref(false);
|
const calendarShow = ref(false);
|
||||||
const newsList = ref([]);
|
const newsList = ref([]);
|
||||||
|
|
@ -166,15 +176,16 @@ async function getTopNum() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const chooseDate = reactive({
|
const chooseDate = reactive({
|
||||||
startDate: null,
|
startDate: `${year}-${month}-${date}`,
|
||||||
endDate: null,
|
endDate: null,
|
||||||
});
|
});
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
|
|
||||||
function calendarConfirm(dateList) {
|
function calendarConfirm(dateList) {
|
||||||
|
console.log("🚀 ~ calendarConfirm ~ dateList:", dateList)
|
||||||
if (dateList && dateList.length > 0) {
|
if (dateList && dateList.length > 0) {
|
||||||
chooseDate.startDate = dateList[0];
|
chooseDate.startDate = dateList[0] + ' 00:00:00';
|
||||||
chooseDate.endDate = dateList[dateList.length - 1];
|
chooseDate.endDate = dateList[dateList.length - 1] + ' 23:59:59';
|
||||||
}
|
}
|
||||||
getNewsList();
|
getNewsList();
|
||||||
calendarShow.value = false;
|
calendarShow.value = false;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue