89 lines
2.6 KiB
Vue
89 lines
2.6 KiB
Vue
<script setup>
|
||
import { postApi } from '@/api/postApi'
|
||
import ArticleListItem from '@/components/ArticleListItem.vue'
|
||
import { useIntersectionObserver } from '@vueuse/core'
|
||
import { onMounted, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
const purchasedArticles = ref([])
|
||
const loadingTrigger = ref(null)
|
||
const loading = ref(false)
|
||
const hasMore = ref(true)
|
||
const currentPage = ref(1)
|
||
const limit = 10
|
||
|
||
const fetchArticles = async () => {
|
||
if (loading.value) return
|
||
loading.value = true
|
||
try {
|
||
const { data } = await postApi.mine({
|
||
page: currentPage.value,
|
||
limit
|
||
})
|
||
if (data.items?.length === 0) {
|
||
hasMore.value = false
|
||
} else {
|
||
purchasedArticles.value.push(...data.items)
|
||
currentPage.value += 1
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch purchased articles:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
useIntersectionObserver(
|
||
loadingTrigger,
|
||
([{ isIntersecting }]) => {
|
||
if (isIntersecting && !loading.value && hasMore.value) {
|
||
fetchArticles()
|
||
}
|
||
},
|
||
{
|
||
threshold: 0,
|
||
rootMargin: '100px'
|
||
}
|
||
)
|
||
|
||
onMounted(() => {
|
||
fetchArticles()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="h-full flex flex-col">
|
||
<div class="flex-none bg-white border-b border-gray-200 z-50 shadow">
|
||
<div class="p-4">
|
||
<h2 class="text-lg font-medium text-gray-800">已购买</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex-1 overflow-y-auto">
|
||
<div class="p-4">
|
||
<div v-if="purchasedArticles.length === 0 && !loading" class="text-center text-gray-500 py-8">
|
||
暂无已购买
|
||
</div>
|
||
|
||
<div v-for="article in purchasedArticles" :key="article.id" class="mb-4">
|
||
<ArticleListItem :article="{ ...article, bought: true }" />
|
||
</div>
|
||
|
||
<div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
|
||
<div v-if="loading"
|
||
class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600 mx-auto">
|
||
</div>
|
||
<div v-else class="h-8">
|
||
<!-- 空白占位，保持触发器可见 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="!hasMore && purchasedArticles.length > 0" class="text-center text-gray-500 py-4">
|
||
没有更多了
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|