64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import singleStory from "~/components/listings/singleStory.vue";
|
|
import { IStory } from "@models/stories";
|
|
const route = useRoute();
|
|
let curPage = ref(route.query.page || 1);
|
|
const props = defineProps<{
|
|
prefix: string;
|
|
last?: boolean;
|
|
}>();
|
|
let data = (
|
|
await useApiFetch<any>(props.prefix, {
|
|
query: {
|
|
page: curPage.value,
|
|
},
|
|
})
|
|
).data.value;
|
|
let rdata = ref(data);
|
|
const loading = ref<boolean>(false);
|
|
const pagiChange = (page, pageSize) => {
|
|
loading.value = true;
|
|
curPage.value = page;
|
|
useApiFetch(props.prefix, {
|
|
query: {
|
|
page,
|
|
},
|
|
}).then(({ data }) => {
|
|
rdata.value = data.value;
|
|
loading.value = false;
|
|
navigateTo({
|
|
path: useRoute().fullPath,
|
|
query: {
|
|
page,
|
|
},
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<a-list v-model:data-source="rdata.stories" item-layout="vertical" v-model:loading="loading">
|
|
<template #renderItem="{ item }">
|
|
<single-story :key="item._id" :story="item" :last="last" />
|
|
</template>
|
|
</a-list>
|
|
<a-pagination
|
|
v-model:disabled="loading"
|
|
:default-page-size="20"
|
|
:total="rdata.total"
|
|
@change="pagiChange"
|
|
:show-quick-jumper="true"
|
|
:show-size-changer="false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
ul.ant-list-items > * + * {
|
|
margin-top: 1.2em;
|
|
}
|
|
|
|
.ant-pagination {
|
|
text-align: center;
|
|
}
|
|
</style>
|