From 82c112b1eb7d7618d1d01289e76a5aab234c38f8 Mon Sep 17 00:00:00 2001
From: yanghao05 <yanghao05@qianxin.com>
Date: Fri, 25 Apr 2025 21:57:06 +0800
Subject: [PATCH] feat: update ui

---
 backend/app/models/users.go                 |  5 +++
 frontend/wechat/src/App.vue                 |  4 +-
 frontend/wechat/src/views/ArticleDetail.vue | 44 ++++++++++++++-------
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/backend/app/models/users.go b/backend/app/models/users.go
index 9bbaa26..dc1a5ea 100644
--- a/backend/app/models/users.go
+++ b/backend/app/models/users.go
@@ -2,6 +2,7 @@ package models
 
 import (
 	"context"
+	"errors"
 	"time"
 
 	"quyun/app/requests"
@@ -9,6 +10,7 @@ import (
 	"quyun/database/schemas/public/table"
 
 	. "github.com/go-jet/jet/v2/postgres"
+	"github.com/go-jet/jet/v2/qrm"
 	"github.com/samber/lo"
 	"github.com/sirupsen/logrus"
 )
@@ -299,6 +301,9 @@ func (m *usersModel) HasBought(ctx context.Context, userID, postID int64) (bool,
 
 	var userPost model.UserPosts
 	if err := stmt.QueryContext(ctx, db, &userPost); err != nil {
+		if errors.Is(err, qrm.ErrNoRows) {
+			return false, nil
+		}
 		m.log.Errorf("error querying user post: %v", err)
 		return false, err
 	}
diff --git a/frontend/wechat/src/App.vue b/frontend/wechat/src/App.vue
index 01a0b42..a68421f 100644
--- a/frontend/wechat/src/App.vue
+++ b/frontend/wechat/src/App.vue
@@ -1,3 +1,5 @@
 <template>
-    <router-view />
+    <div class="mx-auto max-w-[480px] w-full min-h-screen bg-white">
+        <router-view />
+    </div>
 </template>
\ No newline at end of file
diff --git a/frontend/wechat/src/views/ArticleDetail.vue b/frontend/wechat/src/views/ArticleDetail.vue
index 24a80ce..6975366 100644
--- a/frontend/wechat/src/views/ArticleDetail.vue
+++ b/frontend/wechat/src/views/ArticleDetail.vue
@@ -91,6 +91,10 @@ const fetchArticle = async () => {
     }
 }
 
+const handleBack = () => {
+    router.back()
+}
+
 onMounted(async () => {
     await fetchArticle()
     initializePlayer()
@@ -104,24 +108,34 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="min-h-screen bg-gray-50">
-        <div v-if="article">
-            <video ref="videoElement" :poster="article.head_images[0]"
-                class="w-full aspect-video object-cover plyr-video" playsinline preload="none">
-                <source type="video/mp4" />
-                Your browser does not support the video tag.
-            </video>
-            <div class="p-4">
-                <h1 class="text-2xl my-1.5">{{ article.title }}</h1>
+    <div class="min-h-screen bg-gray-50 flex flex-col">
+        <div class="bg-white h-12 flex items-center px-4 border-b border-gray-100">
+            <button @click="handleBack" class="text-gray-700">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-6 h-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                </svg>
+            </button>
+        </div>
+
+        <div class="flex-1">
+            <div v-if="article">
+                <video ref="videoElement" :poster="article.head_images[0]"
+                    class="w-full aspect-video object-cover plyr-video" playsinline preload="none">
+                    <source type="video/mp4" />
+                    Your browser does not support the video tag.
+                </video>
+                <div class="p-4">
+                    <h1 class="text-2xl my-1.5">{{ article.title }}</h1>
+                </div>
+            </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>
         </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>
-
-        <div v-if="article && !article.bought"
-            class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
+        <div v-if="article && !article.bought" class="bg-white border-t border-gray-200 p-4">
             <div class="flex items-center justify-between max-w-md mx-auto">
                 <div class="text-orange-600 font-bold text-xl">
                     ¥{{ (article.price / 100).toFixed(2) }}