From 88f06d0b42ce540cbae878d79cb3e32e826ef167 Mon Sep 17 00:00:00 2001 From: zzc <1761997216@qq.com> Date: Fri, 6 Feb 2026 01:15:47 +0800 Subject: [PATCH] fix: make move content --- api/make.js | 5 +- pages/make/index.vue | 477 ++++++++++++++++++++++++------------------- 2 files changed, 266 insertions(+), 216 deletions(-) diff --git a/api/make.js b/api/make.js index 1de83af..aca8d9b 100644 --- a/api/make.js +++ b/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", }); }; - diff --git a/pages/make/index.vue b/pages/make/index.vue index a265f0b..14c3225 100644 --- a/pages/make/index.vue +++ b/pages/make/index.vue @@ -123,127 +123,124 @@ - - + + - - - - 选择标题 - - - - - - ✔ - + + + + 选择标题 - 加载中... - 没有更多了 - - - - - - - 热门模板 - - - - - - {{ tpl.name }} - ✔ + + + + ✔ + + 加载中... + 没有更多了 - 加载中... - 没有更多了 - - - - - - - 祝福对象 - - - - 署名 - + + + + 热门模板 + + + + + + {{ tpl.name }} + ✔ + + + 加载中... + 没有更多了 + + + + + + + 祝福对象 - ✎ - - - - - 祝福语库 - - ↻ 换一批 + + + 署名 + + + ✎ - - + + + + + 祝福语库 + + - - - - - - - - 调整样式与位置 + 加载中... + 没有更多了 + - - - 字体大小 - - + + + + 调整样式与位置 + - - 祝福语宽窄 - - + + + 字体大小 + + - - - 字体样式 - - + + 祝福语宽窄 + + + + + + 字体样式 + + + + {{ + font.name + }} + + + + + + + + 祝福语颜色 + - {{ - font.name - }} + ✔ - - + - - - 祝福语颜色 - - - ✔ + 署名颜色 + + + ✔ + - - - 署名颜色 - - - ✔ - - - - - + - + { }; 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 res = await getCardTemplateContentList(); - if (res.length) { - greetingLib.value = res; - displayedGreetings.value = greetingLib.value.slice(0, 2); - if (!blessingText.value.content) { - blessingText.value = greetingLib.value[0] || {}; +const getTemplateContentList = async (isLoadMore = false) => { + if (loadingBlessings.value || (!hasMoreBlessings.value && isLoadMore)) return; + + loadingBlessings.value = true; + try { + const res = await getCardTemplateContentList(blessingPage.value); + 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; - overflow-y: auto; + height: 80vh; +} +.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 { - width: 100%; -} -.greeting-list { - display: flex; - padding-bottom: 10rpx; +.greeting-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16rpx; + padding-bottom: 20rpx; } .greeting-card { - flex-shrink: 0; - width: 320rpx; + width: 100%; height: 160rpx; background: #fff; border: 2rpx solid #eee; border-radius: 16rpx; padding: 20rpx; - margin-right: 20rpx; position: relative; box-sizing: border-box; }