feat: update

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>
+</template>