mirror of https://github.com/rocboss/paopao-ce
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.0 KiB
73 lines
2.0 KiB
<template>
|
|
<div>
|
|
<main-nav title="收藏" />
|
|
|
|
<n-list class="main-content-wrap" bordered>
|
|
<template #footer>
|
|
<div class="pagination-wrap" v-if="totalPage > 0">
|
|
<n-pagination
|
|
:page="page"
|
|
@update:page="updatePage"
|
|
:page-slot="!store.state.collapsedRight ? 8 : 5"
|
|
:page-count="totalPage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="loading" class="skeleton-wrap">
|
|
<post-skeleton :num="pageSize" />
|
|
</div>
|
|
<div v-else>
|
|
<div class="empty-wrap" v-if="list.length === 0">
|
|
<n-empty size="large" description="暂无数据" />
|
|
</div>
|
|
|
|
<n-list-item v-for="post in list" :key="post.id">
|
|
<post-item :post="post" />
|
|
</n-list-item>
|
|
</div>
|
|
</n-list>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed, watch } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { getCollections } from '@/api/user';
|
|
|
|
const store = useStore();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const loading = ref(false);
|
|
const list = ref<any[]>([]);
|
|
const page = ref(+(route.query.p as any) || 1);
|
|
const pageSize = ref(20);
|
|
const totalPage = ref(0);
|
|
|
|
const loadPosts = () => {
|
|
loading.value = true;
|
|
getCollections({
|
|
page: page.value,
|
|
page_size: pageSize.value,
|
|
})
|
|
.then((rsp) => {
|
|
loading.value = false;
|
|
list.value = rsp.list;
|
|
totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
|
|
|
|
window.scrollTo(0, 0);
|
|
})
|
|
.catch((err) => {
|
|
loading.value = false;
|
|
});
|
|
};
|
|
const updatePage = (p: number) => {
|
|
page.value = p;
|
|
loadPosts();
|
|
};
|
|
onMounted(() => {
|
|
loadPosts();
|
|
});
|
|
</script> |