599 lines
14 KiB
Vue
599 lines
14 KiB
Vue
<template>
|
||
<view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||
<!-- 预览卡片 -->
|
||
<view class="card-preview">
|
||
<image class="card-bg" :src="currentTemplate.cover" mode="aspectFill" />
|
||
<view class="card-overlay">
|
||
<view class="title">
|
||
<text class="main">新春快乐</text>
|
||
<text class="sub">2026 YEAR OF THE HORSE</text>
|
||
</view>
|
||
<view class="bubble" @tap="editBlessing">
|
||
<text class="bubble-text">{{ blessingText }}</text>
|
||
</view>
|
||
<view class="user">
|
||
<image class="avatar" src="https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg" mode="aspectFill" />
|
||
<view class="user-info">
|
||
<text class="user-name">陈小明</text>
|
||
<text class="user-desc">送上祝福</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tip-line">
|
||
<text>点击卡片内容即可编辑</text>
|
||
</view>
|
||
|
||
<!-- 编辑工具区 -->
|
||
<view class="editor-panel">
|
||
<view class="drag-handle"></view>
|
||
|
||
<!-- 功能入口 -->
|
||
<view class="tools">
|
||
<view
|
||
v-for="(tool, idx) in tools"
|
||
:key="idx"
|
||
class="tool-item"
|
||
:class="{ active: activeTool === tool.type }"
|
||
@tap="activeTool = tool.type"
|
||
>
|
||
<view class="tool-icon">{{ tool.icon }}</view>
|
||
<text class="tool-text">{{ tool.text }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 模板区 -->
|
||
<view v-if="activeTool === 'template'" class="section">
|
||
<view class="section-title">
|
||
<text>热门模板</text>
|
||
<text class="more" @tap="showMore">查看更多 ></text>
|
||
</view>
|
||
<scroll-view scroll-x class="tpl-scroll" show-scrollbar="false">
|
||
<view class="tpl-wrap">
|
||
<view
|
||
v-for="(tpl, i) in templates"
|
||
:key="i"
|
||
class="tpl-card"
|
||
:class="{ selected: tpl.id === currentTemplate.id }"
|
||
@tap="applyTemplate(tpl)"
|
||
>
|
||
<image :src="tpl.cover" 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>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 文字编辑 -->
|
||
<view v-if="activeTool === 'text'" class="section">
|
||
<view class="section-title"><text>编辑祝福语</text></view>
|
||
<textarea
|
||
class="text-area"
|
||
v-model="blessingText"
|
||
placeholder="请输入你的新春祝福语～"
|
||
:maxlength="100"
|
||
auto-height
|
||
show-confirm-bar="false"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 图片/背景 -->
|
||
<view v-if="activeTool === 'image'" class="section">
|
||
<view class="section-title"><text>替换背景</text></view>
|
||
<view class="row">
|
||
<button class="btn" @tap="pickImage">从相册选择</button>
|
||
<button class="btn" @tap="resetBackground">重置为模板背景</button>
|
||
</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 class="bottom-actions">
|
||
<button class="btn secondary" @tap="preview">预览</button>
|
||
<button class="btn primary" @tap="shareOrSave">分享 / 保存</button>
|
||
</view>
|
||
</view>
|
||
|
||
<canvas
|
||
canvas-id="cardCanvas"
|
||
class="hidden-canvas"
|
||
style="width: 540px; height: 960px;"
|
||
/>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { getBavBarHeight } from '@/utils/system'
|
||
|
||
const blessingText = ref('祝您在新的一年里：\n身体健康，万事如意！\n马到成功，财源广进！\n一马当先，前程似锦！\n龙马精神，阖家安康！\n骏马奔腾，福运常在！\n策马扬鞭，步步高升!')
|
||
|
||
const tools = [
|
||
{ type: 'template', text: '模板', icon: '▦' },
|
||
{ type: 'text', text: '文字', icon: '文' },
|
||
{ type: 'image', text: '图片/背景', icon: '图' },
|
||
{ type: 'avatar', text: '头像挂饰', icon: '饰' }
|
||
]
|
||
const activeTool = ref('template')
|
||
|
||
const templates = ref([
|
||
{ id: 1, name: '金典红金', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' },
|
||
{ id: 2, name: '富贵花开', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
|
||
{ id: 3, name: '大气字法', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
|
||
{ id: 4, name: '萌趣马年', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' }
|
||
])
|
||
|
||
const currentTemplate = ref(templates.value[0])
|
||
|
||
const applyTemplate = (tpl) => {
|
||
currentTemplate.value = tpl
|
||
}
|
||
|
||
const editBlessing = () => {
|
||
uni.showModal({
|
||
title: '编辑祝福语',
|
||
editable: true,
|
||
content: blessingText.value,
|
||
success: ({ confirm, content }) => {
|
||
if (confirm && content !== undefined) blessingText.value = content
|
||
}
|
||
})
|
||
}
|
||
|
||
const pickImage = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
const path = res.tempFilePaths?.[0]
|
||
if (path) currentTemplate.value = { ...currentTemplate.value, cover: path }
|
||
}
|
||
})
|
||
}
|
||
|
||
const resetBackground = () => {
|
||
currentTemplate.value = templates.value[0]
|
||
}
|
||
|
||
const toggleAvatarDecor = () => {
|
||
uni.showToast({ title: '挂饰功能即将上线～', icon: 'none' })
|
||
}
|
||
|
||
const preview = () => {
|
||
uni.showToast({ title: '预览生成中…', icon: 'none' })
|
||
}
|
||
|
||
const shareOrSave = () => {
|
||
saveByCanvas()
|
||
uni.showToast({ title: '已保存到相册并可分享', icon: 'none' })
|
||
}
|
||
|
||
const showMore = () => {
|
||
uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
|
||
}
|
||
|
||
const saveByCanvas = async () => {
|
||
const ctx = uni.createCanvasContext('cardCanvas')
|
||
|
||
// 画布尺寸（rpx 转 px）
|
||
const W = 540
|
||
const H = 960
|
||
|
||
// 1️⃣ 画背景
|
||
// ⭐ 先加载背景图
|
||
const bgPath = await loadImage(currentTemplate.value.cover)
|
||
const avatarPath = await loadImage('https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg')
|
||
console.log(111111, bgPath)
|
||
|
||
ctx.drawImage(
|
||
bgPath,
|
||
0,
|
||
0,
|
||
W,
|
||
H
|
||
)
|
||
|
||
// 2️⃣ 半透明遮罩（和你 UI 一致）
|
||
ctx.setFillStyle('rgba(0,0,0,0.08)')
|
||
ctx.fillRect(0, 0, W, H)
|
||
|
||
// 3️⃣ 标题
|
||
ctx.setFillStyle('#ffffff')
|
||
ctx.setFontSize(42)
|
||
ctx.setTextAlign('center')
|
||
ctx.fillText('新春快乐', W / 2, 120)
|
||
|
||
ctx.setFontSize(22)
|
||
ctx.setGlobalAlpha(0.9)
|
||
ctx.fillText('2026 YEAR OF THE HORSE', W / 2, 165)
|
||
ctx.setGlobalAlpha(1)
|
||
|
||
// 4️⃣ 祝福语气泡
|
||
drawBubbleText(ctx, {
|
||
text: blessingText.value,
|
||
x: 70,
|
||
y: 260,
|
||
maxWidth: 400,
|
||
fontSize: 32,
|
||
lineHeight: 46,
|
||
backgroundColor: 'rgba(255,255,255,0.85)'
|
||
})
|
||
|
||
// 5️⃣ 用户信息
|
||
ctx.save()
|
||
ctx.beginPath()
|
||
ctx.arc(80, H - 80, 32, 0, Math.PI * 2)
|
||
ctx.clip()
|
||
ctx.drawImage(
|
||
avatarPath,
|
||
48,
|
||
H - 112,
|
||
64,
|
||
64
|
||
)
|
||
ctx.restore()
|
||
|
||
ctx.setFillStyle('#ffffff')
|
||
ctx.setFontSize(24)
|
||
ctx.fillText('zzc', 150, H - 85)
|
||
|
||
ctx.setFontSize(20)
|
||
ctx.setGlobalAlpha(0.6)
|
||
ctx.fillText('送上祝福', 150, H - 55)
|
||
ctx.setGlobalAlpha(1)
|
||
|
||
// 6️⃣ 输出
|
||
ctx.draw(false, () => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'cardCanvas',
|
||
success: res => {
|
||
saveImage(res.tempFilePath)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const loadImage = (url) => {
|
||
return new Promise((resolve, reject) => {
|
||
uni.getImageInfo({
|
||
src: url,
|
||
success: res => {
|
||
resolve(res.path) // 本地路径
|
||
},
|
||
fail: err => {
|
||
reject(err)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const getImageInfo = (url) => {
|
||
return new Promise((resolve, reject) => {
|
||
uni.getImageInfo({
|
||
src: url,
|
||
success: resolve,
|
||
fail: reject
|
||
})
|
||
})
|
||
}
|
||
|
||
const drawImageCover = (ctx, imgPath, canvasW, canvasH, imgW, imgH) => {
|
||
const scale = Math.max(canvasW / imgW, canvasH / imgH)
|
||
|
||
const drawW = imgW * scale
|
||
const drawH = imgH * scale
|
||
|
||
const dx = (canvasW - drawW) / 2
|
||
const dy = (canvasH - drawH) / 2
|
||
|
||
ctx.drawImage(imgPath, dx, dy, drawW, drawH)
|
||
}
|
||
|
||
const saveImage = (path) => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: path,
|
||
success() {
|
||
uni.showToast({ title: '已保存到相册' })
|
||
},
|
||
fail() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请授权保存到相册'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
function drawBubbleText(ctx, options) {
|
||
const {
|
||
text,
|
||
x,
|
||
y,
|
||
maxWidth = 400,
|
||
padding = 84,
|
||
lineHeight = 42,
|
||
radius = 24,
|
||
backgroundColor = 'rgba(255,255,255,0.9)',
|
||
textColor = '#fff',
|
||
fontSize = 32,
|
||
fontFamily = 'PingFang SC'
|
||
} = options
|
||
|
||
if (!text) return
|
||
|
||
ctx.setFontSize(fontSize)
|
||
ctx.setFillStyle(textColor)
|
||
ctx.font = `${fontSize}px ${fontFamily}`
|
||
|
||
// 1️⃣ 文本自动换行
|
||
const lines = []
|
||
let currentLine = ''
|
||
|
||
for (let i = 0; i < text.length; i++) {
|
||
const testLine = currentLine + text[i]
|
||
const metrics = ctx.measureText(testLine)
|
||
if (metrics.width > maxWidth - padding * 2) {
|
||
lines.push(currentLine)
|
||
currentLine = text[i]
|
||
} else {
|
||
currentLine = testLine
|
||
}
|
||
}
|
||
lines.push(currentLine)
|
||
|
||
// 2️⃣ 计算气泡尺寸
|
||
const bubbleWidth =
|
||
Math.min(
|
||
maxWidth,
|
||
Math.max(
|
||
...lines.map(line => ctx.measureText(line).width)
|
||
) + padding * 2
|
||
)
|
||
|
||
const bubbleHeight = lines.length * lineHeight + padding * 2
|
||
|
||
// 3️⃣ 绘制气泡（圆角矩形）
|
||
drawRoundRect(
|
||
ctx,
|
||
x,
|
||
y,
|
||
bubbleWidth,
|
||
bubbleHeight,
|
||
radius,
|
||
backgroundColor
|
||
)
|
||
|
||
// 4️⃣ 绘制文字
|
||
ctx.setFillStyle(textColor)
|
||
lines.forEach((line, index) => {
|
||
ctx.fillText(
|
||
line,
|
||
x + padding,
|
||
y + padding + (index + 1) * lineHeight - 10
|
||
)
|
||
})
|
||
}
|
||
|
||
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.strokeStyle = 'rgba(255,255,255,0.35)'
|
||
ctx.lineWidth = 1
|
||
ctx.stroke()
|
||
|
||
ctx.moveTo(x + r, y)
|
||
ctx.lineTo(x + w - r, y)
|
||
ctx.arcTo(x + w, y, x + w, y + r, r)
|
||
ctx.lineTo(x + w, y + h - r)
|
||
ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
|
||
ctx.lineTo(x + r, y + h)
|
||
ctx.arcTo(x, y + h, x, y + h - r, r)
|
||
ctx.lineTo(x, y + r)
|
||
ctx.arcTo(x, y, x + r, y, r)
|
||
ctx.closePath()
|
||
ctx.fill()
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.make-page {
|
||
min-height: 100vh;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 卡片预览 */
|
||
.card-preview {
|
||
margin: 24rpx auto;
|
||
height: 960rpx;
|
||
width: 540rpx;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.12);
|
||
}
|
||
.card-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.card-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
padding: 30rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.card-overlay .title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 60rpx;
|
||
}
|
||
.title .main {
|
||
font-size: 42rpx;
|
||
font-weight: 700;
|
||
}
|
||
.title .sub {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
opacity: 0.9;
|
||
}
|
||
.bubble {
|
||
margin-top: 80rpx;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||
border-radius: 26rpx;
|
||
padding: 40rpx;
|
||
max-width: 560rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
.bubble-text {
|
||
font-size: 26rpx;
|
||
line-height: 1.6;
|
||
}
|
||
.user {
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||
border-radius: 9999rpx;
|
||
padding: 15rpx;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
.avatar {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
margin-right: 14rpx;
|
||
border: 2rpx solid rgba(255,255,255,0.6);
|
||
}
|
||
.user .user-info{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.user-name { font-size: 24rpx; font-weight: 600; }
|
||
.user-desc { font-size: 20rpx; 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;
|
||
background: #fff;
|
||
box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.06);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
.drag-handle {
|
||
width: 120rpx; height: 8rpx; border-radius: 999rpx;
|
||
background: #eee; margin: 12rpx auto;
|
||
}
|
||
|
||
/* 工具入口 */
|
||
.tools {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
padding: 16rpx 24rpx 8rpx;
|
||
}
|
||
.tool-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 14rpx 0;
|
||
border-radius: 18rpx;
|
||
color: #666;
|
||
}
|
||
.tool-item.active {
|
||
background: #fff6f5;
|
||
color: #ff3b30;
|
||
}
|
||
.tool-icon {
|
||
width: 64rpx; height: 64rpx;
|
||
border-radius: 16rpx;
|
||
background: #fafafa;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.tool-text { font-size: 22rpx; }
|
||
|
||
/* 模板区 */
|
||
.section { padding: 12rpx 24rpx 0; }
|
||
.section-title {
|
||
display: flex; align-items: center;
|
||
}
|
||
.section-title .more {
|
||
margin-left: auto;
|
||
color: #ff3b30;
|
||
font-size: 24rpx;
|
||
}
|
||
.tpl-scroll { margin-top: 12rpx; }
|
||
.tpl-wrap { display: flex; }
|
||
.tpl-card {
|
||
width: 180rpx; height: 240rpx;
|
||
border-radius: 18rpx; overflow: hidden;
|
||
background: #fff; margin-right: 16rpx;
|
||
position: relative;
|
||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||
}
|
||
.tpl-card.selected { outline: 4rpx solid #ff3b30; }
|
||
.tpl-cover { width: 100%; height: 160rpx; }
|
||
.tpl-name {
|
||
font-size: 22rpx; color: #333;
|
||
padding: 8rpx 12rpx;
|
||
}
|
||
.tpl-check {
|
||
position: absolute; right: 10rpx; top: 10rpx;
|
||
width: 36rpx; height: 36rpx; border-radius: 50%;
|
||
background: #ff3b30; color: #fff; font-size: 22rpx;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
|
||
/* 按钮区 */
|
||
.bottom-actions {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 20rpx 24rpx 30rpx;
|
||
}
|
||
.btn {
|
||
height: 88rpx; border-radius: 999rpx; padding: 0 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.btn.secondary {
|
||
background: #f5f5f5; color: #333;
|
||
}
|
||
.btn.primary {
|
||
background: #ff3b30; color: #fff;
|
||
box-shadow: 0 12rpx 24rpx rgba(255,59,48,0.35);
|
||
}
|
||
.hidden-canvas {
|
||
position: fixed;
|
||
left: -9999px;
|
||
top: -9999px;
|
||
}
|
||
</style> |