From 82fc0f80a592f53fc0f1ea89ee2b7bf143860736 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Tue, 3 Feb 2026 10:25:47 +0800
Subject: [PATCH] fix: gretting page

---
 pages/make/index.vue    |   2 +-
 pages/mine/greeting.vue | 549 +++++++++++++++++++---------------------
 pages/mine/mine.vue     |   4 +-
 3 files changed, 263 insertions(+), 292 deletions(-)

diff --git a/pages/make/index.vue b/pages/make/index.vue
index ef63138..cbf2449 100644
--- a/pages/make/index.vue
+++ b/pages/make/index.vue
@@ -250,7 +250,7 @@
                 v-model="signatureName"
                 placeholder="请输入署名"
                 placeholder-style="color:#ccc"
-                maxlength="5"
+                maxlength="10"
                 @blur="handleSignatureBlur"
               />
               <text class="edit-icon">✎</text>
diff --git a/pages/mine/greeting.vue b/pages/mine/greeting.vue
index 408ebbb..7217303 100644
--- a/pages/mine/greeting.vue
+++ b/pages/mine/greeting.vue
@@ -1,13 +1,13 @@
 <template>
-  <view class="greeting-page" >
-    <NavBar title="我的祝福" />
+  <view class="greeting-page">
+    <NavBar title="我的新春祝福" background="transparent" />
 
     <!-- Header Stats -->
     <view class="header-stats">
       <view class="stats-card">
         <view class="stats-left">
           <view class="icon-circle">
-            <text>✨</text>
+            <text class="sparkle-emoji">✨</text>
           </view>
           <view class="stats-info">
             <text class="label">已累计创作</text>
@@ -28,69 +28,63 @@
     <!-- List Section -->
     <view class="list-section">
       <view class="section-header">
-        <text class="section-title">祝福列表</text>
-        <text class="section-tip">左滑删除记录</text>
+        <text class="section-title">祝福库</text>
       </view>
 
-      <view class="list-container">
-        <view v-for="item in list" :key="item.id" class="list-item-wrap">
-          <view class="swipe-container">
-            <!-- Delete Action (Behind) -->
-            <view class="delete-action" @tap.stop="onDelete(item)">
-              <text>删除</text>
+      <view class="list-grid">
+        <view
+          v-for="item in list"
+          :key="item.id"
+          class="card-item"
+          @tap="onDetail(item)"
+        >
+          <view class="card-image-wrap">
+            <image :src="item.imageUrl" mode="aspectFill" class="card-img" />
+            <view class="year-badge" v-if="item.year">{{ item.year }}</view>
+            <view class="draft-overlay" v-if="item.status === 'draft'">
+              <text class="lock-icon">🔒</text>
             </view>
-
-            <!-- Card Content (Front) -->
-            <view
-              class="card-item"
-              :style="{
-                transform: `translateX(${item.translateX || 0}px)`,
-                transition: item.useTransition ? 'transform 0.3s' : 'none',
-              }"
-              @touchstart="onTouchStart($event, item)"
-              @touchmove="onTouchMove($event, item)"
-              @touchend="onTouchEnd($event, item)"
+          </view>
+          <view class="card-info">
+            <view class="card-title"
+              >{{ item.blessingTo || "祝全家" }}福寿双全</view
             >
-              <image :src="item.imageUrl" mode="aspectFill" class="card-img" />
-              <view class="card-content">
-                <view class="card-title"
-                  >{{ item.blessingTo
-                  }}{{
-                    item.blessingFrom ? item.blessingFrom : "好友"
-                  }}身体健康</view
-                >
-                <view class="card-date"
-                  >更新时间：{{ formatDate(item.updatedAt) }}</view
-                >
-                <view class="tags">
-                  <view class="tag yellow" v-if="item.festival">{{
-                    item.festival
-                  }}</view>
-                  <view class="tag red" v-if="item.year">{{ item.year }}</view>
-                </view>
-              </view>
-              <view class="card-actions">
+            <view class="card-date">{{ formatDate(item.updatedAt) }}</view>
+            <view class="card-footer">
+              <view class="tag" :class="getTagClass(item)">{{
+                getTagText(item)
+              }}</view>
+              <view class="actions">
                 <view class="action-btn" @tap.stop="onShare(item)">
-                  <text class="icon">🔗</text>
+                  <text class="action-emoji">🔗</text>
                 </view>
-                <view class="action-btn" @tap.stop="onEdit(item)">
-                  <text class="icon">✎</text>
+                <view class="action-btn" @tap.stop="onMore(item)">
+                  <text class="action-emoji">⋯</text>
                 </view>
               </view>
             </view>
           </view>
         </view>
+      </view>
 
-        <!-- Loading State -->
-        <view class="loading-state" v-if="loading">
-          <text>加载中...</text>
-        </view>
-        <view class="empty-state" v-if="!loading && list.length === 0">
-          <text>暂无祝福记录</text>
-        </view>
-        <view class="no-more" v-if="!loading && !hasMore && list.length > 0">
-          <text>没有更多了</text>
-        </view>
+      <!-- Loading State -->
+      <view class="loading-state" v-if="loading">
+        <text>加载中...</text>
+      </view>
+      <view class="empty-state" v-if="!loading && list.length === 0">
+        <text>暂无祝福记录</text>
+      </view>
+
+      <view class="footer-note" v-if="!loading && list.length > 0">
+        <text>2026 丙午马年 · 祝福管理助手</text>
+      </view>
+    </view>
+
+    <!-- FAB -->
+    <view class="fab-btn" @tap="onMake">
+      <view class="fab-content">
+        <text class="fab-emoji">✍️</text>
+        <text>新春制作</text>
       </view>
     </view>
   </view>
@@ -102,92 +96,24 @@ import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
 import { getMyCard } from "@/api/mine.js";
 import NavBar from "@/components/NavBar/NavBar.vue";
 
-const navBarTop = ref(0);
-const navBarHeight = ref(44);
 const list = ref([]);
 const page = ref(1);
 const loading = ref(false);
 const hasMore = ref(true);
-const isRefreshing = ref(false);
 const totalCount = ref(0);
 
-const deleteOptions = ref([
-  {
-    text: "删除",
-    style: {
-      backgroundColor: "#ff3b30",
-    },
-  },
-]);
-
-// Swipe Logic
-const startX = ref(0);
-const activeItem = ref(null);
-const MAX_SWIPE_WIDTH = 80;
-
-const onTouchStart = (e, item) => {
-  if (e.touches.length > 1) return;
-  // Close other items
-  if (activeItem.value && activeItem.value.id !== item.id) {
-    activeItem.value.translateX = 0;
-    activeItem.value.useTransition = true;
-  }
-
-  startX.value = e.touches[0].clientX;
-  item.useTransition = false;
-  activeItem.value = item;
-};
-
-const onTouchMove = (e, item) => {
-  if (e.touches.length > 1) return;
-  const currentX = e.touches[0].clientX;
-  const deltaX = currentX - startX.value;
-
-  // Allow swiping left (negative) up to -MAX_SWIPE_WIDTH
-  // If already open (translateX = -80), deltaX needs to be adjusted
-  // But simpler: just use delta from 0 position.
-  // Actually, standard swipe logic needs to account for current position.
-  // For simplicity: assume always starting from 0 (closed) or -80 (open).
-  // But if we start drag from open state, we need to handle it.
-
-  // Let's stick to "start from 0" logic for now, assuming auto-close.
-  // If item is already open, and we swipe right, we close it.
-
-  // Re-calculate based on initial offset if we want to support dragging from open.
-  // For now: simple close-on-touch-other logic covers most cases.
-  // We assume startX is from a state where it is either 0 or -80.
-  // But `item.translateX` might be -80.
-
-  let targetX = deltaX;
-  if (item.translateX === -MAX_SWIPE_WIDTH) {
-    targetX = -MAX_SWIPE_WIDTH + deltaX;
-  }
-
-  if (targetX < -MAX_SWIPE_WIDTH) targetX = -MAX_SWIPE_WIDTH;
-  if (targetX > 0) targetX = 0;
-
-  item.translateX = targetX;
-};
-
-const onTouchEnd = (e, item) => {
-  item.useTransition = true;
-  if (item.translateX < -30) {
-    item.translateX = -MAX_SWIPE_WIDTH;
-  } else {
-    item.translateX = 0;
-  }
-};
-
 onMounted(() => {
   fetchList(true);
 });
 
 onPullDownRefresh(() => {
-  onRefresh();
+  fetchList(true);
 });
 
 onReachBottom(() => {
-  loadMore();
+  if (hasMore.value && !loading.value) {
+    fetchList();
+  }
 });
 
 const fetchList = async (reset = false) => {
@@ -216,27 +142,12 @@ const fetchList = async (reset = false) => {
     }
   } catch (e) {
     console.error("Failed to fetch greeting list", e);
-    uni.showToast({ title: "加载失败", icon: "none" });
   } finally {
     loading.value = false;
-    isRefreshing.value = false;
     uni.stopPullDownRefresh();
   }
 };
 
-const loadMore = () => {
-  fetchList();
-};
-
-const onRefresh = () => {
-  isRefreshing.value = true;
-  fetchList(true);
-};
-
-const goBack = () => {
-  uni.navigateBack();
-};
-
 const formatDate = (dateStr) => {
   if (!dateStr) return "";
   const date = new Date(dateStr);
@@ -246,75 +157,103 @@ const formatDate = (dateStr) => {
   return `${y}-${m}-${d}`;
 };
 
+const getTagText = (item) => {
+  if (item.status === "draft") return "草稿";
+  return item.festival || "金榜";
+};
+
+const getTagClass = (item) => {
+  if (item.status === "draft") return "tag-draft";
+  const tagMap = {
+    春节: "tag-spring",
+    金榜: "tag-gold",
+    马到: "tag-horse",
+    水墨: "tag-ink",
+  };
+  return tagMap[item.festival] || "tag-gold";
+};
+
+const onDetail = (item) => {
+  uni.navigateTo({
+    url: `/pages/detail/index?id=${item.id}`,
+  });
+};
+
+const onMake = () => {
+  uni.switchTab({
+    url: "/pages/make/index",
+  });
+};
+
+const onShare = (item) => {
+  uni.showToast({ title: "分享功能开发中", icon: "none" });
+};
+
+const onMore = (item) => {
+  uni.showActionSheet({
+    itemList: ["编辑", "删除"],
+    success: (res) => {
+      if (res.tapIndex === 0) {
+        // Edit
+      } else if (res.tapIndex === 1) {
+        onDelete(item);
+      }
+    },
+  });
+};
+
 const onDelete = (item) => {
   uni.showModal({
     title: "提示",
     content: "确定要删除这条祝福吗？",
     success: (res) => {
       if (res.confirm) {
-        // Implement delete API call here
-        // For now just remove from list locally
         list.value = list.value.filter((i) => i.id !== item.id);
         totalCount.value = Math.max(0, totalCount.value - 1);
         uni.showToast({ title: "删除成功", icon: "none" });
-      } else {
-        // Reset swipe state if cancelled
-        item.translateX = 0;
       }
     },
   });
 };
-
-const onShare = (item) => {
-  // Implement share logic
-  uni.showToast({ title: "分享功能开发中", icon: "none" });
-};
-
-const onEdit = (item) => {
-  // Implement edit logic
-  uni.showToast({ title: "编辑功能开发中", icon: "none" });
-};
 </script>
 
 <style lang="scss" scoped>
 .greeting-page {
   min-height: 100vh;
-  background: #f9f9f9;
-  display: flex;
-  flex-direction: column;
+  background: #fbf9f2;
+  padding-bottom: 120rpx;
   box-sizing: border-box;
 }
 
 .header-stats {
-  padding: 20px;
-  background: #f9f9f9;
-  margin-top: 44px; // Initial offset for fixed nav
+  padding: 30rpx 40rpx;
+  margin-top: 20rpx;
 
   .stats-card {
     background: #fff;
-    border-radius: 20px;
-    padding: 24px;
+    border-radius: 40rpx;
+    padding: 40rpx;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.02);
 
     .stats-left {
       display: flex;
       align-items: center;
 
       .icon-circle {
-        width: 48px;
-        height: 48px;
+        width: 100rpx;
+        height: 100rpx;
         border-radius: 50%;
-        background: #fff0f0;
+        background: #fff5f5;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-right: 16px;
+        margin-right: 24rpx;
 
-        text {
-          font-size: 24px;
+        .sparkle-emoji {
+          font-size: 50rpx;
         }
       }
 
@@ -323,9 +262,9 @@ const onEdit = (item) => {
         flex-direction: column;
 
         .label {
-          font-size: 12px;
+          font-size: 24rpx;
           color: #999;
-          margin-bottom: 4px;
+          margin-bottom: 8rpx;
         }
 
         .value-wrap {
@@ -333,14 +272,14 @@ const onEdit = (item) => {
           align-items: baseline;
 
           .value {
-            font-size: 24px;
+            font-size: 40rpx;
             font-weight: bold;
             color: #333;
-            margin-right: 4px;
+            margin-right: 8rpx;
           }
 
           .unit {
-            font-size: 12px;
+            font-size: 24rpx;
             color: #666;
           }
         }
@@ -348,30 +287,29 @@ const onEdit = (item) => {
     }
 
     .divider {
-      width: 1px;
-      height: 40px;
-      background: #eee;
-      margin: 0 20px;
+      width: 1rpx;
+      height: 80rpx;
+      background: #f0f0f0;
     }
 
     .stats-right {
       display: flex;
       flex-direction: column;
       align-items: center;
-      min-width: 80px;
+      padding-left: 20rpx;
 
       .label {
-        font-size: 12px;
+        font-size: 24rpx;
         color: #999;
-        margin-bottom: 8px;
+        margin-bottom: 12rpx;
       }
 
       .value {
-        font-size: 16px;
-        font-weight: 600;
+        font-size: 32rpx;
+        font-weight: bold;
 
         &.red-text {
-          color: #ff3b30;
+          color: #ff4d4f;
         }
       }
     }
@@ -379,89 +317,86 @@ const onEdit = (item) => {
 }
 
 .list-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 0 20px;
+  padding: 0 40rpx;
 
   .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
+    margin: 40rpx 0 24rpx;
 
     .section-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #666;
-    }
-
-    .section-tip {
-      font-size: 12px;
-      color: #ccc;
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #7c6d5d;
     }
   }
 
-  .list-container {
-    padding-bottom: 40px;
+  .list-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30rpx;
   }
 }
 
-.list-item-wrap {
-  margin-bottom: 16px;
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
-}
-
-.swipe-container {
-  position: relative;
-  width: 100%;
-  background: #ff3b30; // Delete background color
-}
-
-.delete-action {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #ff3b30;
-  color: #fff;
-  font-size: 14px;
-  z-index: 1;
-}
-
 .card-item {
   background: #fff;
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  box-sizing: border-box;
+  border-radius: 48rpx;
+  overflow: hidden;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
 
-  .card-img {
-    width: 80px;
-    height: 80px;
-    border-radius: 12px;
-    margin-right: 16px;
-    background: #f5f5f5;
+  .card-image-wrap {
+    position: relative;
+    width: 100%;
+    padding-bottom: 133%; // 3:4 aspect ratio
+    background: #fdf3e7;
+
+    .card-img {
+      position: absolute;
+      top: 20rpx;
+      left: 20rpx;
+      right: 20rpx;
+      bottom: 20rpx;
+      width: auto;
+      height: auto;
+      border-radius: 12rpx;
+    }
+
+    .year-badge {
+      position: absolute;
+      top: 20rpx;
+      left: 20rpx;
+      background: #ff4d4f;
+      color: #fff;
+      font-size: 20rpx;
+      padding: 4rpx 12rpx;
+      border-radius: 8rpx;
+      font-weight: bold;
+    }
+
+    .draft-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.05);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        font-size: 40rpx;
+        opacity: 0.3;
+      }
+    }
   }
 
-  .card-content {
-    flex: 1;
-    margin-right: 12px;
+  .card-info {
+    padding: 24rpx;
 
     .card-title {
-      font-size: 16px;
-      font-weight: 600;
+      font-size: 28rpx;
+      font-weight: bold;
       color: #333;
-      margin-bottom: 8px;
+      margin-bottom: 8rpx;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
@@ -469,68 +404,104 @@ const onEdit = (item) => {
     }
 
     .card-date {
-      font-size: 12px;
+      font-size: 22rpx;
       color: #999;
-      margin-bottom: 8px;
+      margin-bottom: 20rpx;
     }
 
-    .tags {
+    .card-footer {
       display: flex;
-      gap: 8px;
+      justify-content: space-between;
+      align-items: center;
 
       .tag {
-        font-size: 10px;
-        padding: 2px 8px;
-        border-radius: 8px;
+        font-size: 20rpx;
+        padding: 4rpx 16rpx;
+        border-radius: 20rpx;
 
-        &.yellow {
-          background: #fff8e1;
-          color: #ffb300;
+        &.tag-gold {
+          background: #fff8e6;
+          color: #ffb800;
         }
-
-        &.red {
-          background: #ffebee;
-          color: #ff3b30;
+        &.tag-horse {
+          background: #fff1f0;
+          color: #ff4d4f;
         }
+        &.tag-ink {
+          background: #f0f5ff;
+          color: #2f54eb;
+        }
+        &.tag-draft {
+          background: #f5f5f5;
+          color: #bfbfbf;
+        }
+        &.tag-spring {
+          background: #fff1f0;
+          color: #ff4d4f;
+        }
+      }
 
-        &.blue {
-          background: #e3f2fd;
-          color: #2196f3;
+      .actions {
+        display: flex;
+        gap: 16rpx;
+
+        .action-btn {
+          .action-emoji {
+            font-size: 32rpx;
+            opacity: 0.6;
+          }
         }
       }
     }
   }
+}
 
-  .card-actions {
+.fab-btn {
+  position: fixed;
+  bottom: 60rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+
+  .fab-content {
+    background: #ff4d4f;
+    padding: 20rpx 48rpx;
+    border-radius: 100rpx;
     display: flex;
-    flex-direction: column;
-    gap: 16px;
+    align-items: center;
+    box-shadow: 0 10rpx 30rpx rgba(255, 77, 79, 0.3);
 
-    .action-btn {
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .fab-emoji {
+      font-size: 36rpx;
+      margin-right: 12rpx;
+    }
 
-      .icon {
-        font-size: 20px;
-        color: #666;
-      }
-
-      &:active {
-        opacity: 0.6;
-      }
+    text {
+      color: #fff;
+      font-size: 32rpx;
+      font-weight: bold;
     }
   }
+
+  &:active {
+    opacity: 0.9;
+    transform: translateX(-50%) scale(0.95);
+  }
+}
+
+.footer-note {
+  text-align: center;
+  padding: 60rpx 0 40rpx;
+  font-size: 24rpx;
+  color: #ccc;
 }
 
 .loading-state,
-.empty-state,
-.no-more {
+.empty-state {
+  grid-column: span 2;
   text-align: center;
-  padding: 20px;
+  padding: 100rpx 0;
   color: #999;
-  font-size: 12px;
+  font-size: 28rpx;
 }
 </style>
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 42f933d..9590e49 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -63,11 +63,11 @@
         <!-- My Creations -->
         <view class="section-title">我的创作</view>
         <view class="menu-group">
-          <!-- <view class="menu-item" @tap="navTo('greetings')">
+          <view class="menu-item" @tap="navTo('greetings')">
             <view class="icon-box red-bg"><text>🧧</text></view>
             <text class="menu-text">我的新春祝福</text>
             <text class="arrow">›</text>
-          </view> -->
+          </view>
           <view class="menu-item" @tap="navTo('fortune-record')">
             <view class="icon-box orange-bg"><text>📹</text></view>
             <text class="menu-text">我的新年运势</text>