feat: update post detail page

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

View File

@@ -21,7 +21,7 @@ type TokenResponse struct {
} }
// Login // Login
// @Router /v1/admin/auth [post] // @Router /admin/auth [post]
// @Bind body body // @Bind body body
func (ctl *auth) Login(ctx fiber.Ctx, body *AuthBody) (*TokenResponse, error) { func (ctl *auth) Login(ctx fiber.Ctx, body *AuthBody) (*TokenResponse, error) {
if body.Username == "admin" && body.Password == "xixi@0202" { if body.Username == "admin" && body.Password == "xixi@0202" {

View File

@@ -14,7 +14,7 @@ type medias struct {
} }
// List medias // List medias
// @Router /v1/admin/medias [get] // @Router /admin/medias [get]
// @Bind pagination query // @Bind pagination query
// @Bind query query // @Bind query query
func (ctl *medias) List(ctx fiber.Ctx, pagination *requests.Pagination, query *ListQuery) (*requests.Pager, error) { func (ctl *medias) List(ctx fiber.Ctx, pagination *requests.Pagination, query *ListQuery) (*requests.Pager, error) {
@@ -23,7 +23,7 @@ func (ctl *medias) List(ctx fiber.Ctx, pagination *requests.Pagination, query *L
} }
// Show media // Show media
// @Router /v1/admin/medias/:id [get] // @Router /admin/medias/:id [get]
// @Bind id path // @Bind id path
func (ctl *medias) Show(ctx fiber.Ctx, id int64) error { func (ctl *medias) Show(ctx fiber.Ctx, id int64) error {
media, err := models.Medias.GetByID(ctx.Context(), id) media, err := models.Medias.GetByID(ctx.Context(), id)
@@ -40,7 +40,7 @@ func (ctl *medias) Show(ctx fiber.Ctx, id int64) error {
} }
// Delete // Delete
// @Router /v1/admin/medias/:id [delete] // @Router /admin/medias/:id [delete]
// @Bind id path // @Bind id path
func (ctl *medias) Delete(ctx fiber.Ctx, id int64) error { func (ctl *medias) Delete(ctx fiber.Ctx, id int64) error {
media, err := models.Medias.GetByID(ctx.Context(), id) media, err := models.Medias.GetByID(ctx.Context(), id)

View File

@@ -16,7 +16,7 @@ type OrderListQuery struct {
type orders struct{} type orders struct{}
// List users // List users
// @Router /v1/admin/orders [get] // @Router /admin/orders [get]
// @Bind pagination query // @Bind pagination query
// @Bind query query // @Bind query query
func (ctl *orders) List(ctx fiber.Ctx, pagination *requests.Pagination, query *OrderListQuery) (*requests.Pager, error) { func (ctl *orders) List(ctx fiber.Ctx, pagination *requests.Pagination, query *OrderListQuery) (*requests.Pager, error) {

View File

@@ -18,7 +18,7 @@ type ListQuery struct {
type posts struct{} type posts struct{}
// List posts // List posts
// @Router /v1/admin/posts [get] // @Router /admin/posts [get]
// @Bind pagination query // @Bind pagination query
// @Bind query query // @Bind query query
func (ctl *posts) List(ctx fiber.Ctx, pagination *requests.Pagination, query *ListQuery) (*requests.Pager, error) { func (ctl *posts) List(ctx fiber.Ctx, pagination *requests.Pagination, query *ListQuery) (*requests.Pager, error) {
@@ -63,7 +63,7 @@ type PostForm struct {
} }
// Create // Create
// @Router /v1/admin/posts [post] // @Router /admin/posts [post]
// @Bind form body // @Bind form body
func (ctl *posts) Create(ctx fiber.Ctx, form *PostForm) error { func (ctl *posts) Create(ctx fiber.Ctx, form *PostForm) error {
post := model.Posts{ post := model.Posts{
@@ -100,7 +100,7 @@ func (ctl *posts) Create(ctx fiber.Ctx, form *PostForm) error {
} }
// Update posts // Update posts
// @Router /v1/admin/posts/:id [put] // @Router /admin/posts/:id [put]
// @Bind id path // @Bind id path
// @Bind form body // @Bind form body
func (ctl *posts) Update(ctx fiber.Ctx, id int64, form *PostForm) error { func (ctl *posts) Update(ctx fiber.Ctx, id int64, form *PostForm) error {
@@ -148,7 +148,7 @@ func (ctl *posts) Update(ctx fiber.Ctx, id int64, form *PostForm) error {
} }
// Delete posts // Delete posts
// @Router /v1/admin/posts/:id [delete] // @Router /admin/posts/:id [delete]
// @Bind id path // @Bind id path
func (ctl *posts) Delete(ctx fiber.Ctx, id int64) error { func (ctl *posts) Delete(ctx fiber.Ctx, id int64) error {
post, err := models.Posts.GetByID(ctx.Context(), id) post, err := models.Posts.GetByID(ctx.Context(), id)
@@ -172,7 +172,7 @@ type PostItem struct {
} }
// Show posts by id // Show posts by id
// @Router /v1/admin/posts/:id [get] // @Router /admin/posts/:id [get]
// @Bind id path // @Bind id path
func (ctl *posts) Show(ctx fiber.Ctx, id int64) (*PostItem, error) { func (ctl *posts) Show(ctx fiber.Ctx, id int64) (*PostItem, error) {
post, err := models.Posts.GetByID(ctx.Context(), id) post, err := models.Posts.GetByID(ctx.Context(), id)
@@ -193,7 +193,7 @@ func (ctl *posts) Show(ctx fiber.Ctx, id int64) (*PostItem, error) {
} }
// SendTo // SendTo
// @Router /v1/admin/posts/:id/send-to/:userId [post] // @Router /admin/posts/:id/send-to/:userId [post]
// @Bind id path // @Bind id path
// @Bind userId path // @Bind userId path
func (ctl *posts) SendTo(ctx fiber.Ctx, id, userId int64) error { func (ctl *posts) SendTo(ctx fiber.Ctx, id, userId int64) error {

View File

@@ -33,95 +33,95 @@ func (r *Routes) Name() string {
func (r *Routes) Register(router fiber.Router) { func (r *Routes) Register(router fiber.Router) {
// 注册路由组: auth // 注册路由组: auth
router.Post("/v1/admin/auth", DataFunc1( router.Post("/admin/auth", DataFunc1(
r.auth.Login, r.auth.Login,
Body[AuthBody]("body"), Body[AuthBody]("body"),
)) ))
// 注册路由组: medias // 注册路由组: medias
router.Get("/v1/admin/medias", DataFunc2( router.Get("/admin/medias", DataFunc2(
r.medias.List, r.medias.List,
Query[requests.Pagination]("pagination"), Query[requests.Pagination]("pagination"),
Query[ListQuery]("query"), Query[ListQuery]("query"),
)) ))
router.Get("/v1/admin/medias/:id", Func1( router.Get("/admin/medias/:id", Func1(
r.medias.Show, r.medias.Show,
PathParam[int64]("id"), PathParam[int64]("id"),
)) ))
router.Delete("/v1/admin/medias/:id", Func1( router.Delete("/admin/medias/:id", Func1(
r.medias.Delete, r.medias.Delete,
PathParam[int64]("id"), PathParam[int64]("id"),
)) ))
// 注册路由组: orders // 注册路由组: orders
router.Get("/v1/admin/orders", DataFunc2( router.Get("/admin/orders", DataFunc2(
r.orders.List, r.orders.List,
Query[requests.Pagination]("pagination"), Query[requests.Pagination]("pagination"),
Query[OrderListQuery]("query"), Query[OrderListQuery]("query"),
)) ))
// 注册路由组: posts // 注册路由组: posts
router.Get("/v1/admin/posts", DataFunc2( router.Get("/admin/posts", DataFunc2(
r.posts.List, r.posts.List,
Query[requests.Pagination]("pagination"), Query[requests.Pagination]("pagination"),
Query[ListQuery]("query"), Query[ListQuery]("query"),
)) ))
router.Post("/v1/admin/posts", Func1( router.Post("/admin/posts", Func1(
r.posts.Create, r.posts.Create,
Body[PostForm]("form"), Body[PostForm]("form"),
)) ))
router.Put("/v1/admin/posts/:id", Func2( router.Put("/admin/posts/:id", Func2(
r.posts.Update, r.posts.Update,
PathParam[int64]("id"), PathParam[int64]("id"),
Body[PostForm]("form"), Body[PostForm]("form"),
)) ))
router.Delete("/v1/admin/posts/:id", Func1( router.Delete("/admin/posts/:id", Func1(
r.posts.Delete, r.posts.Delete,
PathParam[int64]("id"), PathParam[int64]("id"),
)) ))
router.Get("/v1/admin/posts/:id", DataFunc1( router.Get("/admin/posts/:id", DataFunc1(
r.posts.Show, r.posts.Show,
PathParam[int64]("id"), PathParam[int64]("id"),
)) ))
router.Post("/v1/admin/posts/:id/send-to/:userId", Func2( router.Post("/admin/posts/:id/send-to/:userId", Func2(
r.posts.SendTo, r.posts.SendTo,
PathParam[int64]("id"), PathParam[int64]("id"),
PathParam[int64]("userId"), PathParam[int64]("userId"),
)) ))
// 注册路由组: uploads // 注册路由组: uploads
router.Get("/v1/admin/uploads/pre-uploaded-check/:md5.:ext", DataFunc3( router.Get("/admin/uploads/pre-uploaded-check/:md5.:ext", DataFunc3(
r.uploads.PreUploadCheck, r.uploads.PreUploadCheck,
PathParam[string]("md5"), PathParam[string]("md5"),
PathParam[string]("ext"), PathParam[string]("ext"),
QueryParam[string]("mime"), QueryParam[string]("mime"),
)) ))
router.Post("/v1/admin/uploads/post-uploaded-action", Func1( router.Post("/admin/uploads/post-uploaded-action", Func1(
r.uploads.PostUploadedAction, r.uploads.PostUploadedAction,
Body[PostUploadedForm]("body"), Body[PostUploadedForm]("body"),
)) ))
// 注册路由组: users // 注册路由组: users
router.Get("/v1/admin/users", DataFunc2( router.Get("/admin/users", DataFunc2(
r.users.List, r.users.List,
Query[requests.Pagination]("pagination"), Query[requests.Pagination]("pagination"),
Query[UserListQuery]("query"), Query[UserListQuery]("query"),
)) ))
router.Get("/v1/admin/users/:id", DataFunc1( router.Get("/admin/users/:id", DataFunc1(
r.users.Show, r.users.Show,
PathParam[int64]("id"), PathParam[int64]("id"),
)) ))
router.Get("/v1/admin/users/:id/articles", DataFunc2( router.Get("/admin/users/:id/articles", DataFunc2(
r.users.Articles, r.users.Articles,
PathParam[int64]("id"), PathParam[int64]("id"),
Query[requests.Pagination]("pagination"), Query[requests.Pagination]("pagination"),

View File

@@ -33,7 +33,7 @@ type PreCheckResp struct {
} }
// PreUploadCheck // PreUploadCheck
// @Router /v1/admin/uploads/pre-uploaded-check/:md5.:ext [get] // @Router /admin/uploads/pre-uploaded-check/:md5.:ext [get]
// @Bind md5 path // @Bind md5 path
// @Bind ext path // @Bind ext path
// @Bind mime query // @Bind mime query
@@ -59,7 +59,7 @@ type PostUploadedForm struct {
} }
// PostUploadedAction // PostUploadedAction
// @Router /v1/admin/uploads/post-uploaded-action [post] // @Router /admin/uploads/post-uploaded-action [post]
// @Bind body body // @Bind body body
func (up *uploads) PostUploadedAction(ctx fiber.Ctx, body *PostUploadedForm) error { func (up *uploads) PostUploadedAction(ctx fiber.Ctx, body *PostUploadedForm) error {
m, err := models.Medias.GetByHash(ctx.Context(), body.Md5) m, err := models.Medias.GetByHash(ctx.Context(), body.Md5)

View File

@@ -16,7 +16,7 @@ type UserListQuery struct {
type users struct{} type users struct{}
// List users // List users
// @Router /v1/admin/users [get] // @Router /admin/users [get]
// @Bind pagination query // @Bind pagination query
// @Bind query query // @Bind query query
func (ctl *users) List(ctx fiber.Ctx, pagination *requests.Pagination, query *UserListQuery) (*requests.Pager, error) { func (ctl *users) List(ctx fiber.Ctx, pagination *requests.Pagination, query *UserListQuery) (*requests.Pager, error) {
@@ -25,14 +25,14 @@ func (ctl *users) List(ctx fiber.Ctx, pagination *requests.Pagination, query *Us
} }
// Show user // Show user
// @Router /v1/admin/users/:id [get] // @Router /admin/users/:id [get]
// @Bind id path // @Bind id path
func (ctl *users) Show(ctx fiber.Ctx, id int64) (*model.Users, error) { func (ctl *users) Show(ctx fiber.Ctx, id int64) (*model.Users, error) {
return models.Users.GetByID(ctx.Context(), id) return models.Users.GetByID(ctx.Context(), id)
} }
// Articles show user bought articles // Articles show user bought articles
// @Router /v1/admin/users/:id/articles [get] // @Router /admin/users/:id/articles [get]
// @Bind id path // @Bind id path
// @Bind pagination query // @Bind pagination query
func (ctl *users) Articles(ctx fiber.Ctx, id int64, pagination *requests.Pagination) (*requests.Pager, error) { func (ctl *users) Articles(ctx fiber.Ctx, id int64, pagination *requests.Pagination) (*requests.Pager, error) {

View File

@@ -8,6 +8,7 @@ import (
"quyun/app/requests" "quyun/app/requests"
"quyun/database/fields" "quyun/database/fields"
"quyun/database/schemas/public/model" "quyun/database/schemas/public/model"
"quyun/providers/ali"
"quyun/providers/wepay" "quyun/providers/wepay"
"github.com/go-pay/gopay/wechat/v3" "github.com/go-pay/gopay/wechat/v3"
@@ -24,11 +25,7 @@ type ListQuery struct {
// @provider // @provider
type posts struct { type posts struct {
wepay *wepay.Client wepay *wepay.Client
} oss *ali.OSSClient
type PostItem struct {
model.Posts
BoughtCount int64 `json:"bought_count"`
} }
// List posts // List posts
@@ -43,36 +40,90 @@ func (ctl *posts) List(ctx fiber.Ctx, pagination *requests.Pagination, query *Li
item.Content = "" item.Content = ""
return item return item
}) })
if err != nil {
return nil, err
}
postIds := lo.Map(pager.Items.([]model.Posts), func(item model.Posts, _ int) int64 { postIds := lo.Map(pager.Items.([]model.Posts), func(item model.Posts, _ int) int64 { return item.ID })
return item.ID
})
if len(postIds) > 0 { if len(postIds) > 0 {
postCntMap, err := models.Posts.BoughtStatistics(ctx.Context(), postIds) items := lo.FilterMap(pager.Items.([]model.Posts), func(item model.Posts, _ int) (PostItem, bool) {
if err != nil { medias, err := models.Posts.GetMediaByIds(ctx.Context(), item.HeadImages.Data)
return pager, err if err != nil {
} log.Errorf("GetMediaByIds err: %v", err)
return PostItem{}, false
items := lo.Map(pager.Items.([]model.Posts), func(item model.Posts, _ int) PostItem {
cnt := int64(0)
if v, ok := postCntMap[item.ID]; ok {
cnt = v
} }
mediaUrls := lo.FilterMap(medias, func(item model.Medias, _ int) (string, bool) {
url, err := ctl.oss.GetSignedUrl(ctx.Context(), item.Path)
if err != nil {
return "", false
}
return PostItem{Posts: item, BoughtCount: cnt} return url, true
})
return PostItem{
Title: item.Title,
Description: item.Description,
Price: item.Price,
Discount: item.Discount,
Views: item.Views,
Likes: item.Likes,
Tags: item.Tags.Data,
HeadImages: mediaUrls,
}, true
}) })
pager.Items = items pager.Items = items
} }
return pager, err return pager, nil
}
type PostItem struct {
Title string `json:"title"`
Description string `json:"description"`
Content string `json:"content"`
Price int64 `json:"price"`
Discount int16 `json:"discount"`
Views int64 `json:"views"`
Likes int64 `json:"likes"`
Tags []string `json:"tags"`
HeadImages []string `json:"head_images"`
} }
// Show // Show
// @Router /api/posts/show/:id [get] // @Router /api/posts/:id [get]
// @Bind id path // @Bind id path
func (ctl *posts) Show(ctx fiber.Ctx, id int64) (*model.Posts, error) { func (ctl *posts) Show(ctx fiber.Ctx, id int64) (*PostItem, error) {
return models.Posts.GetByID(ctx.Context(), id) post, err := models.Posts.GetByID(ctx.Context(), id)
if err != nil {
return nil, err
}
medias, err := models.Posts.GetMediaByIds(ctx.Context(), post.HeadImages.Data)
if err != nil {
return nil, err
}
mediaUrls := lo.FilterMap(medias, func(item model.Medias, _ int) (string, bool) {
url, err := ctl.oss.GetSignedUrl(ctx.Context(), item.Path)
if err != nil {
return "", false
}
return url, true
})
return &PostItem{
Title: post.Title,
Description: post.Description,
Content: post.Content,
Price: post.Price,
Discount: post.Discount,
Views: post.Views,
Likes: post.Likes,
Tags: post.Tags.Data,
HeadImages: mediaUrls,
}, nil
} }
// Mine posts // Mine posts
@@ -89,7 +140,7 @@ func (ctl *posts) Mine(ctx fiber.Ctx, pagination *requests.Pagination, query *Li
} }
// Buy // Buy
// @Router /api/posts/buy/:id [get] // @Router /api/posts/:id/buy [get]
// @Bind id path // @Bind id path
// @Bind user local // @Bind user local
func (ctl *posts) Buy(ctx fiber.Ctx, id int64, user *model.Users) (*wechat.JSAPIPayParams, error) { func (ctl *posts) Buy(ctx fiber.Ctx, id int64, user *model.Users) (*wechat.JSAPIPayParams, error) {

View File

@@ -1,6 +1,7 @@
package http package http
import ( import (
"quyun/providers/ali"
"quyun/providers/job" "quyun/providers/job"
"quyun/providers/jwt" "quyun/providers/jwt"
"quyun/providers/wechat" "quyun/providers/wechat"
@@ -40,9 +41,11 @@ func Provide(opts ...opt.Option) error {
return err return err
} }
if err := container.Container.Provide(func( if err := container.Container.Provide(func(
oss *ali.OSSClient,
wepay *wepay.Client, wepay *wepay.Client,
) (*posts, error) { ) (*posts, error) {
obj := &posts{ obj := &posts{
oss: oss,
wepay: wepay, wepay: wepay,
} }

View File

@@ -58,7 +58,7 @@ func (r *Routes) Register(router fiber.Router) {
Local[*model.Users]("user"), Local[*model.Users]("user"),
)) ))
router.Get("/api/posts/show/:id", DataFunc1( router.Get("/api/posts/:id", DataFunc1(
r.posts.Show, r.posts.Show,
PathParam[int64]("id"), PathParam[int64]("id"),
)) ))
@@ -69,7 +69,7 @@ func (r *Routes) Register(router fiber.Router) {
Query[ListQuery]("query"), Query[ListQuery]("query"),
)) ))
router.Get("/api/posts/buy/:id", DataFunc2( router.Get("/api/posts/:id/buy", DataFunc2(
r.posts.Buy, r.posts.Buy,
PathParam[int64]("id"), PathParam[int64]("id"),
Local[*model.Users]("user"), Local[*model.Users]("user"),

View File

@@ -19,6 +19,13 @@ func (f *Middlewares) Auth(ctx fiber.Ctx) error {
return ctx.Next() return ctx.Next()
} }
uu, err := models.Users.GetByID(ctx.Context(), 1)
if err != nil {
return ctx.SendString("NOT OK")
}
ctx.Locals("user", uu)
return ctx.Next()
fullUrl := string(ctx.Request().URI().FullURI()) fullUrl := string(ctx.Request().URI().FullURI())
u, err := url.Parse(fullUrl) u, err := url.Parse(fullUrl)
if err != nil { if err != nil {

View File

@@ -370,3 +370,28 @@ func (m *postsModel) GetPostsMapByIDs(ctx context.Context, ids []int64) (map[int
return item.ID, item return item.ID, item
}), nil }), nil
} }
// GetMediaByIds
func (m *postsModel) GetMediaByIds(ctx context.Context, ids []int64) ([]model.Medias, error) {
if len(ids) == 0 {
return nil, nil
}
tbl := table.Medias
stmt := tbl.
SELECT(tbl.AllColumns).
WHERE(
tbl.ID.IN(lo.Map(ids, func(id int64, _ int) Expression { return Int64(id) })...),
)
m.log.Infof("sql: %s", stmt.DebugSql())
var medias []model.Medias
if err := stmt.QueryContext(ctx, db, &medias); err != nil {
m.log.Errorf("error querying media: %v", err)
return nil, err
}
return medias, nil
}

View File

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

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"
]
}

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 () => { onMounted(async () => {
await fetchArticle() await fetchArticle()
}) })
</script> </script>
<template> <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"> <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()" <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"> 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> <h2 class="text-lg font-medium">{{ article?.title || '文章详情' }}</h2>
</header> </header>
<main class="pt-14 px-4"> <main class="pt-14">
<div v-if="article" class="py-4"> <div v-if="article" class="px-4 pt-4">
<div class="prose max-w-none"> <video controls :poster="article.head_images[0]"
<template v-if="article.purchased"> class="w-full rounded aspect-video object-cover border border-gray-200">
{{ article.content }} Your browser does not support the video tag.
</template> </video>
<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>
<div v-else class="flex justify-center items-center py-8"> <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 class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600"></div>
</div> </div>
</main> </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> </div>
</template> </template>