75 lines
1.5 KiB
Vue
75 lines
1.5 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;
|
|
items?: IStory[];
|
|
last?: boolean;
|
|
}>();
|
|
let data;
|
|
if (!props.prefix) {
|
|
data = props.items;
|
|
} else if (!props.items) {
|
|
data = (
|
|
await useApiFetch<any>(`${props.prefix}`, {
|
|
query: {
|
|
page: curPage,
|
|
},
|
|
})
|
|
).data;
|
|
}
|
|
let rdata = ref(data);
|
|
const pagiChange = async (page, pageSize) => {
|
|
curPage.value = page;
|
|
// await navigateTo({
|
|
// path: useRoute().fullPath,
|
|
// query: {
|
|
// page
|
|
// }
|
|
// })
|
|
let { data: data } = await useApiFetch(`${props.prefix}`, {
|
|
query: {
|
|
page: curPage,
|
|
},
|
|
});
|
|
rdata.value = data.value;
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<a-list :data-source="rdata.stories" item-layout="vertical">
|
|
<template #renderItem="{ item }">
|
|
<!-- {{ item.title }} -->
|
|
<single-story :story="item" :last="last" />
|
|
</template>
|
|
</a-list>
|
|
<a-pagination
|
|
:default-page-size="20"
|
|
:total="rdata.total"
|
|
:default-current="curPage as number"
|
|
@change="pagiChange"
|
|
:show-quick-jumper="true"
|
|
:show-size-changer="false"
|
|
/>
|
|
</div>
|
|
<!-- {
|
|
defaultPageSize: 20,
|
|
total: rdata.total,
|
|
defaultCurrent: curPage as number,
|
|
onChange: pagiChange,
|
|
// hideOnSinglePage: true,
|
|
showSizeChanger: false,
|
|
}-->
|
|
</template>
|
|
<style scoped>
|
|
.ant-list-items > * + * {
|
|
margin-top: 1.2em;
|
|
}
|
|
|
|
.ant-pagination {
|
|
text-align: center;
|
|
}
|
|
</style>
|