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,127 +123,124 @@
     <!-- 弹出编辑面板 -->
     <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-handle" @tap="closePanel"></view>
+        <view class="panel-inner">
+          <view class="panel-handle" @tap="closePanel"></view>
 
-        <!-- 标题选择区 -->
+          <!-- 标题选择区 -->
-        <view v-if="activeTool === 'title'" class="section">
+          <view v-if="activeTool === 'title'" class="section">
-          <view class="section-title">
+            <view class="section-title">
-            <text>选择标题</text>
+              <text>选择标题</text>
-          </view>
-          <view class="tpl-scroll">
-            <view class="tpl-grid">
-              <view
-                v-for="(title, i) in titles"
-                :key="i"
-                class="tpl-card title-card"
-                :class="{ selected: title?.id === currentTitle?.id }"
-                @tap="selectTitle(title)"
-              >
-                <image
-                  :src="title.imageUrl"
-                  class="title-cover"
-                  mode="aspectFit"
-                />
-                <view v-if="title?.id === currentTitle?.id" class="tpl-check"
-                  >✔</view
-                >
-              </view>
             </view>
-            <view v-if="loadingTitles" class="loading-more">加载中...</view>
+            <view class="tpl-scroll">
-            <view
+              <view class="tpl-grid">
-              v-else-if="!hasMoreTitles && titles.length > 0"
+                <view
-              class="no-more"
+                  v-for="(title, i) in titles"
-              >没有更多了</view
+                  :key="i"
-            >
+                  class="tpl-card title-card"
-          </view>
+                  :class="{ selected: title?.id === currentTitle?.id }"
-        </view>
+                  @tap="selectTitle(title)"
-
-        <!-- 模板区 -->
-        <view v-if="activeTool === 'template'" class="section">
-          <view class="section-title">
-            <text>热门模板</text>
-          </view>
-          <view class="tpl-scroll">
-            <view class="tpl-grid">
-              <view
-                v-for="(tpl, i) in templates"
-                :key="i"
-                class="tpl-card"
-                :class="{ selected: tpl?.id === currentTemplate?.id }"
-                @tap="applyTemplate(tpl)"
-              >
-                <image
-                  :src="tpl.imageUrl"
-                  class="tpl-cover"
-                  mode="aspectFill"
-                />
-                <view class="tpl-name">{{ tpl.name }}</view>
-                <view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
-                  >✔</view
                 >
+                  <image
+                    :src="title.imageUrl"
+                    class="title-cover"
+                    mode="aspectFit"
+                  />
+                  <view v-if="title?.id === currentTitle?.id" class="tpl-check"
+                    >✔</view
+                  >
+                </view>
               </view>
+              <view v-if="loadingTitles" class="loading-more">加载中...</view>
+              <view
+                v-else-if="!hasMoreTitles && titles.length > 0"
+                class="no-more"
+                >没有更多了</view
+              >
             </view>
-            <view v-if="loadingTemplates" class="loading-more">加载中...</view>
-            <view
-              v-else-if="!hasMoreTemplates && templates.length > 0"
-              class="no-more"
-              >没有更多了</view
-            >
-          </view>
-        </view>
-
-        <!-- 文字编辑 -->
-        <view v-if="activeTool === 'text'" class="section text-edit-section">
-          <view class="form-item">
-            <text class="label">祝福对象</text>
-            <input
-              class="input-box"
-              v-model="targetName"
-              placeholder="请输入称呼"
-              placeholder-style="color:#ccc"
-              maxlength="10"
-              @blur="handleTargetNameBlur"
-            />
           </view>
 
-          <!-- 署名 -->
+          <!-- 模板区 -->
-          <view class="form-item">
+          <view v-if="activeTool === 'template'" class="section">
-            <text class="label">署名</text>
+            <view class="section-title">
-            <view class="input-wrapper">
+              <text>热门模板</text>
+            </view>
+            <view class="tpl-scroll">
+              <view class="tpl-grid">
+                <view
+                  v-for="(tpl, i) in templates"
+                  :key="i"
+                  class="tpl-card"
+                  :class="{ selected: tpl?.id === currentTemplate?.id }"
+                  @tap="applyTemplate(tpl)"
+                >
+                  <image
+                    :src="tpl.imageUrl"
+                    class="tpl-cover"
+                    mode="aspectFill"
+                  />
+                  <view class="tpl-name">{{ tpl.name }}</view>
+                  <view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
+                    >✔</view
+                  >
+                </view>
+              </view>
+              <view v-if="loadingTemplates" class="loading-more"
+                >加载中...</view
+              >
+              <view
+                v-else-if="!hasMoreTemplates && templates.length > 0"
+                class="no-more"
+                >没有更多了</view
+              >
+            </view>
+          </view>
+
+          <!-- 文字编辑 -->
+          <view v-if="activeTool === 'text'" class="section text-edit-section">
+            <view class="form-item">
+              <text class="label">祝福对象</text>
               <input
                 class="input-box"
-                v-model="signatureName"
+                v-model="targetName"
-                placeholder="请输入署名"
+                placeholder="请输入称呼"
                 placeholder-style="color:#ccc"
                 maxlength="10"
-                @blur="handleSignatureBlur"
+                @blur="handleTargetNameBlur"
               />
-              <text class="edit-icon">✎</text>
             </view>
-          </view>
 
-          <!-- 祝福语库 -->
+            <!-- 署名 -->
-          <view class="form-item">
+            <view class="form-item">
-            <view class="label-row">
+              <text class="label">署名</text>
-              <text class="label">祝福语库</text>
+              <view class="input-wrapper">
-              <view class="refresh-btn" @tap="refreshGreetings">
+                <input
-                <text class="refresh-icon">↻</text> 换一批
+                  class="input-box"
+                  v-model="signatureName"
+                  placeholder="请输入署名"
+                  placeholder-style="color:#ccc"
+                  maxlength="10"
+                  @blur="handleSignatureBlur"
+                />
+                <text class="edit-icon">✎</text>
               </view>
             </view>
-            <scroll-view
+
-              scroll-x
+            <!-- 祝福语库 -->
-              class="greeting-scroll"
+            <view class="form-item">
-              show-scrollbar="false"
+              <view class="label-row">
-            >
+                <text class="label">祝福语库</text>
-              <view class="greeting-list">
+              </view>
+              <view class="greeting-grid">
                 <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,97 +254,107 @@
                   >
                 </view>
               </view>
-            </scroll-view>
+              <view v-if="loadingBlessings" class="loading-more"
-          </view>
+                >加载中...</view
-        </view>
+              >
-
+              <view
-        <!-- 样式与位置 -->
+                v-else-if="!hasMoreBlessings && greetingLib.length > 0"
-        <view v-if="activeTool === 'position'" class="section position-section">
+                class="no-more"
-          <view class="section-title">
+                >没有更多了</view
-            <text>调整样式与位置</text>
+              >
+            </view>
           </view>
 
-          <!-- 字体大小 -->
+          <!-- 样式与位置 -->
-          <view class="form-item" style="margin-top: 20rpx">
+          <view
-            <text class="label">字体大小</text>
+            v-if="activeTool === 'position'"
-            <slider
+            class="section position-section"
-              :value="fontSize"
+          >
-              min="24"
+            <view class="section-title">
-              max="64"
+              <text>调整样式与位置</text>
-              show-value
+            </view>
-              @change="(e) => (fontSize = e.detail.value)"
-              activeColor="#ff3b30"
-            />
-          </view>
 
-          <view class="form-item">
+            <!-- 字体大小 -->
-            <text class="label">祝福语宽窄</text>
+            <view class="form-item" style="margin-top: 20rpx">
-            <slider
+              <text class="label">字体大小</text>
-              :value="bubbleMaxWidth"
+              <slider
-              min="200"
+                :value="fontSize"
-              max="460"
+                min="24"
-              show-value
+                max="64"
-              @change="(e) => (bubbleMaxWidth = e.detail.value)"
+                show-value
-              activeColor="#ff3b30"
+                @change="(e) => (fontSize = e.detail.value)"
-            />
+                activeColor="#ff3b30"
-          </view>
+              />
+            </view>
 
-          <!-- 字体选择 -->
+            <view class="form-item">
-          <view class="form-item">
+              <text class="label">祝福语宽窄</text>
-            <text class="label">字体样式</text>
+              <slider
-            <scroll-view scroll-x class="font-scroll" show-scrollbar="false">
+                :value="bubbleMaxWidth"
-              <view class="font-list">
+                min="200"
+                max="460"
+                show-value
+                @change="(e) => (bubbleMaxWidth = e.detail.value)"
+                activeColor="#ff3b30"
+              />
+            </view>
+
+            <!-- 字体选择 -->
+            <view class="form-item">
+              <text class="label">字体样式</text>
+              <scroll-view scroll-x class="font-scroll" show-scrollbar="false">
+                <view class="font-list">
+                  <view
+                    v-for="(font, index) in fontList"
+                    :key="index"
+                    class="font-item"
+                    :class="{ active: selectedFont.family === font.family }"
+                    @tap="changeFont(font)"
+                  >
+                    <text :style="{ fontFamily: font.family }">{{
+                      font.name
+                    }}</text>
+                  </view>
+                </view>
+              </scroll-view>
+            </view>
+
+            <!-- 文字颜色 -->
+            <view class="form-item">
+              <text class="label">祝福语颜色</text>
+              <view class="color-list">
                 <view
-                  v-for="(font, index) in fontList"
+                  v-for="(color, index) in textColors"
                   :key="index"
-                  class="font-item"
+                  class="color-item"
-                  :class="{ active: selectedFont.family === font.family }"
+                  :style="{ background: color }"
-                  @tap="changeFont(font)"
+                  @tap="selectedColor = color"
                 >
-                  <text :style="{ fontFamily: font.family }">{{
+                  <view v-if="selectedColor === color" class="color-check"
-                    font.name
+                    >✔</view
-                  }}</text>
+                  >
                 </view>
               </view>
-            </scroll-view>
+            </view>
-          </view>
 
-          <!-- 文字颜色 -->
+            <view class="form-item">
-          <view class="form-item">
+              <text class="label">署名颜色</text>
-            <text class="label">祝福语颜色</text>
+              <view class="color-list">
-            <view class="color-list">
+                <view
-              <view
+                  v-for="(color, index) in textColors"
-                v-for="(color, index) in textColors"
+                  :key="index"
-                :key="index"
+                  class="color-item"
-                class="color-item"
+                  :style="{ background: color }"
-                :style="{ background: color }"
+                  @tap="signatureColor = color"
-                @tap="selectedColor = color"
-              >
-                <view v-if="selectedColor === color" class="color-check"
-                  >✔</view
                 >
+                  <view v-if="signatureColor === color" class="color-check"
+                    >✔</view
+                  >
+                </view>
               </view>
             </view>
-          </view>
 
-          <view class="form-item">
+            <!-- <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">
             <text class="label">祝福语气泡 (上下)</text>
             <slider
               :value="bubbleOffsetY"
@@ -382,8 +389,9 @@
               activeColor="#ff3b30"
             />
           </view> -->
+          </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;
 }