From 74679b04072736e134c5b9883fa2e869bd1e2123 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Tue, 24 Feb 2026 18:46:31 +0800
Subject: [PATCH] fix: lucky page

---
 components/LuckyPopup/LuckyPopup.vue | 258 ++++++++++++++++++++++++++-
 1 file changed, 256 insertions(+), 2 deletions(-)

diff --git a/components/LuckyPopup/LuckyPopup.vue b/components/LuckyPopup/LuckyPopup.vue
index 407f8c5..b054c7a 100644
--- a/components/LuckyPopup/LuckyPopup.vue
+++ b/components/LuckyPopup/LuckyPopup.vue
@@ -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>