wkw 3 minggu lalu
induk
melakukan
5b10391acd
3 mengubah file dengan 33 tambahan dan 31 penghapusan
  1. 5 1
      pages/couponDetail/couponDetail.js
  2. 2 2
      pages/couponDetail/couponDetail.wxss
  3. 26 28
      utils/util.js

+ 5 - 1
pages/couponDetail/couponDetail.js

@@ -11,7 +11,11 @@ Page({
     timer: null,
     loading: true // 增加 loading 状态
   },
-
+  goPage(){
+    wx.navigateTo({
+      url: '/pages/storeIcon/storeIcon'
+    })
+  },
   onLoad(options) {
     this.setData({
       id: options.id

+ 2 - 2
pages/couponDetail/couponDetail.wxss

@@ -20,11 +20,11 @@
   margin-top: 10rpx;
 }
 .code-box{
-  margin-top: 94rpx;
+  margin-top: 130rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 318rpx;
+  margin-bottom: 200rpx;
 }
 .code-img{
   width: 264rpx;

+ 26 - 28
utils/util.js

@@ -48,20 +48,22 @@ export async function REPORT_BEHAVIOR(eventName = '', extra = {}) {
 export async function DRAW_POSTER() {
   const userInfo = getApp().globalData.userInfo || wx.getStorageSync('userInfo');
   const programConfig = getApp().globalData.programConfig || wx.getStorageSync('programConfig');
-  const ctx = wx.createCanvasContext('posterCanvas', this);
+  const ctx = wx.createCanvasContext('posterCanvas'); // 不要传 this,容易丢失上下文
   const canvasWidth = 300;
   const canvasHeight = 600;
   const bottomHeight = 80;
   const radius = 16; // 圆角半径
 
+  // 白色背景 + 圆角
   ctx.save();
   ctx.setFillStyle('#fff');
   drawRoundRect(ctx, 0, 0, canvasWidth, canvasHeight, radius);
+  ctx.fill();
+  ctx.restore();
 
   // 背景图
-  const bgUrl = programConfig.share_img;
-  if (bgUrl) {
-    const bgPath = bgUrl.startsWith('http') ? await downloadImage(bgUrl) : bgUrl;
+  if (programConfig.share_img) {
+    const bgPath = await loadImage(programConfig.share_img);
     ctx.drawImage(bgPath, 0, 0, canvasWidth, canvasHeight - bottomHeight);
   }
 
@@ -69,10 +71,9 @@ export async function DRAW_POSTER() {
   ctx.setFillStyle('#fff');
   ctx.fillRect(0, canvasHeight - bottomHeight, canvasWidth, bottomHeight);
 
-  // 用户头像(圆形)
-  const avatarUrl = userInfo.avatar;
-  if (avatarUrl) {
-    const avatarPath = avatarUrl.startsWith('http') ? await downloadImage(avatarUrl) : avatarUrl;
+  // 用户头像(圆形裁剪)
+  if (userInfo.avatar) {
+    const avatarPath = await loadImage(userInfo.avatar);
     const avatarSize = 40;
     const avatarX = 20;
     const avatarY = canvasHeight - bottomHeight + (bottomHeight - avatarSize) / 2;
@@ -88,47 +89,46 @@ export async function DRAW_POSTER() {
   const nickName = userInfo.nickname || '游客';
   ctx.setFontSize(16);
   ctx.setFillStyle('#000');
-  const textX = 20 + 40 + 12;
-  const textY = canvasHeight - bottomHeight + bottomHeight / 2 + 6;
-  ctx.fillText(nickName, textX, textY);
+  ctx.fillText(nickName, 72, canvasHeight - bottomHeight / 2 + 6);
 
   // 二维码
-  const qrUrl = programConfig.share_qrcode;
-  if (qrUrl) {
-    const qrPath = qrUrl.startsWith('http') ? await downloadImage(qrUrl) : qrUrl;
+  if (programConfig.share_qrcode) {
+    const qrPath = await loadImage(programConfig.share_qrcode);
     const qrSize = 50;
     const qrX = canvasWidth - qrSize - 20;
     const qrY = canvasHeight - bottomHeight + (bottomHeight - qrSize) / 2;
     ctx.drawImage(qrPath, qrX, qrY, qrSize, qrSize);
   }
-  ctx.restore(); // 恢复裁剪
+
+  // 导出图片
   return new Promise((resolve, reject) => {
-    ctx.draw(true, () => {
+    ctx.draw(false, () => {
       wx.canvasToTempFilePath({
         canvasId: 'posterCanvas',
+        destWidth: canvasWidth * 2,  // 提高清晰度,避免导出失败
+        destHeight: canvasHeight * 2,
         success: res => resolve(res.tempFilePath),
         fail: err => {
           console.error('生成临时文件失败:', err);
           reject(err);
         }
-      }, this);
+      });
     });
   });
 }
-// 下载网络图片到临时路径
-function downloadImage(url) {
+
+// 图片预加载
+function loadImage(url) {
   return new Promise((resolve, reject) => {
-    wx.downloadFile({
-      url,
-      success(res) {
-        if (res.statusCode === 200) resolve(res.tempFilePath);
-        else reject(new Error('下载失败'));
-      },
+    wx.getImageInfo({
+      src: url,
+      success(res) { resolve(res.path); },
       fail(err) { reject(err); }
     });
   });
 }
-// 绘制圆角矩形函数
+
+// 圆角矩形
 function drawRoundRect(ctx, x, y, w, h, r) {
   ctx.beginPath();
   ctx.moveTo(x + r, y);
@@ -137,6 +137,4 @@ function drawRoundRect(ctx, x, y, w, h, r) {
   ctx.arcTo(x, y + h, x, y, r);
   ctx.arcTo(x, y, x + w, y, r);
   ctx.closePath();
-  ctx.fill();
-  ctx.clip(); // 关键:裁剪出圆角
 }