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",
   });
 };
-

pages/make/index.vue

@@ -123,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>
 
           <!-- 标题选择区 -->
@@ -189,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"
@@ -232,18 +237,10 @@
             <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>
+              <view class="greeting-grid">
-            <scroll-view
-              scroll-x
-              class="greeting-scroll"
-              show-scrollbar="false"
-            >
-              <view class="greeting-list">
                 <view
-                  v-for="(text, index) in displayedGreetings"
+                  v-for="(text, index) in greetingLib"
                   :key="index"
                   class="greeting-card"
                   :class="{ active: blessingText.content === text.content }"
@@ -257,12 +254,22 @@
                   >
                 </view>
               </view>
-            </scroll-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
+            v-if="activeTool === 'position'"
+            class="section position-section"
+          >
             <view class="section-title">
               <text>调整样式与位置</text>
             </view>
@@ -384,6 +391,7 @@
           </view> -->
           </view>
         </view>
+      </scroll-view>
     </view>
 
     <canvas
@@ -688,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); // 默认宽度
@@ -760,6 +770,8 @@ onReachBottom(() => {
     loadMoreTemplates();
   } else if (activeTool.value === "title") {
     loadMoreTitles();
+  } else if (activeTool.value === "text") {
+    loadMoreBlessings();
   }
 });
 
@@ -768,8 +780,14 @@ onPullDownRefresh(async () => {
   hasMoreTemplates.value = true;
   titlePage.value = 1;
   hasMoreTitles.value = true;
+  blessingPage.value = 1;
+  hasMoreBlessings.value = true;
 
-  await Promise.all([getTemplateList(), getTemplateTitleList()]);
+  await Promise.all([
+    getTemplateList(),
+    getTemplateTitleList(),
+    getTemplateContentList(),
+  ]);
   uni.stopPullDownRefresh();
   uni.showToast({ title: "已为你更新内容", icon: "success" });
 });
@@ -825,6 +843,9 @@ const getTemplateList = async (isLoadMore = false) => {
     console.error("加载模板失败:", error);
   } finally {
     loadingTemplates.value = false;
+    if (!isLoadMore && hasMoreTemplates.value) {
+      getTemplateList(true);
+    }
   }
 };
 
@@ -863,6 +884,9 @@ const getTemplateTitleList = async (isLoadMore = false) => {
     console.error("加载标题失败:", error);
   } finally {
     loadingTitles.value = false;
+    if (!isLoadMore && hasMoreTitles.value) {
+      getTemplateTitleList(true);
+    }
   }
 };
 
@@ -870,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") {
@@ -922,21 +990,6 @@ onShareAppMessage(async (options) => {
   }
 });
 
-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;
 };
@@ -1576,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);
@@ -1776,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;
 }