diff --git a/frontend/wechat/src/api/client.js b/frontend/wechat/src/api/client.js
new file mode 100644
index 0000000..adbb79f
--- /dev/null
+++ b/frontend/wechat/src/api/client.js
@@ -0,0 +1,48 @@
+import { useAuthStore } from '@/stores/auth';
+import axios from 'axios';
+
+// Create axios instance with default config
+const client = axios.create({
+    baseURL: '/v1',
+    timeout: 10000,
+    headers: {
+        'Content-Type': 'application/json',
+    }
+});
+
+// Request interceptor
+client.interceptors.request.use(
+    config => {
+        const authStore = useAuthStore();
+        if (authStore.isAuthenticated && authStore.token) {
+            config.headers.Authorization = `Bearer ${authStore.token}`;
+        }
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+// Response interceptor
+client.interceptors.response.use(
+    response => {
+        return response
+    },
+    error => {
+        // Handle HTTP errors here
+        if (error.response) {
+            // Server responded with error status
+            console.error('API Error:', error.response.status, error.response.data);
+        } else if (error.request) {
+            // Request made but no response received
+            console.error('API Error: No response received', error.request);
+        } else {
+            // Something else happened
+            console.error('API Error:', error.message);
+        }
+        return Promise.reject(error);
+    }
+);
+
+export default client;
diff --git a/frontend/wechat/src/api/postApi.js b/frontend/wechat/src/api/postApi.js
new file mode 100644
index 0000000..3b584b2
--- /dev/null
+++ b/frontend/wechat/src/api/postApi.js
@@ -0,0 +1,27 @@
+import client from './client';
+
+export const postApi = {
+    list({ page = 1, limit = 10, keyword = '' } = {}) {
+        return client.get('/api/posts', {
+            params: {
+                page,
+                limit,
+                keyword: keyword.trim()
+            }
+        });
+    },
+    show(id) {
+        return client.get(`/api/posts/${id}`);
+    },
+    mine({ page = 1, limit = 10 } = {}) {
+        return client.get('/api/posts/mine', {
+            params: {
+                page,
+                limit
+            }
+        });
+    },
+    buy(id) {
+        return client.post(`/api/posts/buy/${id}`);
+    }
+}
\ No newline at end of file
diff --git a/frontend/wechat/src/stores/article.js b/frontend/wechat/src/stores/article.js
deleted file mode 100644
index 679ad9d..0000000
--- a/frontend/wechat/src/stores/article.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useArticleStore = defineStore('article', {
-    state: () => ({
-        articles: [],
-        page: 1,
-        loading: false,
-        hasMore: true,
-        searchQuery: ''
-    }),
-
-    actions: {
-        async fetchArticles() {
-            if (this.loading || !this.hasMore) return
-            this.loading = true
-            try {
-                const response = await fetch(`/api/posts?page=${this.page}&q=${this.searchQuery}`)
-                const data = await response.json()
-                const items = data.items || []
-                this.articles = [...this.articles, ...items]
-                this.hasMore = items.length > 0  // 只有当返回的列表为空时，才设置 hasMore 为 false
-                this.page++
-            } finally {
-                this.loading = false
-            }
-        },
-
-        setSearchQuery(query) {
-            this.searchQuery = query
-            this.articles = []
-            this.page = 1
-            this.hasMore = true
-            this.fetchArticles()
-        }
-    }
-})
diff --git a/frontend/wechat/src/stores/article_list.json b/frontend/wechat/src/stores/article_list.json
deleted file mode 100644
index e135c57..0000000
--- a/frontend/wechat/src/stores/article_list.json
+++ /dev/null
@@ -1,297 +0,0 @@
-{
-    "page": 7,
-    "limit": 10,
-    "total": 100,
-    "items": [
-        {
-            "id": 40,
-            "created_at": "2025-04-11T15:03:25.666419Z",
-            "updated_at": "2025-04-11T15:03:25.666419Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-39",
-            "description": "test-description-39",
-            "content": "test-content-39",
-            "price": 6747,
-            "discount": 98,
-            "views": 8091,
-            "likes": 9914,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 8143
-                },
-                {
-                    "type": "video",
-                    "media": 2977
-                }
-            ]
-        },
-        {
-            "id": 39,
-            "created_at": "2025-04-11T15:03:25.661237Z",
-            "updated_at": "2025-04-11T15:03:25.661237Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-38",
-            "description": "test-description-38",
-            "content": "test-content-38",
-            "price": 2891,
-            "discount": 45,
-            "views": 4462,
-            "likes": 6110,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 5431
-                },
-                {
-                    "type": "video",
-                    "media": 3866
-                }
-            ]
-        },
-        {
-            "id": 38,
-            "created_at": "2025-04-11T15:03:25.657112Z",
-            "updated_at": "2025-04-11T15:03:25.657112Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-37",
-            "description": "test-description-37",
-            "content": "test-content-37",
-            "price": 904,
-            "discount": 70,
-            "views": 8988,
-            "likes": 816,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 3307
-                },
-                {
-                    "type": "video",
-                    "media": 2933
-                }
-            ]
-        },
-        {
-            "id": 37,
-            "created_at": "2025-04-11T15:03:25.65266Z",
-            "updated_at": "2025-04-11T15:03:25.65266Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-36",
-            "description": "test-description-36",
-            "content": "test-content-36",
-            "price": 4476,
-            "discount": 45,
-            "views": 9910,
-            "likes": 9295,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 3472
-                },
-                {
-                    "type": "video",
-                    "media": 3283
-                }
-            ]
-        },
-        {
-            "id": 36,
-            "created_at": "2025-04-11T15:03:25.644946Z",
-            "updated_at": "2025-04-11T15:03:25.644946Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-35",
-            "description": "test-description-35",
-            "content": "test-content-35",
-            "price": 7397,
-            "discount": 56,
-            "views": 2486,
-            "likes": 673,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 1183
-                },
-                {
-                    "type": "video",
-                    "media": 9735
-                }
-            ]
-        },
-        {
-            "id": 35,
-            "created_at": "2025-04-11T15:03:25.640256Z",
-            "updated_at": "2025-04-11T15:03:25.640256Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-34",
-            "description": "test-description-34",
-            "content": "test-content-34",
-            "price": 3733,
-            "discount": 15,
-            "views": 3705,
-            "likes": 1863,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 8713
-                },
-                {
-                    "type": "video",
-                    "media": 9442
-                }
-            ]
-        },
-        {
-            "id": 34,
-            "created_at": "2025-04-11T15:03:25.634088Z",
-            "updated_at": "2025-04-11T15:03:25.634088Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-33",
-            "description": "test-description-33",
-            "content": "test-content-33",
-            "price": 6591,
-            "discount": 12,
-            "views": 3834,
-            "likes": 7400,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 7429
-                },
-                {
-                    "type": "video",
-                    "media": 9401
-                }
-            ]
-        },
-        {
-            "id": 33,
-            "created_at": "2025-04-11T15:03:25.628572Z",
-            "updated_at": "2025-04-11T15:03:25.628572Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-32",
-            "description": "test-description-32",
-            "content": "test-content-32",
-            "price": 3740,
-            "discount": 92,
-            "views": 7324,
-            "likes": 3705,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 8942
-                },
-                {
-                    "type": "video",
-                    "media": 2618
-                }
-            ]
-        },
-        {
-            "id": 32,
-            "created_at": "2025-04-11T15:03:25.623885Z",
-            "updated_at": "2025-04-11T15:03:25.623885Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-31",
-            "description": "test-description-31",
-            "content": "test-content-31",
-            "price": 1839,
-            "discount": 37,
-            "views": 4750,
-            "likes": 2995,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 7409
-                },
-                {
-                    "type": "video",
-                    "media": 8843
-                }
-            ]
-        },
-        {
-            "id": 31,
-            "created_at": "2025-04-11T15:03:25.61745Z",
-            "updated_at": "2025-04-11T15:03:25.61745Z",
-            "deleted_at": null,
-            "status": 1,
-            "title": "test-title-30",
-            "description": "test-description-30",
-            "content": "test-content-30",
-            "price": 2297,
-            "discount": 56,
-            "views": 715,
-            "likes": 1224,
-            "tags": [
-                "tag1",
-                "tag2",
-                "tag3"
-            ],
-            "assets": [
-                {
-                    "type": "audio",
-                    "media": 9268
-                },
-                {
-                    "type": "video",
-                    "media": 4416
-                }
-            ]
-        }
-    ]
-}
\ No newline at end of file
diff --git a/frontend/wechat/src/views/ArticleDetail.vue b/frontend/wechat/src/views/ArticleDetail.vue
index dae51f0..eaafdba 100644
--- a/frontend/wechat/src/views/ArticleDetail.vue
+++ b/frontend/wechat/src/views/ArticleDetail.vue
@@ -1,15 +1,54 @@
 <script setup>
 import { onMounted, ref } from 'vue'
+import { AiOutlineLeft } from 'vue-icons-plus/ai'
 import { useRoute, useRouter } from 'vue-router'
+import { postApi } from '../api/postApi'
 
 const route = useRoute()
 const router = useRouter()
 const article = ref(null)
+const buying = ref(false)
+
+const handleBuy = async () => {
+    if (buying.value) return
+    buying.value = true
+    try {
+        const response = await postApi.buy(route.params.id)
+        const payData = response.data
+
+        // 调用微信支付
+        window.WeixinJSBridge.invoke('getBrandWCPayRequest', {
+            ...payData
+        }, function (res) {
+            if (res.err_msg === 'get_brand_wcpay_request:ok') {
+                // 支付成功，刷新文章数据
+                fetchArticle()
+            } else {
+                // 支付失败或取消
+                console.error('Payment failed:', res.err_msg)
+                alert('支付失败：' + (res.err_msg === 'get_brand_wcpay_request:cancel' ? '支付已取消' : '支付异常'))
+            }
+        })
+    } catch (error) {
+        console.error('Failed to initiate payment:', error)
+        alert('发起支付失败，请稍后重试')
+    } finally {
+        buying.value = false
+    }
+}
+
+const fetchArticle = async () => {
+    try {
+        const { id } = route.params
+        const { data } = await postApi.show(id)
+        article.value = data
+    } catch (error) {
+        console.error('Failed to fetch article:', error)
+    }
+}
 
 onMounted(async () => {
-    // TODO: Implement API call to fetch article details
-    const { id } = route.params
-    article.value = { id, title: '文章标题', content: '文章内容' }
+    await fetchArticle()
 })
 </script>
 
@@ -18,10 +57,7 @@ onMounted(async () => {
         <header class="fixed top-0 left-0 right-0 h-14 bg-white border-b border-gray-200 flex items-center px-4 z-50">
             <button @click="router.back()"
                 class="flex items-center justify-center w-10 h-10 mr-2 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                </svg>
+                <AiOutlineLeft class="h-5 w-5" />
             </button>
             <h2 class="text-lg font-medium">{{ article?.title || '文章详情' }}</h2>
         </header>
@@ -29,7 +65,19 @@ onMounted(async () => {
         <main class="pt-14 px-4">
             <div v-if="article" class="py-4">
                 <div class="prose max-w-none">
-                    {{ article.content }}
+                    <template v-if="article.purchased">
+                        {{ article.content }}
+                    </template>
+                    <template v-else>
+                        <div class="text-center py-8">
+                            <p class="text-gray-600 mb-4">购买后即可阅读完整内容</p>
+                            <button @click="handleBuy" :disabled="buying"
+                                class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 active:bg-blue-800 transition-colors disabled:opacity-50">
+                                <span v-if="buying">处理中...</span>
+                                <span v-else>购买文章 ¥{{ article.price }}</span>
+                            </button>
+                        </div>
+                    </template>
                 </div>
             </div>
             <div v-else class="flex justify-center items-center py-8">
@@ -37,8 +85,4 @@ onMounted(async () => {
             </div>
         </main>
     </div>
-</template>
-
-<style scoped>
-/* 可以移除所有样式，因为都使用了 Tailwind 类 */
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/frontend/wechat/src/views/ArticleList.vue b/frontend/wechat/src/views/ArticleList.vue
index 02ab5f8..731bcd5 100644
--- a/frontend/wechat/src/views/ArticleList.vue
+++ b/frontend/wechat/src/views/ArticleList.vue
@@ -1,28 +1,51 @@
 <script setup>
+import { postApi } from '@/api/postApi'
 import ArticleListItem from '@/components/ArticleListItem.vue'
-import { useArticleStore } from '@/stores/article'
 import { useIntersectionObserver } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const store = useArticleStore()
 const searchInput = ref('')
 const loadingTrigger = ref(null)
+const articles = ref([])
+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.list({
+            page: currentPage.value,
+            limit,
+            keyword: searchInput.value
+        })
+        if (data.items?.length === 0) {
+            hasMore.value = false
+        } else {
+            articles.value.push(...data.items)
+            currentPage.value += 1
+        }
+    } catch (error) {
+        console.error('Failed to fetch articles:', error)
+    } finally {
+        loading.value = false
+    }
+}
 
-// 优化 Intersection Observer 配置
 useIntersectionObserver(
     loadingTrigger,
     ([{ isIntersecting }]) => {
-        console.log('Intersection state:', { isIntersecting, loading: store.loading, hasMore: store.hasMore })
-        if (isIntersecting && !store.loading && store.hasMore) {
-            console.log('Fetching more articles...')
-            store.fetchArticles()
+        if (isIntersecting && !loading.value && hasMore.value) {
+            fetchArticles()
         }
     },
     {
         threshold: 0,
-        rootMargin: '100px' // 提前 100px 触发加载
+        rootMargin: '100px'
     }
 )
 
@@ -31,7 +54,10 @@ const showArticle = (id) => {
 }
 
 const handleSearch = () => {
-    store.setSearchQuery(searchInput.value)
+    articles.value = []
+    currentPage.value = 1
+    hasMore.value = true
+    fetchArticles()
 }
 
 const handleKeyup = (e) => {
@@ -41,9 +67,7 @@ const handleKeyup = (e) => {
 }
 
 onMounted(() => {
-    if (store.articles.length === 0) {
-        store.fetchArticles()
-    }
+    fetchArticles()
 })
 </script>
 
@@ -58,16 +82,15 @@ onMounted(() => {
 
         <div class="flex-1 overflow-y-auto">
             <div class="p-4">
-                <div v-if="store.articles.length === 0 && !store.loading" class="text-center text-gray-500 py-8">
+                <div v-if="articles.length === 0 && !loading" class="text-center text-gray-500 py-8">
                     暂无文章
                 </div>
 
-                <ArticleListItem v-for="article in store.articles" :key="article.id" :article="article"
+                <ArticleListItem v-for="article in articles" :key="article.id" :article="article"
                     @click="showArticle(article.id)" class="mb-4" />
 
-                <!-- 优化加载触发器位置和显示 -->
-                <div ref="loadingTrigger" class="py-4 text-center" v-show="store.hasMore || store.loading">
-                    <div v-if="store.loading"
+                <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">
@@ -75,7 +98,7 @@ onMounted(() => {
                     </div>
                 </div>
 
-                <div v-if="!store.hasMore && store.articles.length > 0" class="text-center text-gray-500 py-4">
+                <div v-if="!hasMore && articles.length > 0" class="text-center text-gray-500 py-4">
                     没有更多文章了
                 </div>
             </div>
diff --git a/frontend/wechat/src/views/PurchasedArticles.vue b/frontend/wechat/src/views/PurchasedArticles.vue
index 9c14bfc..ad45acb 100644
--- a/frontend/wechat/src/views/PurchasedArticles.vue
+++ b/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>