zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: msg

Browse Source
This commit is contained in:
zzc
2026-02-01 09:21:43 +08:00
parent 8ba947834a
commit 2e2a616512
1 changed files with 319 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
pages/make/index.vue
View File

@@ -1,5 +1,27 @@
<template>
<view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
<!-- 顶部步骤条 -->
<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-line" v-if="idx > 0"></view>
<view class="step-num">
<text v-if="activeTool === tool.type && showPanel">{{ tool.icon }}</text>
<text v-else>{{ tool.step }}</text>
</view>
</view>
<text class="step-text">{{ tool.text }}</text>
</view>
</view>
</view>
<!-- 预览卡片 -->
<view class="card-preview">
<image
@@ -22,7 +44,7 @@
/>
<view
class="bubble"
@tap="activeTool = 'text'"
@tap="openTool('text')"
:style="{
marginTop: 230 + bubbleOffsetY + 'rpx',
maxWidth: bubbleMaxWidth + 80 + 'rpx',
@@ -57,11 +79,8 @@
<text>分享或保存即可去除水印</text>
</view>
<!-- 编辑工具区 -->
<view class="editor-panel">
<view class="drag-handle"></view>
<!-- 主操作按钮 -->
<!-- 底部固定按钮 -->
<view class="bottom-actions-fixed">
<view class="main-actions">
<button class="btn secondary" @tap="preview">
<uni-icons type="cloud-download" size="20" color="#888"></uni-icons>
@@ -76,26 +95,13 @@
<view>分享给好友</view>
</button>
</view>
</view>
<!-- 功能入口 (步骤条式) -->
<view class="step-bar">
<view
v-for="(tool, idx) in tools"
:key="idx"
class="step-item"
:class="{ active: activeTool === tool.type }"
@tap="activeTool = tool.type"
>
<view class="step-num-wrap">
<view class="step-line" v-if="idx > 0"></view>
<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 class="panel-container" :class="{ show: showPanel }">
<view class="panel-mask" @tap="closePanel"></view>
<view class="panel-content" :class="{ 'glass-effect': activeTool === 'text' || activeTool === 'position' }">
<view class="panel-handle" @tap="closePanel"></view>
<!-- 标题选择区 -->
<view v-if="activeTool === 'title'" class="section">
@@ -155,7 +161,7 @@
</view>
<!-- 下一步引导 -->
<view class="next-step-tip" @tap="activeTool = 'template'">
<view class="next-step-tip" @tap="openTool('title')">
<text>选好标题了，去选模板</text>
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
</view>
@@ -190,8 +196,8 @@
>
</view>
<!-- 下一步引导 -->
<view class="next-step-tip" @tap="activeTool = 'text'">
<text>选好模板了，去修改文字</text>
<view class="next-step-tip" @tap="openTool('title')">
<text>选好模板了，去选标题</text>
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
</view>
</view>
@@ -224,7 +230,7 @@
v-for="(text, index) in displayedGreetings"
:key="index"
class="greeting-card"
:class="{ active: blessingText === text.content }"
:class="{ active: blessingText.content === text.content }"
@tap="selectGreeting(text)"
>
<text class="greeting-text">{{ text.content }}</text>
@@ -302,7 +308,67 @@
</view>
</view>
<!-- 署名颜色 -->
<!-- 下一步引导 -->
<view class="next-step-tip" @tap="openTool('position')">
<text>文字改好了，去调位置</text>
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
</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="bubbleOffsetY"
min="-200"
max="400"
show-value
@change="(e) => (bubbleOffsetY = 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>
<slider
:value="userOffsetY"
min="-100"
max="200"
show-value
@change="(e) => (userOffsetY = e.detail.value)"
activeColor="#ff3b30"
/>
</view>
<view class="form-item">
<text class="label">个人信息 (左右)</text>
<slider
:value="userOffsetX"
min="-100"
max="100"
show-value
@change="(e) => (userOffsetX = e.detail.value)"
activeColor="#ff3b30"
/>
</view>
<view class="form-item">
<text class="label">署名颜色</text>
<view class="color-list">
@@ -317,67 +383,6 @@
</view>
</view>
</view>
<!-- 下一步引导 -->
<view class="next-step-tip" @tap="activeTool = 'position'">
<text>文字写好了，去微调位置</text>
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
</view>
</view>
<!-- 位置调整 -->
<view v-if="activeTool === 'position'" class="section position-section">
<view class="form-item">
<text class="label">祝福语位置 (上下)</text>
<slider
:value="bubbleOffsetY"
min="-200"
max="200"
show-value
@change="(e) => (bubbleOffsetY = 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>
<slider
:value="userOffsetX"
min="-200"
max="200"
show-value
@change="(e) => (userOffsetX = e.detail.value)"
activeColor="#ff3b30"
/>
</view>
<view class="form-item">
<text class="label">署名位置 (上下)</text>
<slider
:value="userOffsetY"
min="-200"
max="200"
show-value
@change="(e) => (userOffsetY = e.detail.value)"
activeColor="#ff3b30"
/>
</view>
</view>
<!-- 头像挂饰 -->
<view v-if="activeTool === 'avatar'" class="section">
<view class="section-title"><text>头像挂饰</text></view>
<view class="row">
<button class="btn" @tap="toggleAvatarDecor">切换挂饰</button>
</view>
</view>
</view>
@@ -735,6 +740,16 @@ const tools = [
{ type: "position", text: "4. 调位置", icon: "🎯", step: 4 },
];
const activeTool = ref("template");
const showPanel = ref(false);
const openTool = (toolType) => {
activeTool.value = toolType;
showPanel.value = true;
};
const closePanel = () => {
showPanel.value = false;
};
const templates = ref([]);
@@ -1106,14 +1121,9 @@ function drawUserBubble(ctx, options) {
function drawRoundRect(ctx, x, y, w, h, r, color) {
ctx.beginPath();
// ctx.setFillStyle(color)
ctx.fillStyle = "rgba(255,255,255,0.18)";
ctx.fill();
// 描边（非常关键）
ctx.fillStyle = color || "rgba(255,255,255,0.18)";
ctx.strokeStyle = "rgba(255,255,255,0.35)";
ctx.lineWidth = 1;
ctx.stroke();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
@@ -1136,11 +1146,19 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
box-sizing: border-box;
}
/* 顶部提示 */
.tip-line {
text-align: center;
color: #999;
font-size: 22rpx;
margin-bottom: 140rpx; /* 为底部固定按钮留出空间 */
}
/* 卡片预览 */
.card-preview {
margin: 24rpx auto;
height: 960rpx;
width: 540rpx;
margin: 30rpx auto 20rpx;
height: 900rpx;
width: 506rpx; /* 保持 9:16 比例并稍微缩小一点 */
border-radius: 30rpx;
overflow: hidden;
position: relative;
@@ -1229,36 +1247,84 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
opacity: 0.6;
}
/* 顶部提示 */
.tip-line {
text-align: center;
color: #999;
font-size: 22rpx;
}
/* 编辑工具区 */
.editor-panel {
margin: 20rpx 24rpx 40rpx;
border-radius: 30rpx 30rpx 0 0;
/* 顶部步骤条 */
.top-steps {
background: #fff;
box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.06);
padding-bottom: env(safe-area-inset-bottom);
padding: 10rpx 0;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
position: relative;
z-index: 10;
}
.drag-handle {
width: 120rpx;
height: 8rpx;
border-radius: 999rpx;
background: #eee;
margin: 12rpx auto;
}
/* 步骤条工具 */
.step-bar {
display: flex;
justify-content: space-between;
padding: 20rpx 60rpx 10rpx;
padding: 10rpx 40rpx;
position: relative;
}
/* 底部固定按钮 */
.bottom-actions-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding-bottom: env(safe-area-inset-bottom);
z-index: 90;
box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
}
/* 弹出编辑面板 */
.panel-container {
position: fixed;
inset: 0;
z-index: 100;
visibility: hidden;
pointer-events: none;
transition: all 0.3s;
}
.panel-container.show {
visibility: visible;
pointer-events: auto;
}
.panel-mask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s;
}
.panel-container.show .panel-mask {
opacity: 1;
}
.panel-content {
position: absolute;
bottom: 0;
left: 0;
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;
}
.panel-container.show .panel-content {
transform: translateY(0);
}
.panel-content.glass-effect {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20rpx);
-webkit-backdrop-filter: blur(20rpx);
}
.panel-handle {
width: 80rpx;
height: 8rpx;
background: #ddd;
border-radius: 4rpx;
margin: 0 auto 30rpx;
}
.step-item {
display: flex;
flex-direction: column;