rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update post detail page

Browse Source
This commit is contained in:
yanghao05
2025-04-25 11:39:28 +08:00
parent 505c41e9ef
commit b8c2c245f2
15 changed files with 191 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/wechat/src/views/ArticleDetail.vue
View File

@@ -47,13 +47,21 @@ const fetchArticle = async () => {
}
}
const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
}
onMounted(async () => {
await fetchArticle()
})
</script>
<template>
<div class="min-h-screen bg-gray-50">
<div class="min-h-screen bg-gray-50 pb-20">
<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">
@@ -62,27 +70,31 @@ onMounted(async () => {
<h2 class="text-lg font-medium">{{ article?.title || '文章详情' }}</h2>
</header>
<main class="pt-14 px-4">
<div v-if="article" class="py-4">
<div class="prose max-w-none">
<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>
<main class="pt-14">
<div v-if="article" class="px-4 pt-4">
<video controls :poster="article.head_images[0]"
class="w-full rounded aspect-video object-cover border border-gray-200">
Your browser does not support the video tag.
</video>
</div>
<div v-else class="flex justify-center items-center py-8">
<div class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600"></div>
</div>
</main>
<div v-if="article && !article.purchased"
class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
<div class="flex items-center justify-between max-w-md mx-auto">
<div class="text-red-600 font-bold text-xl">
¥{{ article.price }}
</div>
<button @click="handleBuy" :disabled="buying"
class="bg-blue-600 text-white px-8 py-3 rounded-full hover:bg-blue-700 active:bg-blue-800 transition-colors disabled:opacity-50">
<span v-if="buying">处理中...</span>
<span v-else>立即购买</span>
</button>
</div>
</div>
</div>
</template>