fix: lucky page
This commit is contained in:
zzc
@@ -110,13 +110,22 @@
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 画布用于生成图片 -->
|
||||
<canvas
|
||||
canvas-id="luckyCanvas"
|
||||
id="luckyCanvas"
|
||||
class="lucky-canvas"
|
||||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||||
></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, getCurrentInstance } from "vue";
|
||||
import calendar from "@/utils/lunar.js";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const popup = ref(null);
|
||||
const isAnimating = ref(true);
|
||||
const isFlipping = ref(false);
|
||||
@@ -124,6 +133,10 @@ const showLight = ref(false);
|
||||
const loadingText = ref("好运加载中...");
|
||||
const currentDateStr = ref("");
|
||||
|
||||
// 画布相关
|
||||
const canvasWidth = ref(600);
|
||||
const canvasHeight = ref(1000);
|
||||
|
||||
const resultData = ref({
|
||||
score: 88,
|
||||
luckyWord: "鸿运当头",
|
||||
@@ -183,9 +196,245 @@ const startAnimation = () => {
|
||||
};
|
||||
|
||||
const onSaveImage = () => {
|
||||
uni.showToast({ title: "保存功能开发中", icon: "none" });
|
||||
uni.showLoading({ title: "生成图片中..." });
|
||||
const ctx = uni.createCanvasContext("luckyCanvas", proxy);
|
||||
const W = canvasWidth.value;
|
||||
const H = canvasHeight.value;
|
||||
const cardH = 850; // 卡片主体高度
|
||||
|
||||
// 1. 绘制背景
|
||||
ctx.setFillStyle("#ffffff");
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// 2. 绘制卡片头部渐变
|
||||
const grd = ctx.createLinearGradient(0, 0, 0, 360);
|
||||
grd.addColorStop(0, "#d84315");
|
||||
grd.addColorStop(1, "#ffca28");
|
||||
ctx.setFillStyle(grd);
|
||||
ctx.fillRect(0, 0, W, 360);
|
||||
|
||||
// 3. 头部装饰文字
|
||||
ctx.setFillStyle("rgba(255, 255, 255, 0.6)");
|
||||
ctx.setFontSize(24);
|
||||
ctx.fillText("福", 30, 40);
|
||||
ctx.fillText("禧", W - 50, 40);
|
||||
|
||||
// 4. 头部内容
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
|
||||
ctx.setFontSize(24);
|
||||
ctx.fillText("今日好运指数", W / 2, 80);
|
||||
|
||||
// 分数
|
||||
ctx.setFillStyle("#ffffff");
|
||||
ctx.setFontSize(120);
|
||||
ctx.font = "bold 120px sans-serif";
|
||||
ctx.fillText(resultData.value.score + "%", W / 2, 200);
|
||||
|
||||
// 幸运词
|
||||
ctx.setFontSize(48);
|
||||
ctx.font = "bold 48px sans-serif";
|
||||
ctx.fillText(resultData.value.luckyWord, W / 2, 280);
|
||||
|
||||
// 日期标签背景
|
||||
const dateStr = currentDateStr.value || "2026 CNY SPECIAL";
|
||||
ctx.setFillStyle("rgba(0, 0, 0, 0.15)");
|
||||
const dateWidth = ctx.measureText(dateStr).width + 40;
|
||||
roundRect(ctx, W / 2 - dateWidth / 2, 310, dateWidth, 34, 17);
|
||||
ctx.fill();
|
||||
|
||||
// 日期文字
|
||||
ctx.setFillStyle("#ffffff");
|
||||
ctx.setFontSize(20);
|
||||
ctx.fillText(dateStr, W / 2, 334);
|
||||
|
||||
// 5. 绘制内容区 (宜/忌)
|
||||
const gridY = 400;
|
||||
const boxW = (W - 64 - 24) / 2; // (600 - padding*2 - gap)/2
|
||||
|
||||
// 宜
|
||||
drawBox(ctx, 32, gridY, boxW, 120, "#fbfbfb", "#f5f5f5");
|
||||
ctx.setTextAlign("left");
|
||||
ctx.setFontSize(24);
|
||||
ctx.setFillStyle("#d81e06");
|
||||
ctx.fillText("✔ 今日宜", 56, gridY + 40);
|
||||
ctx.setFontSize(22);
|
||||
ctx.setFillStyle("#666666");
|
||||
wrapText(ctx, resultData.value.yi, 56, gridY + 70, boxW - 48, 30);
|
||||
|
||||
// 忌
|
||||
drawBox(ctx, 32 + boxW + 24, gridY, boxW, 120, "#fbfbfb", "#f5f5f5");
|
||||
ctx.setFontSize(24);
|
||||
ctx.setFillStyle("#666666");
|
||||
ctx.fillText("✖ 今日忌", 32 + boxW + 24 + 24, gridY + 40);
|
||||
ctx.setFontSize(22);
|
||||
wrapText(
|
||||
ctx,
|
||||
resultData.value.ji,
|
||||
32 + boxW + 24 + 24,
|
||||
gridY + 70,
|
||||
boxW - 48,
|
||||
30,
|
||||
);
|
||||
|
||||
// 6. 幸运元素
|
||||
const elY = 540;
|
||||
drawBox(ctx, 32, elY, W - 64, 120, "#fbfbfb", "#f5f5f5");
|
||||
|
||||
// 标题
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.fillText("★ 幸运元素", 56, elY + 40);
|
||||
|
||||
// 元素内容
|
||||
const colW = (W - 64) / 3;
|
||||
const valY = elY + 90;
|
||||
|
||||
// 颜色
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
ctx.fillText("颜色", 32 + colW * 0.5, elY + 60);
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#d84315");
|
||||
ctx.font = "bold 26px sans-serif";
|
||||
ctx.fillText(resultData.value.luckyColor, 32 + colW * 0.5, valY);
|
||||
|
||||
// 数字
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
ctx.fillText("数字", 32 + colW * 1.5, elY + 60);
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.fillText(resultData.value.luckyNumber, 32 + colW * 1.5, valY);
|
||||
|
||||
// 方向
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
ctx.fillText("方向", 32 + colW * 2.5, elY + 60);
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.fillText(resultData.value.luckyDirection, 32 + colW * 2.5, valY);
|
||||
|
||||
// 分隔线
|
||||
ctx.setStrokeStyle("#eeeeee");
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(32 + colW, elY + 30);
|
||||
ctx.lineTo(32 + colW, elY + 90);
|
||||
ctx.moveTo(32 + colW * 2, elY + 30);
|
||||
ctx.lineTo(32 + colW * 2, elY + 90);
|
||||
ctx.stroke();
|
||||
|
||||
// 7. 语录
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setFontSize(22);
|
||||
ctx.setFillStyle("#999999");
|
||||
ctx.font = "italic 22px sans-serif";
|
||||
ctx.fillText(`“${resultData.value.quote}”`, W / 2, 720);
|
||||
|
||||
// 8. 底部区域 (Footer)
|
||||
const footerY = 850;
|
||||
|
||||
// 分隔线
|
||||
ctx.setStrokeStyle("#f0f0f0");
|
||||
ctx.setLineWidth(1);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(40, footerY);
|
||||
ctx.lineTo(W - 40, footerY);
|
||||
ctx.stroke();
|
||||
|
||||
// 底部左侧文字
|
||||
ctx.setTextAlign("left");
|
||||
ctx.setFontSize(32);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.font = "bold 32px sans-serif";
|
||||
ctx.fillText("扫码开启今日好运", 40, footerY + 60);
|
||||
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
ctx.font = "normal 20px sans-serif";
|
||||
ctx.fillText("2026 CNY SPECIAL · 新春助手", 40, footerY + 100);
|
||||
|
||||
// 底部右侧二维码 (占位图)
|
||||
// 假设二维码在 static/icon/yunshi.png 或 logo.png
|
||||
// 实际开发中应替换为小程序码
|
||||
ctx.drawImage("/static/logo.png", W - 140, footerY + 25, 100, 100);
|
||||
|
||||
// 绘制
|
||||
ctx.draw(false, () => {
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: "luckyCanvas",
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "已保存到相册", icon: "success" });
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "保存失败，请授权", icon: "none" });
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "生成图片失败", icon: "none" });
|
||||
console.error(err);
|
||||
},
|
||||
},
|
||||
proxy,
|
||||
);
|
||||
}, 200);
|
||||
});
|
||||
};
|
||||
|
||||
// 辅助函数：绘制圆角矩形
|
||||
function roundRect(ctx, x, y, w, h, r) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + w - r, y);
|
||||
ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
|
||||
ctx.lineTo(x + w, y + h - r);
|
||||
ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
|
||||
ctx.lineTo(x + r, y + h);
|
||||
ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
// 辅助函数：绘制带背景边框的盒子
|
||||
function drawBox(ctx, x, y, w, h, bg, border) {
|
||||
ctx.setFillStyle(bg);
|
||||
ctx.setStrokeStyle(border);
|
||||
ctx.setLineWidth(2);
|
||||
roundRect(ctx, x, y, w, h, 20);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// 辅助函数：文字换行
|
||||
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
|
||||
let words = text.split("");
|
||||
let line = "";
|
||||
for (let n = 0; n < words.length; n++) {
|
||||
let testLine = line + words[n];
|
||||
let metrics = ctx.measureText(testLine);
|
||||
let testWidth = metrics.width;
|
||||
if (testWidth > maxWidth && n > 0) {
|
||||
ctx.fillText(line, x, y);
|
||||
line = words[n];
|
||||
y += lineHeight;
|
||||
} else {
|
||||
line = testLine;
|
||||
}
|
||||
}
|
||||
ctx.fillText(line, x, y);
|
||||
}
|
||||
|
||||
const onShareMoments = () => {
|
||||
uni.showToast({ title: "请点击右上角分享", icon: "none" });
|
||||
};
|
||||
@@ -554,4 +803,9 @@ defineExpose({ open, close });
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
.lucky-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user