feat: update ui

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
 	}

frontend/wechat/src/App.vue

@@ -1,3 +1,5 @@
 <template>
+    <div class="mx-auto max-w-[480px] w-full min-h-screen bg-white">
         <router-view />
+    </div>
 </template>

frontend/wechat/src/views/ArticleDetail.vue

@@ -91,6 +91,10 @@ const fetchArticle = async () => {
     }
 }
 
+const handleBack = () => {
+    router.back()
+}
+
 onMounted(async () => {
     await fetchArticle()
     initializePlayer()
@@ -104,7 +108,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="min-h-screen bg-gray-50">
+    <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">
@@ -119,9 +133,9 @@ onUnmounted(() => {
             <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-if="article && !article.bought"
+        <div v-if="article && !article.bought" class="bg-white border-t border-gray-200 p-4">
-            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-orange-600 font-bold text-xl">
                     ¥{{ (article.price / 100).toFixed(2) }}