fix(检查页面): 修复日期选择和加载逻辑问题
修复初始化时日期选择逻辑错误,优化日期参数传递方式 添加状态变量跟踪用户是否主动选择日期 确保页面刷新和导航时正确加载数据
Showing
1 changed file
with
33 additions
and
15 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-05-29 15:34:17 | 2 | * @Date: 2025-05-29 15:34:17 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2026-01-18 22:09:36 | 4 | + * @LastEditTime: 2026-01-21 15:30:00 |
| 5 | * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue | 5 | * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -332,12 +332,22 @@ const formatter = (day) => { | ... | @@ -332,12 +332,22 @@ const formatter = (day) => { |
| 332 | // 添加一个响应式变量来存储当前选中的日期 | 332 | // 添加一个响应式变量来存储当前选中的日期 |
| 333 | const selectedDate = ref(new Date()); | 333 | const selectedDate = ref(new Date()); |
| 334 | 334 | ||
| 335 | +const hasUserSelectedDate = ref(!!route.query.date) | ||
| 336 | +const isInitializing = ref(true) | ||
| 337 | + | ||
| 335 | const onSelectDay = (day) => { | 338 | const onSelectDay = (day) => { |
| 339 | + const currentSelectedDate = dayjs(day).format('YYYY-MM-DD'); | ||
| 340 | + | ||
| 341 | + if (isInitializing.value && !hasUserSelectedDate.value) { | ||
| 342 | + selectedDate.value = currentSelectedDate; | ||
| 343 | + return; | ||
| 344 | + } | ||
| 345 | + | ||
| 336 | getTaskDetail(dayjs(day).format('YYYY-MM')); | 346 | getTaskDetail(dayjs(day).format('YYYY-MM')); |
| 337 | 347 | ||
| 338 | // 更新当前选中的日期 | 348 | // 更新当前选中的日期 |
| 339 | - const currentSelectedDate = dayjs(day).format('YYYY-MM-DD'); | ||
| 340 | selectedDate.value = currentSelectedDate; | 349 | selectedDate.value = currentSelectedDate; |
| 350 | + hasUserSelectedDate.value = true; | ||
| 341 | 351 | ||
| 342 | // 修改浏览器地址把当前的date加入地址栏, 页面不刷新 | 352 | // 修改浏览器地址把当前的date加入地址栏, 页面不刷新 |
| 343 | // 使用replace替代push,避免在浏览器历史记录中添加多个条目 | 353 | // 使用replace替代push,避免在浏览器历史记录中添加多个条目 |
| ... | @@ -353,7 +363,7 @@ const onSelectDay = (day) => { | ... | @@ -353,7 +363,7 @@ const onSelectDay = (day) => { |
| 353 | checkinDataList.value = [] | 363 | checkinDataList.value = [] |
| 354 | finished.value = false | 364 | finished.value = false |
| 355 | // 重新加载数据 | 365 | // 重新加载数据 |
| 356 | - onLoad(currentSelectedDate) | 366 | + onLoad(currentSelectedDate, true) |
| 357 | } | 367 | } |
| 358 | 368 | ||
| 359 | const onClickSubtitle = (evt) => { | 369 | const onClickSubtitle = (evt) => { |
| ... | @@ -384,7 +394,7 @@ const onSelectCourse = (course) => { | ... | @@ -384,7 +394,7 @@ const onSelectCourse = (course) => { |
| 384 | checkinDataList.value = [] | 394 | checkinDataList.value = [] |
| 385 | finished.value = false | 395 | finished.value = false |
| 386 | // 重新加载数据 | 396 | // 重新加载数据 |
| 387 | - onLoad(dayjs(selectedDate.value).format('YYYY-MM-DD')) | 397 | + onLoad(route.query.date, hasUserSelectedDate.value) |
| 388 | } | 398 | } |
| 389 | 399 | ||
| 390 | /** | 400 | /** |
| ... | @@ -597,17 +607,21 @@ const finished = ref(false) | ... | @@ -597,17 +607,21 @@ const finished = ref(false) |
| 597 | const limit = ref(3) | 607 | const limit = ref(3) |
| 598 | const page = ref(0) | 608 | const page = ref(0) |
| 599 | 609 | ||
| 600 | -const onLoad = async (date) => { | 610 | +const onLoad = async (date, isUserInitiated) => { |
| 601 | const nextPage = page.value; | 611 | const nextPage = page.value; |
| 602 | - const current_date = date || route.query.date || dayjs().format('YYYY-MM-DD'); | 612 | + const current_date = date || route.query.date; |
| 603 | - // | 613 | + const shouldPassDate = typeof isUserInitiated === 'boolean' ? isUserInitiated : hasUserSelectedDate.value |
| 604 | - const res = await getUploadTaskListAPI({ | 614 | + const params = { |
| 605 | limit: limit.value, | 615 | limit: limit.value, |
| 606 | page: nextPage, | 616 | page: nextPage, |
| 607 | task_id: route.query.id, | 617 | task_id: route.query.id, |
| 608 | subtask_id: selectedSubtaskId.value, | 618 | subtask_id: selectedSubtaskId.value, |
| 609 | - date: current_date | 619 | + }; |
| 610 | - }); | 620 | + if (current_date && shouldPassDate) { |
| 621 | + params.date = current_date; | ||
| 622 | + } | ||
| 623 | + | ||
| 624 | + const res = await getUploadTaskListAPI(params); | ||
| 611 | if (res.code === 1) { | 625 | if (res.code === 1) { |
| 612 | // 整理数据结构 | 626 | // 整理数据结构 |
| 613 | const newItems = formatData(res.data); | 627 | const newItems = formatData(res.data); |
| ... | @@ -635,6 +649,7 @@ const initPage = async (date) => { | ... | @@ -635,6 +649,7 @@ const initPage = async (date) => { |
| 635 | selectedSubtaskId.value = ''; | 649 | selectedSubtaskId.value = ''; |
| 636 | 650 | ||
| 637 | const current_date = date || route.query.date; | 651 | const current_date = date || route.query.date; |
| 652 | + hasUserSelectedDate.value = !!current_date; | ||
| 638 | if (current_date) { | 653 | if (current_date) { |
| 639 | selectedDate.value = new Date(current_date); | 654 | selectedDate.value = new Date(current_date); |
| 640 | await getTaskDetail(dayjs(current_date).format('YYYY-MM')); | 655 | await getTaskDetail(dayjs(current_date).format('YYYY-MM')); |
| ... | @@ -642,7 +657,7 @@ const initPage = async (date) => { | ... | @@ -642,7 +657,7 @@ const initPage = async (date) => { |
| 642 | nextTick(() => { | 657 | nextTick(() => { |
| 643 | calendarRef.value?.reset(new Date(current_date)); | 658 | calendarRef.value?.reset(new Date(current_date)); |
| 644 | }) | 659 | }) |
| 645 | - onLoad(current_date); | 660 | + onLoad(current_date, true); |
| 646 | } else { | 661 | } else { |
| 647 | selectedDate.value = new Date(); | 662 | selectedDate.value = new Date(); |
| 648 | await getTaskDetail(dayjs().format('YYYY-MM')); | 663 | await getTaskDetail(dayjs().format('YYYY-MM')); |
| ... | @@ -650,7 +665,7 @@ const initPage = async (date) => { | ... | @@ -650,7 +665,7 @@ const initPage = async (date) => { |
| 650 | nextTick(() => { | 665 | nextTick(() => { |
| 651 | calendarRef.value?.reset(new Date()); | 666 | calendarRef.value?.reset(new Date()); |
| 652 | }) | 667 | }) |
| 653 | - onLoad(dayjs().format('YYYY-MM-DD')); | 668 | + onLoad(null, false); |
| 654 | } | 669 | } |
| 655 | } | 670 | } |
| 656 | 671 | ||
| ... | @@ -658,6 +673,9 @@ onMounted(async () => { | ... | @@ -658,6 +673,9 @@ onMounted(async () => { |
| 658 | // 记录当前的taskId | 673 | // 记录当前的taskId |
| 659 | lastTaskId.value = route.query.id; | 674 | lastTaskId.value = route.query.id; |
| 660 | await initPage(route.query.date); | 675 | await initPage(route.query.date); |
| 676 | + nextTick(() => { | ||
| 677 | + isInitializing.value = false; | ||
| 678 | + }) | ||
| 661 | 679 | ||
| 662 | // 获取作品类型数据 | 680 | // 获取作品类型数据 |
| 663 | try { | 681 | try { |
| ... | @@ -753,13 +771,13 @@ onDeactivated(() => { | ... | @@ -753,13 +771,13 @@ onDeactivated(() => { |
| 753 | }) | 771 | }) |
| 754 | 772 | ||
| 755 | const refresh_checkin_list = async () => { | 773 | const refresh_checkin_list = async () => { |
| 756 | - const current_date = route.query.date || dayjs().format('YYYY-MM-DD') | 774 | + const current_date = route.query.date |
| 757 | checkinDataList.value = [] | 775 | checkinDataList.value = [] |
| 758 | page.value = 0 | 776 | page.value = 0 |
| 759 | finished.value = false | 777 | finished.value = false |
| 760 | loading.value = true | 778 | loading.value = true |
| 761 | - await getTaskDetail(dayjs(current_date).format('YYYY-MM')) | 779 | + await getTaskDetail(dayjs(current_date || dayjs()).format('YYYY-MM')) |
| 762 | - await onLoad(current_date) | 780 | + await onLoad(current_date, hasUserSelectedDate.value) |
| 763 | } | 781 | } |
| 764 | 782 | ||
| 765 | onActivated(async () => { | 783 | onActivated(async () => { | ... | ... |
-
Please register or login to post a comment