fix: make move content
This commit is contained in:
zzc
@@ -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 class="section-title">
|
||||
<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 v-if="activeTool === 'title'" class="section">
|
||||
<view class="section-title">
|
||||
<text>选择标题</text>
|
||||
</view>
|
||||
<view v-if="loadingTitles" class="loading-more">加载中...</view>
|
||||
<view
|
||||
v-else-if="!hasMoreTitles && titles.length > 0"
|
||||
class="no-more"
|
||||
>没有更多了</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 模板区 -->
|
||||
<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
|
||||
<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
|
||||
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">
|
||||
<text class="label">署名</text>
|
||||
<view class="input-wrapper">
|
||||
<!-- 模板区 -->
|
||||
<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
|
||||
>
|
||||
</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"
|
||||
placeholder="请输入署名"
|
||||
v-model="targetName"
|
||||
placeholder="请输入称呼"
|
||||
placeholder-style="color:#ccc"
|
||||
maxlength="10"
|
||||
@blur="handleSignatureBlur"
|
||||
@blur="handleTargetNameBlur"
|
||||
/>
|
||||
<text class="edit-icon">✎</text>
|
||||
</view>
|
||||
</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 class="form-item">
|
||||
<text class="label">署名</text>
|
||||
<view class="input-wrapper">
|
||||
<input
|
||||
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"
|
||||
show-scrollbar="false"
|
||||
>
|
||||
<view class="greeting-list">
|
||||
|
||||
<!-- 祝福语库 -->
|
||||
<view class="form-item">
|
||||
<view class="label-row">
|
||||
<text class="label">祝福语库</text>
|
||||
</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>
|
||||
</view>
|
||||
|
||||
<!-- 样式与位置 -->
|
||||
<view v-if="activeTool === 'position'" class="section position-section">
|
||||
<view class="section-title">
|
||||
<text>调整样式与位置</text>
|
||||
<view v-if="loadingBlessings" class="loading-more"
|
||||
>加载中...</view
|
||||
>
|
||||
<view
|
||||
v-else-if="!hasMoreBlessings && greetingLib.length > 0"
|
||||
class="no-more"
|
||||
>没有更多了</view
|
||||
>
|
||||
</view>
|
||||
</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
|
||||
v-if="activeTool === 'position'"
|
||||
class="section position-section"
|
||||
>
|
||||
<view class="section-title">
|
||||
<text>调整样式与位置</text>
|
||||
</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" 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>
|
||||
<scroll-view scroll-x class="font-scroll" show-scrollbar="false">
|
||||
<view class="font-list">
|
||||
<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>
|
||||
<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="{ active: selectedFont.family === font.family }"
|
||||
@tap="changeFont(font)"
|
||||
class="color-item"
|
||||
:style="{ background: color }"
|
||||
@tap="selectedColor = color"
|
||||
>
|
||||
<text :style="{ fontFamily: font.family }">{{
|
||||
font.name
|
||||
}}</text>
|
||||
<view v-if="selectedColor === color" class="color-check"
|
||||
>✔</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-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="selectedColor = color"
|
||||
>
|
||||
<view v-if="selectedColor === color" class="color-check"
|
||||
>✔</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 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 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 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user