feat: complete post page
This commit is contained in:
@@ -43,9 +43,9 @@ const loading = ref(false);
|
||||
const posts = ref([]);
|
||||
|
||||
// Pagination state
|
||||
const page = ref(0); // 改为从0开始计数
|
||||
const limit = ref(10);
|
||||
const total = ref(0);
|
||||
const first = ref(0); // 当前页起始索引
|
||||
const rows = ref(10); // 每页显示数量
|
||||
const total = ref(0); // 总记录数
|
||||
|
||||
// Status mapping
|
||||
const statusMap = {
|
||||
@@ -120,18 +120,27 @@ const calculateDiscountPrice = (price, discount) => {
|
||||
const fetchPosts = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await postService.getPosts(page.value + 1, limit.value); // API调用时页码加1
|
||||
// Calculate current page (1-based) from first and rows
|
||||
const currentPage = (first.value / rows.value) + 1;
|
||||
console.log('Fetching page:', currentPage); // Debug log
|
||||
|
||||
const response = await postService.getPosts({
|
||||
page: currentPage,
|
||||
limit: rows.value
|
||||
});
|
||||
|
||||
posts.value = response.items.map(post => ({
|
||||
...post,
|
||||
status: statusMap[post.status] || '未知',
|
||||
mediaTypes: getMediaTypes(post.assets),
|
||||
price: post.price / 100, // Convert cents to yuan
|
||||
price: post.price / 100,
|
||||
publishedAt: formatDateTime(post.created_at),
|
||||
viewCount: post.views,
|
||||
likes: post.likes
|
||||
}));
|
||||
total.value = response.total;
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error); // Debug log
|
||||
toast.add({ severity: 'error', summary: '错误', detail: '加载文章失败', life: 3000 });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
@@ -140,8 +149,9 @@ const fetchPosts = async () => {
|
||||
|
||||
// Handle page change
|
||||
const onPage = (event) => {
|
||||
page.value = event.page; // PrimeVue的页码从0开始
|
||||
limit.value = event.rows;
|
||||
console.log('Page event:', event); // Debug log
|
||||
first.value = event.first;
|
||||
rows.value = event.rows;
|
||||
fetchPosts();
|
||||
};
|
||||
|
||||
@@ -188,8 +198,8 @@ const formatMediaTypes = (mediaTypes) => {
|
||||
<InputText v-model="globalFilterValue" placeholder="搜索文章..." class="flex-1" />
|
||||
</div>
|
||||
|
||||
<DataTable v-model:filters="filters" :value="posts" :paginator="true" :rows="limit" :totalRecords="total"
|
||||
:loading="loading" :lazy="true" v-model:first="page" @page="onPage"
|
||||
<DataTable v-model:filters="filters" :value="posts" :paginator="true" :rows="rows" :totalRecords="total"
|
||||
:loading="loading" :lazy="true" :first="first" @page="onPage"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
:rowsPerPageOptions="[10, 20, 50]"
|
||||
currentPageReportTemplate="显示第 {first} 到 {last} 条,共 {totalRecords} 条结果" dataKey="id"
|
||||
|
||||
Reference in New Issue
Block a user