fix: make move content

api/make.js

@@ -23,9 +23,9 @@ export const getCardTemplateList = async (page = 1) => {
   });
 };
 
-export const getCardTemplateContentList = async () => {
+export const getCardTemplateContentList = async (page = 1) => {
   return request({
-    url: "/api/blessing/card/template-content/list",
+    url: "/api/blessing/card/template-content/list?page=" + page,
     method: "GET",
   });
 };
@@ -36,4 +36,3 @@ export const getCardTemplateTitleList = async (page = 1) => {
     method: "GET",
   });
 };
-

api/system.js

@@ -59,3 +59,10 @@ export const msgCheckApi = async (content) => {
     method: "get",
   });
 };
+
+export const getRandomGreeting = async () => {
+  return request({
+    url: "/api/blessing/random/greeting",
+    method: "get",
+  });
+};

pages.json

@@ -13,7 +13,7 @@
       "path": "pages/make/index",
       "style": {
         "navigationBarTitleText": "讨论",
-        "enablePullDownRefresh": false,
+        "enablePullDownRefresh": true,
         "navigationStyle": "custom"
       }
     },

pages/avatar/index.vue

@@ -1,8 +1,35 @@
 <template>
   <view class="avatar-page">
     <NavBar title="头像制作" />
+
+    <!-- 顶部步骤条 -->
+    <view class="top-steps">
+      <view class="step-bar">
+        <view
+          v-for="(tool, idx) in tools"
+          :key="idx"
+          class="step-item"
+          :class="{ active: activeTool === tool.type }"
+          @tap="openTool(tool.type)"
+        >
+          <view class="step-num-wrap">
+            <view class="step-num">
+              <text v-if="activeTool === tool.type">{{ tool.icon }}</text>
+              <text v-else>{{ tool.step }}</text>
+            </view>
+          </view>
+          <text class="step-text">{{ tool.text }}</text>
+        </view>
+      </view>
+    </view>
+
     <view class="preview-card">
+      <view class="premium-tag">
+        <uni-icons type="info" size="12" color="#fff"></uni-icons>
+        <text>分享或保存即可去除水印</text>
+      </view>
       <view class="preview-square">
+        <view class="watermark">年禧集.马年春节祝福</view>
         <image
           class="avatar-img"
           :src="currentAvatar?.imageUrl"
@@ -38,82 +65,73 @@
       <button class="btn primary" open-type="share">分享给朋友</button>
     </view>
 
-    <view class="section">
+    <!-- 资源选择区 -->
-      <view class="section-header">
+    <view class="resource-selector">
-        <text class="section-title">选择头像</text>
+      <!-- 头像选择区 -->
-        <view class="more-btn" @tap="openMorePopup">
+      <view v-if="activeTool === 'avatar'" class="section">
-          <text>查看更多</text>
+        <view class="section-title">选择头像</view>
-          <text class="arrow">›</text>
+        <view class="grid">
-        </view>
+          <view class="grid-item upload-card">
-      </view>
-      <scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
-        <view class="avatar-list">
-          <view class="avatar-card upload-card">
             <button
               class="wechat-avatar-btn"
               open-type="chooseAvatar"
               @chooseavatar="onChooseAvatar"
             >
-              <view class="upload-icon">📷</view>
+              <view class="upload-icon">✨</view>
               <text class="upload-text">微信头像</text>
             </button>
           </view>
           <view
-            v-for="(item, i) in systemAvatars"
+            v-for="item in systemAvatars"
-            :key="i"
+            :key="item.id"
-            class="avatar-card"
+            class="grid-item"
-            :class="{ active: currentAvatar === item }"
+            :class="{ active: currentAvatar?.id === item.id }"
             @tap="currentAvatar = item"
           >
-            <image
+            <image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
-              :src="item.imageUrl"
+            <view v-if="currentAvatar?.id === item.id" class="check">✓</view>
-              class="avatar-thumb"
-              mode="aspectFill"
-            />
-            <view v-if="currentAvatar === item" class="check">✔</view>
           </view>
         </view>
-      </scroll-view>
+        <view v-if="avatarLoading" class="loading-more">加载中...</view>
+        <view v-if="!avatarHasNext" class="no-more">没有更多了</view>
       </view>
 
-    <view class="tabs">
+      <!-- 头像框选择区 -->
+      <view v-if="activeTool === 'frame'" class="section">
+        <view class="section-title">选择头像框</view>
+        <view class="grid">
           <view
-        class="tab"
+            v-for="item in frames"
-        :class="{ active: activeTab === 'frame' }"
+            :key="item.id"
-        @tap="activeTab = 'frame'"
-        >头像框</view
-      >
-      <view
-        class="tab"
-        :class="{ active: activeTab === 'decor' }"
-        @tap="activeTab = 'decor'"
-        >挂饰配件</view
-      >
-    </view>
-
-    <view v-if="activeTab === 'frame'" class="grid">
-      <view
-        v-for="(frame, i) in frames"
-        :key="i"
             class="grid-item"
-        :class="{ active: selectedFrame === frame }"
+            :class="{ active: selectedFrame?.id === item.id }"
-        @tap="toggleFrame(frame)"
+            @tap="toggleFrame(item)"
           >
-        <image :src="frame.imageUrl" class="grid-img" mode="aspectFill" />
+            <image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
-        <view v-if="selectedFrame === frame" class="check">✔</view>
+            <view v-if="selectedFrame?.id === item.id" class="check">✓</view>
           </view>
         </view>
+        <view v-if="frameLoading" class="loading-more">加载中...</view>
+        <view v-if="!frameHasNext" class="no-more">没有更多了</view>
+      </view>
 
-    <view v-else class="grid">
+      <!-- 挂饰选择区 -->
+      <view v-if="activeTool === 'decor'" class="section">
+        <view class="section-title">选择挂饰</view>
+        <view class="grid">
           <view
-        v-for="(decor, i) in decors"
+            v-for="item in decors"
-        :key="i"
+            :key="item.id"
             class="grid-item"
-        :class="{ active: selectedDecor === decor }"
+            :class="{ active: selectedDecor?.id === item.id }"
-        @tap="toggleDecor(decor)"
+            @tap="toggleDecor(item)"
           >
-        <image :src="decor.imageUrl" class="grid-img" mode="aspectFit" />
+            <image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
-        <view v-if="selectedDecor === decor" class="check">✔</view>
+            <view v-if="selectedDecor?.id === item.id" class="check">✓</view>
+          </view>
+        </view>
+        <view v-if="decorLoading" class="loading-more">加载中...</view>
+        <view v-if="!decorHasNext" class="no-more">没有更多了</view>
       </view>
     </view>
 
@@ -164,11 +182,7 @@
 import { ref, computed } from "vue";
 import { onShareAppMessage, onLoad, onReachBottom } from "@dcloudio/uni-app";
 import { useUserStore } from "@/stores/user";
-import {
+import { getShareReward, abilityCheck } from "@/api/system.js";
-  createShareToken,
-  getShareReward,
-  abilityCheck,
-} from "@/api/system.js";
 import {
   getAvatarSystemList,
   getAvatarFrameList,
@@ -192,7 +206,23 @@ const systemAvatars = ref([]);
 const frames = ref([]);
 const decors = ref([]);
 
+// Panel and steps logic
+const activeTool = ref("avatar");
+const tools = [
+  { step: "01", text: "头像", type: "avatar", icon: "👤" },
+  { step: "02", text: "头像框", type: "frame", icon: "🖼️" },
+  { step: "03", text: "挂饰配件", type: "decor", icon: "✨" },
+];
+
+const openTool = (type) => {
+  activeTool.value = type;
+};
+
 // Pagination states
+const avatarPage = ref(1);
+const avatarHasNext = ref(true);
+const avatarLoading = ref(false);
+
 const framePage = ref(1);
 const frameHasNext = ref(true);
 const frameLoading = ref(false);
@@ -204,14 +234,41 @@ const decorLoading = ref(false);
 const currentAvatar = ref(null);
 const selectedFrame = ref(null);
 const selectedDecor = ref(null);
-const activeTab = ref("frame");
 
 // More Popup logic
 const morePopup = ref(null);
 const moreAvatars = ref([]);
-const page = ref(1);
+
-const hasMore = ref(true);
+const loadAvatars = async () => {
-const loading = ref(false);
+  if (avatarLoading.value || !avatarHasNext.value) return;
+  avatarLoading.value = true;
+  try {
+    const res = await getAvatarSystemList(avatarPage.value);
+    const list = res?.list || [];
+    if (list.length > 0) {
+      systemAvatars.value.push(
+        ...list.map((item) => ({
+          id: item.id,
+          imageUrl: item.imageUrl,
+        })),
+      );
+      avatarPage.value++;
+      // 默认选中第一个
+      if (systemAvatars.value.length > 0 && !currentAvatar.value) {
+        currentAvatar.value = systemAvatars.value[0];
+      }
+    }
+    if (typeof res.hasNext !== "undefined") {
+      avatarHasNext.value = res.hasNext;
+    } else {
+      if (list.length < 10) avatarHasNext.value = false;
+    }
+  } catch (e) {
+    console.error("Failed to load avatars:", e);
+  } finally {
+    avatarLoading.value = false;
+  }
+};
 
 const loadFrames = async () => {
   if (frameLoading.value || !frameHasNext.value) return;
@@ -267,27 +324,8 @@ const loadDecors = async () => {
   }
 };
 
-const initSystemAvatars = async () => {
-  try {
-    const res = await getAvatarSystemList(1);
-    const list = res?.list || [];
-    if (list.length > 0) {
-      // 取前3个展示在首页
-      systemAvatars.value = list
-        .slice(0, 3)
-        .map((item) => ({ id: item.id, imageUrl: item.imageUrl }));
-      // 默认选中第一个
-      if (systemAvatars.value.length > 0 && !currentAvatar.value) {
-        currentAvatar.value = systemAvatars.value[0];
-      }
-    }
-  } catch (e) {
-    console.error("Failed to load system avatars:", e);
-  }
-};
-
 onLoad((options) => {
-  initSystemAvatars();
+  loadAvatars();
   loadFrames();
   loadDecors();
 
@@ -299,10 +337,10 @@ onLoad((options) => {
     };
 
     if (options.type === "frame") {
-      activeTab.value = "frame";
+      activeTool.value = "frame";
       selectedFrame.value = recommendItem;
     } else if (options.type === "decor") {
-      activeTab.value = "decor";
+      activeTool.value = "decor";
       selectedDecor.value = recommendItem;
     } else if (options.type === "avatar") {
       currentAvatar.value = recommendItem;
@@ -311,69 +349,17 @@ onLoad((options) => {
 });
 
 onReachBottom(() => {
-  if (activeTab.value === "frame") {
+  if (activeTool.value === "avatar") {
+    loadAvatars();
+  } else if (activeTool.value === "frame") {
     loadFrames();
-  } else if (activeTab.value === "decor") {
+  } else if (activeTool.value === "decor") {
     loadDecors();
   }
 });
 
-const openMorePopup = () => {
+const goBack = () => {
-  morePopup.value.open();
+  uni.navigateBack();
-  if (moreAvatars.value.length === 0) {
-    // 重新加载第一页，因为 systemAvatars 只取了前3个，
-    // 这里我们简单处理：重新请求第一页作为更多列表的开始
-    // 或者你可以复用 systemAvatars 的数据，然后 page 从 2 开始请求
-    // 为了逻辑简单和数据一致性，这里选择重新请求第一页填充更多列表
-    loadMoreAvatars();
-  }
-};
-
-const closeMorePopup = () => {
-  morePopup.value.close();
-};
-
-const loadMoreAvatars = async () => {
-  if (loading.value || !hasMore.value) return;
-  loading.value = true;
-  try {
-    const res = await getAvatarSystemList(page.value);
-    const list = res?.list || [];
-
-    if (list.length > 0) {
-      const newAvatars = list.map((item) => ({
-        id: item.id,
-        imageUrl: item.imageUrl,
-      }));
-      moreAvatars.value.push(...newAvatars);
-      page.value++;
-    }
-
-    // 根据接口返回的 hasNext 字段判断是否还有更多数据
-    // 如果接口没有返回 hasNext，则降级使用列表长度判断（假设每页10条）
-    if (typeof res.hasNext !== "undefined") {
-      hasMore.value = res.hasNext;
-    } else {
-      if (list.length < 10) {
-        hasMore.value = false;
-      }
-    }
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loading.value = false;
-  }
-};
-
-const createAvatarId = () => {
-  const id = generateObjectId();
-  // avatarCreateComplete({ id });
-  return id;
-};
-
-const selectMoreAvatar = (item) => {
-  currentAvatar.value = item;
-  closeMorePopup();
 };
 
 const toggleFrame = (frame) => {
@@ -491,19 +477,9 @@ const onChooseAvatar = async (e) => {
   }
 };
 
-const useWeChatAvatar = () => {
+const createAvatarId = () => {
-  if (!isLoggedIn.value) {
+  const id = generateObjectId();
-    loginPopupRef.value.open();
+  return id;
-  } else {
-    currentAvatar.value = {
-      id: "wechat_" + Date.now(),
-      imageUrl: userStore.userInfo.avatarUrl,
-    };
-  }
-};
-
-const goBack = () => {
-  uni.navigateBack();
 };
 
 const saveByCanvas = async (save = true) => {
@@ -695,23 +671,22 @@ const completeCardInfo = async (id) => {
 onShareAppMessage(async () => {
   getShareReward({ scene: "avatar_download" });
   if (!isLoggedIn.value) {
-    const shareTokenRes = await getShareToken("avatar_download_not_login", "");
+    const shareToken = await getShareToken("avatar_download_not_login", "");
     return {
       title: "新春祝福",
-      path: `/pages/index/index?shareToken=${shareTokenRes.shareToken}`,
+      path: `/pages/index/index?shareToken=${shareToken}`,
     };
   }
   uni.showLoading({ title: "分享中...", mask: true });
   const id = createAvatarId();
-  // const shareTokenRes = {
+  const [shareToken, imageUrl] = await Promise.all([
-  //   shareToken: "iFmK8WjRm6TK",
+    getShareToken("avatar_download", id),
-  // };
+    completeCardInfo(id),
-  const shareTokenRes = await getShareToken("avatar_download", id);
+  ]);
-  const imageUrl = await completeCardInfo(id);
   uni.hideLoading();
   return {
     title: "我做了一个新头像，真的太好看了",
-    path: `/pages/avatar/detail?shareToken=${shareTokenRes.shareToken}`,
+    path: `/pages/avatar/detail?shareToken=${shareToken}`,
     imageUrl, // 使用默认封面或 popularCards 的封面
   };
 });
@@ -723,167 +698,285 @@ onShareAppMessage(async () => {
 //       "https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png",
 //   };
 // });
-
-const loadImage = (url) => {
-  return new Promise((resolve, reject) => {
-    uni.getImageInfo({
-      src: url,
-      success: (res) => resolve(res.path),
-      fail: reject,
-    });
-  });
-};
 </script>
 
 <style lang="scss" scoped>
 .avatar-page {
   min-height: 100vh;
-  background: #fff;
+  background: #f8f8f8;
-  box-sizing: border-box;
+  padding-bottom: 200rpx;
-  padding-bottom: env(safe-area-inset-bottom);
 }
+
+.top-steps {
+  background: #fff;
+  padding: 30rpx 40rpx;
+  margin-bottom: 20rpx;
+  position: sticky;
+  top: var(--window-top);
+  z-index: 100;
+
+  .step-bar {
+    display: flex;
+    background: #f5f5f5;
+    padding: 8rpx;
+    border-radius: 50rpx;
+    position: relative;
+  }
+
+  .step-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 72rpx;
+    position: relative;
+    flex: 1;
+    z-index: 2;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 40rpx;
+
+    .step-num-wrap {
+      display: flex;
+      align-items: center;
+      margin-right: 12rpx;
+    }
+
+    .step-num {
+      width: 36rpx;
+      height: 36rpx;
+      background: #e0e0e0;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18rpx;
+      color: #666;
+      transition: all 0.3s;
+    }
+
+    .step-text {
+      font-size: 26rpx;
+      color: #666;
+      transition: all 0.3s;
+    }
+
+    &.active {
+      background: #fff;
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+
+      .step-num {
+        background: #ff3b30;
+        color: #fff;
+      }
+
+      .step-text {
+        color: #333;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
 .preview-card {
-  margin: 20rpx 24rpx;
   background: #fff;
-  border-radius: 24rpx;
+  margin: 0 30rpx 30rpx;
-  padding: 24rpx;
+  padding: 40rpx;
-  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
+  border-radius: 32rpx;
-}
+  position: relative;
-.preview-square {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+
+  .premium-tag {
+    position: absolute;
+    top: 20rpx;
+    right: 0rpx;
+    background: linear-gradient(90deg, #ff8d42, #ff3b30);
+    color: #fff;
+    font-size: 20rpx;
+    padding: 8rpx 30rpx 8rpx 20rpx;
+    border-radius: 20rpx 0 0 20rpx;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
+    transform: translateX(10rpx);
+  }
+
+  .preview-square {
+    position: relative;
     width: 600rpx;
     height: 600rpx;
-  margin: 0 auto;
+    background: #fff;
-  border-radius: 24rpx;
+    border-radius: 32rpx;
-  background: #f5dfc9;
-  position: relative;
     overflow: hidden;
-}
+    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
-.avatar-img {
+
+    .watermark {
       position: absolute;
-  inset: 0;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(-45deg);
+      font-size: 36rpx;
+      color: rgba(255, 255, 255, 0.2);
+      font-weight: bold;
+      pointer-events: none;
+      white-space: nowrap;
+      z-index: 10;
+    }
+
+    .avatar-img {
       width: 100%;
       height: 100%;
-}
+    }
-.frame-img {
+
-  position: absolute;
+    .frame-img {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.decor-img {
       position: absolute;
       top: 0;
       left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+
+    .decor-img {
+      position: absolute;
       width: 240rpx;
       height: 240rpx;
-  /* 移除原有的 transform 和 center positioning，改为由 inline style 控制 */
+      z-index: 3;
-}
+      top: 0;
-.preview-tip {
+      left: 0;
-  display: block;
+    }
-  text-align: center;
+  }
-  color: #999;
+
-  font-size: 22rpx;
+  .interaction-tip {
-  margin-top: 12rpx;
+    margin-top: 30rpx;
-}
-.interaction-tip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12rpx;
-  margin-top: 20rpx;
     font-size: 24rpx;
     color: #ff3b30;
-  background: #fff0f0;
+    background: rgba(255, 59, 48, 0.1);
-  padding: 12rpx 32rpx;
+    padding: 10rpx 30rpx;
-  border-radius: 999rpx;
+    border-radius: 100rpx;
-  width: fit-content;
+
-  margin-left: auto;
+    .tip-divider {
-  margin-right: auto;
+      margin: 0 15rpx;
-}
+      opacity: 0.3;
-.tip-divider {
+    }
-  color: #ffccc7;
+  }
-  margin: 0 4rpx;
+
+  .preview-tip {
+    margin-top: 30rpx;
+    font-size: 24rpx;
+    color: #999;
+  }
 }
 
 .action-buttons {
+  padding: 0 30rpx;
   display: flex;
-  padding: 0 48rpx;
+  gap: 20rpx;
-  gap: 32rpx;
+  margin-bottom: 30rpx;
-  margin-top: 32rpx;
-}
 
-.btn {
+  .btn {
     flex: 1;
     height: 88rpx;
-  border-radius: 999rpx;
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: 44rpx;
     font-size: 30rpx;
-  font-weight: 600;
+    font-weight: bold;
-  margin: 0;
+
-  padding: 0;
+    &.primary {
-  border: none;
+      background: #ff3b30;
-  line-height: normal;
+      color: #fff;
-}
+    }
-.btn::after {
+
-  border: none;
+    &.secondary {
+      background: #fff;
+      color: #333;
+      border: 2rpx solid #eee;
+    }
+  }
 }
 
-.section {
+.resource-selector {
-  margin-top: 24rpx;
+  background: #fff;
-  padding: 0 24rpx;
+  margin: 0 30rpx 30rpx;
-}
+  padding: 30rpx;
-.section-header {
+  border-radius: 32rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+
+  .section-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    margin-bottom: 24rpx;
+    color: #333;
     display: flex;
     align-items: center;
-  margin-bottom: 12rpx;
+
-}
+    &::before {
-.section-title {
+      content: "";
-  font-size: 26rpx;
+      width: 8rpx;
-  font-weight: 600;
+      height: 32rpx;
-}
+      background: #ff3b30;
-.avatar-scroll {
+      border-radius: 4rpx;
-  width: 100%;
-}
-.avatar-list {
-  display: flex;
-}
-.avatar-card {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 16rpx;
-  overflow: hidden;
       margin-right: 16rpx;
+    }
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20rpx;
+
+  .grid-item {
+    aspect-ratio: 1;
+    background: #f5f5f5;
+    border-radius: 20rpx;
+    overflow: hidden;
     position: relative;
-  background: #fff;
+    border: 4rpx solid transparent;
-  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
 
     &.active {
-    outline: 4rpx solid #ff3b30;
+      border-color: #ff3b30;
+    }
+
+    .grid-img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .check {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: #ff3b30;
+      color: #fff;
+      font-size: 20rpx;
+      padding: 4rpx 8rpx;
+      border-radius: 0 0 0 16rpx;
     }
 
     &.upload-card {
-    background: #fff5f5;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-    border: 2rpx dashed #ffccc7;
+      background: #fdf2f2;
-    box-sizing: border-box;
+      border: 2rpx dashed #ffcbcb;
 
       .wechat-avatar-btn {
         width: 100%;
         height: 100%;
         padding: 0;
-      margin: 0;
         background: transparent;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-      line-height: normal;
+        line-height: 1.2;
-      border: none;
 
         &::after {
           border: none;
@@ -891,164 +984,30 @@ const loadImage = (url) => {
       }
 
       .upload-icon {
-      font-size: 48rpx;
+        font-size: 40rpx;
         margin-bottom: 8rpx;
       }
 
       .upload-text {
-      font-size: 22rpx;
+        font-size: 20rpx;
         color: #ff3b30;
-      font-weight: 500;
+      }
     }
   }
 }
 
-.avatar-thumb {
+.loading-more,
-  width: 100%;
+.no-more {
-  height: 100%;
-}
-.check {
-  position: absolute;
-  right: 8rpx;
-  top: 8rpx;
-  width: 32rpx;
-  height: 32rpx;
-  border-radius: 50%;
-  background: #ff3b30;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22rpx;
-}
-
-.tabs {
-  display: flex;
-  padding: 16rpx 24rpx 8rpx;
-  gap: 12rpx;
-}
-.tab {
-  flex: 1;
   text-align: center;
-  background: #f7f7f7;
+  font-size: 24rpx;
-  border-radius: 999rpx;
+  color: #999;
-  height: 64rpx;
+  padding: 30rpx 0;
-  line-height: 64rpx;
-  font-size: 26rpx;
-  color: #666;
-}
-.tab.active {
-  background: #fff0f0;
-  color: #ff3b30;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16rpx;
-  padding: 8rpx 24rpx 24rpx;
-}
-.grid-item {
-  height: 200rpx;
-  border-radius: 16rpx;
-  background: #fff;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
-}
-.grid-item.active {
-  outline: 4rpx solid #ff3b30;
-}
-.grid-img {
-  width: 100%;
-  height: 100%;
-}
-
-.btn.primary {
-  background: #ff3b30;
-  color: #fff;
-  box-shadow: 0 12rpx 24rpx rgba(255, 59, 48, 0.35);
-}
-.btn.secondary {
-  background: #f5f5f5;
-  color: #333;
-}
 .hidden-canvas {
   position: fixed;
   left: -9999px;
   top: -9999px;
 }
-
-/* More Popup Styles */
-.more-btn {
-  margin-left: auto;
-  font-size: 24rpx;
-  color: #999;
-  display: flex;
-  align-items: center;
-}
-.arrow {
-  font-size: 32rpx;
-  margin-left: 4rpx;
-  line-height: 1;
-  position: relative;
-  top: -2rpx;
-}
-
-.popup-content {
-  background: #fff;
-  border-radius: 24rpx 24rpx 0 0;
-  height: 60vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.popup-header {
-  padding: 32rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-bottom: 2rpx solid #f5f5f5;
-}
-.popup-title {
-  font-size: 32rpx;
-  font-weight: 600;
-}
-.close-btn {
-  position: absolute;
-  right: 32rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 32rpx;
-  color: #999;
-  padding: 10rpx;
-}
-.popup-scroll {
-  flex: 1;
-  height: 0;
-}
-.popup-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20rpx;
-  padding: 24rpx;
-}
-.popup-item {
-  aspect-ratio: 1;
-  border-radius: 16rpx;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-.popup-img {
-  width: 100%;
-  height: 100%;
-}
-.loading-text,
-.no-more-text {
-  text-align: center;
-  padding: 24rpx;
-  color: #999;
-  font-size: 24rpx;
-}
 </style>
+"}]} ```

pages/fortune/index.vue

@@ -119,10 +119,14 @@ import { getDeviceInfo } from "@/utils/system";
 import { onLoad, onShow, onShareAppMessage } from "@dcloudio/uni-app";
 import { abilityCheck } from "@/api/system.js";
 import { drawFortune } from "@/api/fortune.js";
-import { createShareToken, getShareReward } from "@/api/system.js";
+import { getShareReward } from "@/api/system.js";
 import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
 import { useUserStore } from "@/stores/user";
-import { saveRemoteImageToLocal, saveRecordRequest } from "@/utils/common.js";
+import {
+  getShareToken,
+  saveRemoteImageToLocal,
+  saveRecordRequest,
+} from "@/utils/common.js";
 import NavBar from "@/components/NavBar/NavBar.vue";
 
 const userStore = useUserStore();
@@ -158,16 +162,11 @@ onUnmounted(() => {
 });
 
 onShareAppMessage(async () => {
-  const deviceInfo = getDeviceInfo();
+  const shareToken = await getShareToken("fortune_draw", cardId.value);
-  const shareTokenRes = await createShareToken({
-    targetId: cardId.value,
-    scene: "fortune_draw",
-    ...deviceInfo,
-  });
   getRewardByShare();
   return {
     title: "马年运势我已经抽过了，你的会是什么？",
-    path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareTokenRes.shareToken}` : `/pages/fortune/index?shareToken=${shareTokenRes.shareToken}`}`,
+    path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareToken}` : `/pages/fortune/index?shareToken=${shareTokenRes.shareToken}`}`,
     imageUrl:
       "https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
   };

pages/index/index.vue

@@ -105,9 +105,11 @@ import {
   onPullDownRefresh,
   onShareAppMessage,
   onReachBottom,
+  onLoad,
 } from "@dcloudio/uni-app";
 import { getBavBarHeight } from "@/utils/system";
-import { getRecommendList } from "@/api/system";
+import { getRecommendList, getRandomGreeting } from "@/api/system";
+import { getShareToken, saveViewRequest } from "@/utils/common.js";
 
 const countdownText = ref("");
 
@@ -146,31 +148,40 @@ const updateCountdown = () => {
 const todayDate = ref("");
 const dailyGreeting = ref("");
 
-const inspirationList = [
+onLoad((options) => {
-  "岁岁常欢愉，年年皆胜意。愿你新的一年，多喜乐，长安宁。",
+  if (options.shareToken) saveViewRequest(options.shareToken, "index");
-  "新的一年，愿日子如熹光，温柔又安详。你我赤诚且勇敢，欣喜也在望。",
-  "祝你：百事无忌，平安喜乐。万事胜意，得偿所愿。",
-  "凡是过往，皆为序章。愿2026年，烟火向星辰，所愿皆成真。",
-  "愿新的一年，仍有阳光满路，温暖如初。",
-  "辞暮尔尔，烟火年年。朝朝暮暮，岁岁平安。",
-  "愿你即使单枪匹马，也能勇敢无畏。新的一年，万事尽可期待。",
-  "所求皆如愿，所行化坦途。多喜乐，长安宁。",
-  "愿你手握山河，且行且歌。新年快乐，万事大吉。",
-  "长路浩浩荡荡，万物尽可期待。祝你新年好运。",
-  "何其有幸，年岁并进。新的一年，愿你快乐，不止新年。",
-  "愿新年，胜旧年。无病无灾，岁岁平安。",
-  "烟火起，照人间，举杯敬此年。烟花落，看人间，家家户户皆团圆。",
-  "家人闲坐，灯火可亲。新年伊始，喜乐安宁。",
-  "愿今年所有的遗憾，都是明年惊喜的铺垫。",
-];
 
-const copyGreeting = () => {
+  updateCountdown();
-  uni.setClipboardData({
+  getRandomGreetingText();
-    data: dailyGreeting.value,
+  fetchRecommendList();
-    success: () => {
+
-      uni.showToast({ title: "复制成功", icon: "none" });
+  const date = new Date();
-    },
+  todayDate.value = `${date.getMonth() + 1}月${date.getDate()}日`;
-  });
+
+  // Daily Inspiration Logic
+  // const startOfYear = new Date(date.getFullYear(), 0, 0);
+  // const diff = date - startOfYear;
+  // const oneDay = 1000 * 60 * 60 * 24;
+  // const dayOfYear = Math.floor(diff / oneDay);
+
+  // const index = dayOfYear % inspirationList.length;
+  // dailyGreeting.value = inspirationList[index];
+});
+
+onShareAppMessage(async () => {
+  const shareToken = await getShareToken("index");
+  return {
+    title: "新春祝福",
+    path: `/pages/index/index?shareToken=${shareToken}`,
+    imageUrl:
+      "https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
+  };
+});
+
+const getRandomGreetingText = async () => {
+  const content = await getRandomGreeting();
+  dailyGreeting.value =
+    content || "烟火起，照人间，举杯敬此年。烟花落，看人间，家家户户皆团圆。";
 };
 
 const useGreeting = () => {
@@ -180,23 +191,6 @@ const useGreeting = () => {
   });
 };
 
-onMounted(() => {
-  updateCountdown();
-  const date = new Date();
-  todayDate.value = `${date.getMonth() + 1}月${date.getDate()}日`;
-
-  // Daily Inspiration Logic
-  const startOfYear = new Date(date.getFullYear(), 0, 0);
-  const diff = date - startOfYear;
-  const oneDay = 1000 * 60 * 60 * 24;
-  const dayOfYear = Math.floor(diff / oneDay);
-
-  const index = dayOfYear % inspirationList.length;
-  dailyGreeting.value = inspirationList[index];
-
-  fetchRecommendList();
-});
-
 const features = ref([
   {
     title: "新春祝福卡片",
@@ -342,25 +336,11 @@ onReachBottom(() => {
   fetchRecommendList();
 });
 
-const onMore = () => {
-  uni.showToast({ title: "更多模板即将上线～", icon: "none" });
-};
-
 onPullDownRefresh(async () => {
-  await fetchRecommendList(true);
+  updateCountdown();
-  setTimeout(() => {
+  await Promise.all([fetchRecommendList(true), getRandomGreetingText()]);
   uni.stopPullDownRefresh();
   uni.showToast({ title: "已为你更新内容", icon: "success" });
-  }, 600);
-});
-
-onShareAppMessage(() => {
-  return {
-    title: "新春祝福",
-    path: "/pages/index/index",
-    imageUrl:
-      "https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
-  };
 });
 </script>
 

pages/make/index.vue

@@ -51,6 +51,9 @@
         <view
           class="bubble"
           @tap="openTool('text')"
+          @touchstart.stop="handleBubbleTouchStart"
+          @touchmove.stop="handleBubbleTouchMove"
+          @touchend.stop="handleBubbleTouchEnd"
           :style="{
             marginTop: 230 + bubbleOffsetY + 'rpx',
             maxWidth: bubbleMaxWidth + 80 + 'rpx',
@@ -95,7 +98,7 @@
     <view class="tip-line">
       <view class="interaction-tip">
         <uni-icons type="hand-up" size="14" color="#ff3b30"></uni-icons>
-        <text>点击标题或个人信息可拖动，双指可缩放标题</text>
+        <text>标题、祝福语、个人信息可拖动改变位置，双指可缩放标题</text>
       </view>
     </view>
 
@@ -120,12 +123,15 @@
     <!-- 弹出编辑面板 -->
     <view class="panel-container" :class="{ show: showPanel }">
       <view class="panel-mask" @tap="closePanel"></view>
-      <view
+      <scroll-view
+        scroll-y
         class="panel-content"
         :class="{
           'glass-effect': activeTool === 'text' || activeTool === 'position',
         }"
+        @scrolltolower="onPanelScrollToLower"
       >
+        <view class="panel-inner">
           <view class="panel-handle" @tap="closePanel"></view>
 
           <!-- 标题选择区 -->
@@ -186,7 +192,9 @@
                   >
                 </view>
               </view>
-            <view v-if="loadingTemplates" class="loading-more">加载中...</view>
+              <view v-if="loadingTemplates" class="loading-more"
+                >加载中...</view
+              >
               <view
                 v-else-if="!hasMoreTemplates && templates.length > 0"
                 class="no-more"
@@ -209,38 +217,6 @@
               />
             </view>
 
-          <!-- 祝福语库 -->
-          <view class="form-item">
-            <view class="label-row">
-              <text class="label">祝福语库</text>
-              <view class="refresh-btn" @tap="refreshGreetings">
-                <text class="refresh-icon">↻</text> 换一批
-              </view>
-            </view>
-            <scroll-view
-              scroll-x
-              class="greeting-scroll"
-              show-scrollbar="false"
-            >
-              <view class="greeting-list">
-                <view
-                  v-for="(text, index) in displayedGreetings"
-                  :key="index"
-                  class="greeting-card"
-                  :class="{ active: blessingText.content === text.content }"
-                  @tap="selectGreeting(text)"
-                >
-                  <text class="greeting-text">{{ text.content }}</text>
-                  <view
-                    v-if="blessingText.content === text.content"
-                    class="check-mark"
-                    >✔</view
-                  >
-                </view>
-              </view>
-            </scroll-view>
-          </view>
-
             <!-- 署名 -->
             <view class="form-item">
               <text class="label">署名</text>
@@ -257,6 +233,72 @@
               </view>
             </view>
 
+            <!-- 祝福语库 -->
+            <view class="form-item">
+              <view class="label-row">
+                <text class="label">祝福语库</text>
+              </view>
+              <view class="greeting-grid">
+                <view
+                  v-for="(text, index) in greetingLib"
+                  :key="index"
+                  class="greeting-card"
+                  :class="{ active: blessingText.content === text.content }"
+                  @tap="selectGreeting(text)"
+                >
+                  <text class="greeting-text">{{ text.content }}</text>
+                  <view
+                    v-if="blessingText.content === text.content"
+                    class="check-mark"
+                    >✔</view
+                  >
+                </view>
+              </view>
+              <view v-if="loadingBlessings" class="loading-more"
+                >加载中...</view
+              >
+              <view
+                v-else-if="!hasMoreBlessings && greetingLib.length > 0"
+                class="no-more"
+                >没有更多了</view
+              >
+            </view>
+          </view>
+
+          <!-- 样式与位置 -->
+          <view
+            v-if="activeTool === 'position'"
+            class="section position-section"
+          >
+            <view class="section-title">
+              <text>调整样式与位置</text>
+            </view>
+
+            <!-- 字体大小 -->
+            <view class="form-item" style="margin-top: 20rpx">
+              <text class="label">字体大小</text>
+              <slider
+                :value="fontSize"
+                min="24"
+                max="64"
+                show-value
+                @change="(e) => (fontSize = e.detail.value)"
+                activeColor="#ff3b30"
+              />
+            </view>
+
+            <view class="form-item">
+              <text class="label">祝福语宽窄</text>
+              <slider
+                :value="bubbleMaxWidth"
+                min="200"
+                max="460"
+                show-value
+                @change="(e) => (bubbleMaxWidth = e.detail.value)"
+                activeColor="#ff3b30"
+              />
+            </view>
+
             <!-- 字体选择 -->
             <view class="form-item">
               <text class="label">字体样式</text>
@@ -277,19 +319,6 @@
               </scroll-view>
             </view>
 
-          <!-- 字体大小 -->
-          <view class="form-item">
-            <text class="label">字体大小</text>
-            <slider
-              :value="fontSize"
-              min="24"
-              max="64"
-              show-value
-              @change="(e) => (fontSize = e.detail.value)"
-              activeColor="#ff3b30"
-            />
-          </view>
-
             <!-- 文字颜色 -->
             <view class="form-item">
               <text class="label">祝福语颜色</text>
@@ -307,15 +336,25 @@
                 </view>
               </view>
             </view>
+
+            <view class="form-item">
+              <text class="label">署名颜色</text>
+              <view class="color-list">
+                <view
+                  v-for="(color, index) in textColors"
+                  :key="index"
+                  class="color-item"
+                  :style="{ background: color }"
+                  @tap="signatureColor = color"
+                >
+                  <view v-if="signatureColor === color" class="color-check"
+                    >✔</view
+                  >
+                </view>
+              </view>
             </view>
 
-        <!-- 位置调整 -->
+            <!-- <view class="form-item">
-        <view v-if="activeTool === 'position'" class="section position-section">
-          <view class="section-title">
-            <text>调整位置</text>
-          </view>
-
-          <view class="form-item" style="margin-top: 20rpx">
             <text class="label">祝福语气泡 (上下)</text>
             <slider
               :value="bubbleOffsetY"
@@ -327,18 +366,6 @@
             />
           </view>
 
-          <view class="form-item">
-            <text class="label">祝福语气泡宽度</text>
-            <slider
-              :value="bubbleMaxWidth"
-              min="200"
-              max="460"
-              show-value
-              @change="(e) => (bubbleMaxWidth = e.detail.value)"
-              activeColor="#ff3b30"
-            />
-          </view>
-
           <view class="form-item">
             <text class="label">个人信息 (上下)</text>
             <slider
@@ -361,26 +388,10 @@
               @change="(e) => (userOffsetX = e.detail.value)"
               activeColor="#ff3b30"
             />
-          </view>
+          </view> -->
-
-          <view class="form-item">
-            <text class="label">署名颜色</text>
-            <view class="color-list">
-              <view
-                v-for="(color, index) in textColors"
-                :key="index"
-                class="color-item"
-                :style="{ background: color }"
-                @tap="signatureColor = color"
-              >
-                <view v-if="signatureColor === color" class="color-check"
-                  >✔</view
-                >
-              </view>
-            </view>
-          </view>
           </view>
         </view>
+      </scroll-view>
     </view>
 
     <canvas
@@ -395,7 +406,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
 import { generateObjectId, getShareToken } from "@/utils/common";
 
@@ -406,17 +417,13 @@ import {
   getCardTemplateContentList,
   getCardTemplateTitleList,
 } from "@/api/make";
-import {
+import { abilityCheck, getShareReward, msgCheckApi } from "@/api/system";
-  createShareToken,
-  abilityCheck,
-  getShareReward,
-  msgCheckApi,
-} from "@/api/system";
 import {
   onShareAppMessage,
   onLoad,
   onReachBottom,
   onShow,
+  onPullDownRefresh,
 } from "@dcloudio/uni-app";
 import { useUserStore } from "@/stores/user";
 import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
@@ -426,6 +433,9 @@ const userStore = useUserStore();
 const loginPopupRef = ref(null);
 const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
 
+const DEFAULT_AVATAR =
+  "https://file.lihailezzc.com/resource/96023631c6ab9c3496b7620097af3d6f.png";
+
 const templatePage = ref(1);
 const loadingTemplates = ref(false);
 const hasMoreTemplates = ref(true);
@@ -512,6 +522,31 @@ const handleUserTouchMove = (e) => {
   }
 };
 
+// 祝福语触摸交互相关
+let startBubbleTouches = [];
+let initialBubbleOffsetY = 0;
+
+const handleBubbleTouchStart = (e) => {
+  startBubbleTouches = e.touches;
+  initialBubbleOffsetY = bubbleOffsetY.value;
+};
+
+const handleBubbleTouchEnd = () => {
+  startBubbleTouches = [];
+};
+
+const handleBubbleTouchMove = (e) => {
+  if (!startBubbleTouches.length) return;
+
+  if (e.touches.length === 1 && startBubbleTouches.length === 1) {
+    // 单指拖拽 (仅上下)
+    const moveY = e.touches[0].clientY - startBubbleTouches[0].clientY;
+    let newY = initialBubbleOffsetY + moveY * pxToRpx;
+    // 合理范围限制，参考 slider 的 min/max
+    bubbleOffsetY.value = Math.min(Math.max(newY, -200), 400);
+  }
+};
+
 const handleTitleTouchMove = (e) => {
   if (!currentTitle.value || !startTouches.length) return;
 
@@ -584,10 +619,7 @@ const handleSignatureBlur = async () => {
     oldSignatureName.value = signatureName.value;
   }
 };
-const userAvatar = ref(
+const userAvatar = ref(userStore?.userInfo?.avatarUrl || DEFAULT_AVATAR);
-  userStore?.userInfo?.avatarUrl ||
-    "https://file.lihailezzc.com/resource/96023631c6ab9c3496b7620097af3d6f.png",
-);
 
 const blessingText = ref({});
 const fontSize = ref(32);
@@ -664,7 +696,9 @@ const changeFont = (font) => {
 };
 
 const greetingLib = ref([]);
-const greetingIndex = ref(0);
+const blessingPage = ref(1);
+const loadingBlessings = ref(false);
+const hasMoreBlessings = ref(true);
 
 const bubbleOffsetY = ref(0);
 const bubbleMaxWidth = ref(400); // 默认宽度
@@ -677,7 +711,30 @@ onLoad((options) => {
   getTemplateTitleList();
 });
 
+const syncUserInfo = () => {
+  if (isLoggedIn.value) {
+    if (signatureName.value === "xxx" || !signatureName.value) {
+      signatureName.value = userStore.userInfo.nickName;
+      oldSignatureName.value = userStore.userInfo.nickName;
+    }
+    if (userAvatar.value === DEFAULT_AVATAR || !userAvatar.value) {
+      userAvatar.value = userStore.userInfo.avatarUrl;
+    }
+  }
+};
+
+watch(
+  () => userStore.userInfo,
+  (newVal) => {
+    if (newVal?.nickName) {
+      syncUserInfo();
+    }
+  },
+  { deep: true },
+);
+
 onShow(() => {
+  syncUserInfo();
   const recommendData = uni.getStorageSync("RECOMMEND_CARD_DATA");
   if (recommendData) {
     uni.removeStorageSync("RECOMMEND_CARD_DATA");
@@ -713,10 +770,31 @@ onReachBottom(() => {
     loadMoreTemplates();
   } else if (activeTool.value === "title") {
     loadMoreTitles();
+  } else if (activeTool.value === "text") {
+    loadMoreBlessings();
   }
 });
 
-const handleLogind = async () => {};
+onPullDownRefresh(async () => {
+  templatePage.value = 1;
+  hasMoreTemplates.value = true;
+  titlePage.value = 1;
+  hasMoreTitles.value = true;
+  blessingPage.value = 1;
+  hasMoreBlessings.value = true;
+
+  await Promise.all([
+    getTemplateList(),
+    getTemplateTitleList(),
+    getTemplateContentList(),
+  ]);
+  uni.stopPullDownRefresh();
+  uni.showToast({ title: "已为你更新内容", icon: "success" });
+});
+
+const handleLogind = async () => {
+  syncUserInfo();
+};
 
 const createCard = () => {
   const id = generateObjectId();
@@ -765,6 +843,9 @@ const getTemplateList = async (isLoadMore = false) => {
     console.error("加载模板失败:", error);
   } finally {
     loadingTemplates.value = false;
+    if (!isLoadMore && hasMoreTemplates.value) {
+      getTemplateList(true);
+    }
   }
 };
 
@@ -803,6 +884,9 @@ const getTemplateTitleList = async (isLoadMore = false) => {
     console.error("加载标题失败:", error);
   } finally {
     loadingTitles.value = false;
+    if (!isLoadMore && hasMoreTitles.value) {
+      getTemplateTitleList(true);
+    }
   }
 };
 
@@ -810,21 +894,65 @@ const loadMoreTitles = () => {
   getTemplateTitleList(true);
 };
 
-const getTemplateContentList = async () => {
+const getTemplateContentList = async (isLoadMore = false) => {
-  const res = await getCardTemplateContentList();
+  if (loadingBlessings.value || (!hasMoreBlessings.value && isLoadMore)) return;
-  if (res.length) {
+
-    greetingLib.value = res;
+  loadingBlessings.value = true;
-    displayedGreetings.value = greetingLib.value.slice(0, 2);
+  try {
-    if (!blessingText.value.content) {
+    const res = await getCardTemplateContentList(blessingPage.value);
-      blessingText.value = greetingLib.value[0] || {};
+    const list = Array.isArray(res) ? res : res.list || [];
+
+    if (list.length > 0) {
+      if (isLoadMore) {
+        greetingLib.value = [...greetingLib.value, ...list];
+      } else {
+        greetingLib.value = list;
+        if (list.length > 0 && !blessingText.value.content) {
+          blessingText.value = list[0];
+        }
+      }
+
+      if (typeof res.hasNext !== "undefined") {
+        hasMoreBlessings.value = res.hasNext;
+      } else {
+        hasMoreBlessings.value = list.length >= 8;
+      }
+
+      if (hasMoreBlessings.value) {
+        blessingPage.value++;
+      }
+    } else {
+      if (!isLoadMore) greetingLib.value = [];
+      hasMoreBlessings.value = false;
+    }
+  } catch (error) {
+    console.error("加载祝福语失败:", error);
+  } finally {
+    loadingBlessings.value = false;
+    if (!isLoadMore && hasMoreBlessings.value) {
+      getTemplateContentList(true);
     }
   }
 };
 
+const loadMoreBlessings = () => {
+  getTemplateContentList(true);
+};
+
 const loadMoreTemplates = () => {
   getTemplateList(true);
 };
 
+const onPanelScrollToLower = () => {
+  if (activeTool.value === "template") {
+    loadMoreTemplates();
+  } else if (activeTool.value === "title") {
+    loadMoreTitles();
+  } else if (activeTool.value === "text") {
+    loadMoreBlessings();
+  }
+};
+
 onShareAppMessage(async (options) => {
   getShareReward({ scene: "card_generate" });
   if (options.from === "button") {
@@ -843,45 +971,25 @@ onShareAppMessage(async (options) => {
       };
     }
 
-    const deviceInfo = getDeviceInfo();
+    const shareToken = await getShareToken("card_generate", id);
-    const shareTokenRes = await createShareToken({
-      scene: "card_generate",
-      targetId: id,
-      ...deviceInfo,
-    });
     shareOrSave(id);
     return {
       title: "我刚做了一张祝福卡片，送给你",
-      path: "/pages/detail/index?shareToken=" + shareTokenRes.shareToken,
+      path: "/pages/detail/index?shareToken=" + shareToken,
       imageUrl:
         "https://file.lihailezzc.com/resource/13ec1134e6614feadeeaaa9ef21ea96e.png",
     };
   } else {
-    const shareTokenRes = await getShareToken("card_generate_index", "");
+    const shareToken = await getShareToken("card_generate_index", "");
     return {
       title: "新春祝福",
-      path: `/pages/index/index?shareToken=${shareTokenRes.shareToken}`,
+      path: `/pages/index/index?shareToken=${shareToken}`,
       imageUrl:
         "https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
     };
   }
 });
 
-const displayedGreetings = ref([]);
-
-const refreshGreetings = () => {
-  if (!greetingLib.value.length) return;
-
-  const nextIndex = (greetingIndex.value + 2) % greetingLib.value.length;
-  greetingIndex.value = nextIndex;
-
-  let next = greetingLib.value.slice(nextIndex, nextIndex + 2);
-  if (next.length < 2) {
-    next = [...next, ...greetingLib.value.slice(0, 2 - next.length)];
-  }
-  displayedGreetings.value = next;
-};
-
 const selectGreeting = (text) => {
   blessingText.value = text;
 };
@@ -889,8 +997,8 @@ const selectGreeting = (text) => {
 const tools = [
   { type: "template", text: "1. 选模板", icon: "🎨", step: 1 },
   { type: "title", text: "2. 选标题", icon: "🧧", step: 2 },
-  { type: "text", text: "3. 改文字", icon: "✍️", step: 3 },
+  { type: "text", text: "3. 写祝福", icon: "✍️", step: 3 },
-  { type: "position", text: "4. 调位置", icon: "🎯", step: 4 },
+  { type: "position", text: "4. 设样式", icon: "✨", step: 4 },
 ];
 const activeTool = ref("template");
 const showPanel = ref(false);
@@ -1521,11 +1629,12 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   right: 0;
   background: #fff;
   border-radius: 40rpx 40rpx 0 0;
-  padding: 30rpx 40rpx calc(40rpx + env(safe-area-inset-bottom));
   transform: translateY(100%);
   transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
-  max-height: 80vh;
+  height: 80vh;
-  overflow-y: auto;
+}
+.panel-inner {
+  padding: 30rpx 40rpx calc(40rpx + env(safe-area-inset-bottom));
 }
 .panel-container.show .panel-content {
   transform: translateY(0);
@@ -1721,22 +1830,19 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   margin-right: 6rpx;
   font-size: 24rpx;
 }
-.greeting-scroll {
+.greeting-grid {
-  width: 100%;
+  display: grid;
-}
+  grid-template-columns: repeat(2, 1fr);
-.greeting-list {
+  gap: 16rpx;
-  display: flex;
+  padding-bottom: 20rpx;
-  padding-bottom: 10rpx;
 }
 .greeting-card {
-  flex-shrink: 0;
+  width: 100%;
-  width: 320rpx;
   height: 160rpx;
   background: #fff;
   border: 2rpx solid #eee;
   border-radius: 16rpx;
   padding: 20rpx;
-  margin-right: 20rpx;
   position: relative;
   box-sizing: border-box;
 }

pages/mine/greeting.vue

@@ -126,21 +126,21 @@ onReachBottom(() => {
 
 onShareAppMessage(async (options) => {
   if (options.from === "button") {
-    const shareTokenRes = await getShareToken(
+    const shareToken = await getShareToken(
       "card_generate",
       options?.target?.dataset?.item?.id,
     );
     return {
       title: "我刚做了一张祝福卡片，送给你",
-      path: "/pages/detail/index?shareToken=" + shareTokenRes.shareToken,
+      path: "/pages/detail/index?shareToken=" + shareToken,
       imageUrl:
         "https://file.lihailezzc.com/resource/13ec1134e6614feadeeaaa9ef21ea96e.png",
     };
   } else {
-    const shareTokenRes = await getShareToken("greeting_page", "");
+    const shareToken = await getShareToken("greeting_page", "");
     return {
       title: "新春祝福",
-      path: `/pages/index/index?shareToken=${shareTokenRes.shareToken}`,
+      path: `/pages/index/index?shareToken=${shareToken}`,
       imageUrl:
         "https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
     };

pages/wallpaper/index.vue

@@ -106,19 +106,19 @@ const isRefreshing = ref(false);
 onShareAppMessage(async (options) => {
   getShareReward({ scene: "wallpaper_download" });
   if (options.from === "button") {
-    const shareTokenRes = await getShareToken(
+    const shareToken = await getShareToken(
       "wallpaper_download",
       options?.target?.dataset?.item?.id,
     );
     return {
       title: "快来挑选喜欢的新春壁纸吧",
-      path: `/pages/wallpaper/detail?shareToken=${shareTokenRes.shareToken}`,
+      path: `/pages/wallpaper/detail?shareToken=${shareToken}`,
     };
   } else {
-    const shareTokenRes = await getShareToken("wallpaper_download", "");
+    const shareToken = await getShareToken("wallpaper_download", "");
     return {
       title: "新春祝福",
-      path: `/pages/index/index?shareToken=${shareTokenRes.shareToken}`,
+      path: `/pages/index/index?shareToken=${shareToken}`,
       imageUrl:
         "https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",
     };

utils/common.js

@@ -54,7 +54,7 @@ export const saveRecordRequest = async (path, targetId, scene, imageUrl) => {
   });
 };
 
-export const saveViewRequest = async (shareToken, scene, targetId) => {
+export const saveViewRequest = async (shareToken, scene, targetId = "") => {
   const deviceInfo = getDeviceInfo();
   viewRecord({
     shareToken,
@@ -92,7 +92,12 @@ export const saveRemoteImageToLocal = (imageUrl) => {
   });
 };
 
-export const getShareToken = async (scene, targetId) => {
+export const getShareToken = async (scene, targetId = "") => {
   const deviceInfo = getDeviceInfo();
-  return await createShareToken({ scene, targetId, ...deviceInfo });
+  const shareTokenRes = await createShareToken({
+    scene,
+    targetId,
+    ...deviceInfo,
+  });
+  return shareTokenRes?.shareToken || "";
 };

utils/request.js

@@ -1,6 +1,6 @@
-const BASE_URL = "https://api.ai-meng.com";
+// const BASE_URL = "https://api.ai-meng.com";
 // const BASE_URL = 'http://127.0.0.1:3999'
-// const BASE_URL = "http://192.168.1.3:3999";
+const BASE_URL = "http://192.168.1.3:3999";
 // const BASE_URL = "http://192.168.31.253:3999";
 import { useUserStore } from "@/stores/user";