feat: update

frontend/wechat/src/views/PurchasedArticles.vue

@@ -1,18 +1,58 @@
 <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 showArticle = (id) => {
-    router.push(`/article/${id}`)
+const fetchArticles = async () => {
+    if (loading.value) return
+    loading.value = true
+    try {
+        const response = await postApi.mine({
+            page: currentPage.value,
+            limit
+        })
+        if (response.data.data?.length === 0) {
+            hasMore.value = false
+        } else {
+            purchasedArticles.value.push(...response.data.data)
+            currentPage.value += 1
+        }
+    } catch (error) {
+        console.error('Failed to fetch purchased articles:', error)
+    } finally {
+        loading.value = false
+    }
 }
 
-onMounted(async () => {
-    // TODO: Implement API call to fetch purchased articles
-    purchasedArticles.value = []
+useIntersectionObserver(
+    loadingTrigger,
+    ([{ isIntersecting }]) => {
+        if (isIntersecting && !loading.value && hasMore.value) {
+            fetchArticles()
+        }
+    },
+    {
+        threshold: 0,
+        rootMargin: '100px'
+    }
+)
+
+const showArticle = (id) => {
+    router.push(`/posts/${id}`)
+}
+
+onMounted(() => {
+    fetchArticles()
 })
 </script>
 
@@ -20,23 +60,32 @@ onMounted(async () => {
     <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>
+                <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" class="text-center text-gray-500 py-8">
-                    暂无已购买的文章
+                <div v-if="purchasedArticles.length === 0 && !loading" class="text-center text-gray-500 py-8">
+                    暂无已购买
                 </div>
 
                 <ArticleListItem v-for="article in purchasedArticles" :key="article.id" :article="article"
                     @click="showArticle(article.id)" class="mb-4" />
+
+                <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>
-
-<style scoped>
-/* Remove all styles as they're replaced by Tailwind classes */
-</style>