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

2
frontend/wechat/src/api/client.js
View File

@@ -2,7 +2,7 @@ import axios from 'axios';
// Create axios instance with default config
const client = axios.create({
baseURL: '/v1',
baseURL: '/',
timeout: 10000,
headers: {
'Content-Type': 'application/json',

17
frontend/wechat/src/api/post_detail.json Normal file
View File

@@ -0,0 +1,17 @@
{
"title": "video1",
"description": "hello",
"content": "hello world",
"price": 100,
"discount": 100,
"views": 100,
"likes": 1000,
"tags": [
"AAA",
"BBB",
"CCC"
],
"head_images": [
"https://assets.jdwan.com/quyun/b55adbd05ee96f5c53f9a19ad89a30cc.jpg?x-oss-credential=LTAI5t86SjiP9zRd3q2w7jQN%2F20250425%2Fcn-beijing%2Foss%2Faliyun_v4_request&x-oss-date=20250425T030400Z&x-oss-expires=300&x-oss-signature=fae33ecfc5cfe6d50de858d89798151b137336e3694bdafad78e1cbdb1ebf1c0&x-oss-signature-version=OSS4-HMAC-SHA256"
]
}

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>