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