ReadingCheckInPage.vue
3.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!--
* @Date: 2025-03-21 13:27:25
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-21 13:27:26
* @FilePath: /mlaj/src/views/checkin/ReadingCheckInPage.vue
* @Description: 文件描述
-->
<template>
<AppLayout title="阅读打卡" :show-back="true">
<div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen p-4">
<!-- 时间筛选 -->
<FrostedGlass class="p-4 rounded-xl mb-4">
<div class="flex items-center justify-between mb-4">
<div class="text-sm text-gray-600">选择时间范围</div>
<div @click="showDatePicker = true" class="text-green-600 text-sm">
{{ formatDateRange }}
</div>
</div>
</FrostedGlass>
<!-- 打卡列表 -->
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<FrostedGlass v-for="item in list" :key="item.id" class="p-4 rounded-xl mb-4">
<div class="flex justify-between items-start mb-2">
<div class="text-gray-900 font-medium">{{ item.bookTitle }}</div>
<div class="text-sm text-gray-500">{{ item.submitTime }}</div>
</div>
<div class="text-gray-600 text-sm">
<div class="mb-1">
阅读时间：{{ item.readingTime }}
</div>
<div class="whitespace-pre-wrap">{{ item.thoughts }}</div>
</div>
</FrostedGlass>
</van-list>
<!-- 时间选择器 -->
<van-popup v-model:show="showDatePicker" position="bottom">
<van-picker-group
title="预约日期"
:tabs="['开始日期', '结束日期']"
@confirm="onConfirmDate"
@cancel="onCancelDate"
>
<van-date-picker v-model="startDate" :min-date="minDate" :max-date="maxDate" />
<van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />
</van-picker-group>
</van-popup>
</div>
</AppLayout>
</template>
<script setup>
import { ref, computed } from "vue";
import { DatePicker, List, Popup } from "vant";
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
// 列表数据
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const pageSize = 10;
const currentPage = ref(1);
// 日期选择
const showDatePicker = ref(false);
const startDate = ref(["2022", "06", "01"]);
const endDate = ref(["2023", "06", "01"]);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 5, 1);
// 格式化日期范围显示
const formatDateRange = computed(() => {
return `${startDate.value.join("-")} ~ ${endDate.value.join("-")}`;
});
// 确认日期选择
const onConfirmDate = (values) => {
const [start, end] = values;
startDate.value = start.selectedValues;
endDate.value = end.selectedValues;
showDatePicker.value = false;
// 重置列表并重新加载
list.value = [];
finished.value = false;
currentPage.value = 1;
onLoad();
};
// 取消日期选择
const onCancelDate = () => {
showDatePicker.value = false;
};
// 加载数据
const onLoad = () => {
loading.value = true;
// 模拟数据加载
setTimeout(() => {
const newItems = Array.from({ length: pageSize }, (_, index) => ({
id: list.value.length + index + 1,
bookTitle: ["深入理解计算机系统", "JavaScript高级程序设计", "算法导论", "设计模式"][Math.floor(Math.random() * 4)],
readingTime: "1小时30分钟",
thoughts: "今天的阅读收获很多，对这个主题有了更深的理解！",
submitTime: "2024-03-21 14:30:00",
}));
list.value.push(...newItems);
loading.value = false;
currentPage.value += 1;
if (list.value.length >= 30) {
finished.value = true;
}
}, 1000);
};
</script>