From 72b9daae0dcf263fbcbe7ae5e2413d0693b33b9d Mon Sep 17 00:00:00 2001 From: Default User Date: Sat, 28 Feb 2026 14:35:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BA=8C=E7=BB=B4?= =?UTF-8?q?=E7=A0=81=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=BB=BF?= =?UTF-8?q?=E8=89=B2=E5=81=A5=E5=BA=B7=E5=8F=AF=E4=BF=A1=E8=BE=B9=E6=A1=86?= =?UTF-8?q?=E5=92=8C=E6=96=87=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/qrcode/index.js | 214 ++++++++++++++++++++++++++++++++-------- pages/qrcode/index.wxml | 2 + 2 files changed, 175 insertions(+), 41 deletions(-) diff --git a/pages/qrcode/index.js b/pages/qrcode/index.js index a73d4ac..a399a1d 100644 --- a/pages/qrcode/index.js +++ b/pages/qrcode/index.js @@ -174,46 +174,164 @@ Page({ url: qrCodeUrl, success: (res) => { if (res.statusCode === 200) { - // 保存图片到相册 - wx.saveImageToPhotosAlbum({ - filePath: res.tempFilePath, - success: () => { + // 创建 canvas 绘制带有提示文字和边框的图片 + this.createQRCodeWithFrame(res.tempFilePath); + } else { + wx.hideLoading(); + console.error('下载图片失败，状态码:', res.statusCode); + wx.showToast({ + title: '下载图片失败，请重试', + icon: 'none', + duration: 2000 + }); + } + }, + fail: (err) => { + wx.hideLoading(); + console.error('下载图片失败:', err); + wx.showToast({ + title: '保存失败，请重试', + icon: 'none', + duration: 2000 + }); + } + }); + }, + + // 绘制带有边框和提示文字的二维码图片 + drawQRCodeWithFrame: function (qrCodePath, callback) { + // 创建 canvas 上下文 + const ctx = wx.createCanvasContext('shareCanvas'); + + // 设置 canvas 尺寸 + const canvasWidth = 375; + const canvasHeight = 450; + + // 绘制背景 + ctx.setFillStyle('#ffffff'); + ctx.fillRect(0, 0, canvasWidth, canvasHeight); + + // 绘制外边框 + ctx.setStrokeStyle('#4CAF50'); + ctx.setLineWidth(10); + ctx.strokeRect(25, 25, canvasWidth - 50, canvasHeight - 50); + + // 绘制标题 + ctx.setFontSize(24); + ctx.setFillStyle('#4CAF50'); + ctx.setTextAlign('center'); + ctx.fillText('合格证二维码', canvasWidth / 2, 80); + + // 绘制副标题 + ctx.setFontSize(16); + ctx.setFillStyle('#66BB6A'); + ctx.fillText('扫描二维码填写合格证信息', canvasWidth / 2, 110); + + // 绘制二维码图片 + const qrSize = 200; + const qrX = (canvasWidth - qrSize) / 2; + const qrY = 140; + ctx.drawImage(qrCodePath, qrX, qrY, qrSize, qrSize); + + // 绘制底部提示文字 + ctx.setFontSize(14); + ctx.setFillStyle('#999999'); + ctx.fillText('四川又鸟蛋贸易有限公司', canvasWidth / 2, 370); + ctx.fillText('技术支持', canvasWidth / 2, 395); + + // 绘制完成 + ctx.draw(false, () => { + // 将 canvas 转换为图片 + wx.canvasToTempFilePath({ + canvasId: 'shareCanvas', + success: (res) => { + callback(null, res.tempFilePath); + }, + fail: (err) => { + callback(err, null); + } + }); + }); + }, + + // 长按二维码保存到相册 + onQRCodeLongPress: function () { + const { qrCodeUrl } = this.data; + + if (!qrCodeUrl) { + wx.showToast({ + title: '请先生成二维码', + icon: 'none', + duration: 2000 + }); + return; + } + + // 显示加载提示 + wx.showLoading({ + title: '保存中...', + mask: true + }); + + // 下载图片到本地临时文件 + wx.downloadFile({ + url: qrCodeUrl, + success: (res) => { + if (res.statusCode === 200) { + // 绘制带有边框和提示文字的二维码图片 + this.drawQRCodeWithFrame(res.tempFilePath, (err, tempFilePath) => { + if (err) { wx.hideLoading(); + console.error('canvas 转换为图片失败:', err); wx.showToast({ - title: '保存成功', - icon: 'success', + title: '保存失败，请重试', + icon: 'none', duration: 2000 }); - }, - fail: (err) => { - wx.hideLoading(); - console.error('保存图片到相册失败:', err); - - // 检查是否是权限问题 - if (err.errMsg.includes('auth deny')) { - wx.showModal({ - title: '保存失败', - content: '需要相册权限才能保存二维码，请在设置中开启', - confirmText: '去设置', - cancelText: '取消', - success: (modalRes) => { - if (modalRes.confirm) { - wx.openSetting({ - success: (settingRes) => { - console.log('设置结果:', settingRes); - } - }); - } - } - }); - } else { + return; + } + + // 保存图片到相册 + wx.saveImageToPhotosAlbum({ + filePath: tempFilePath, + success: () => { + wx.hideLoading(); wx.showToast({ - title: '保存失败，请重试', - icon: 'none', + title: '保存成功', + icon: 'success', duration: 2000 }); + }, + fail: (err) => { + wx.hideLoading(); + console.error('保存图片到相册失败:', err); + + // 检查是否是权限问题 + if (err.errMsg.includes('auth deny')) { + wx.showModal({ + title: '保存失败', + content: '需要相册权限才能保存二维码，请在设置中开启', + confirmText: '去设置', + cancelText: '取消', + success: (modalRes) => { + if (modalRes.confirm) { + wx.openSetting({ + success: (settingRes) => { + console.log('设置结果:', settingRes); + } + }); + } + } + }); + } else { + wx.showToast({ + title: '保存失败，请重试', + icon: 'none', + duration: 2000 + }); + } } - } + }); }); } else { wx.hideLoading(); @@ -261,21 +379,35 @@ Page({ url: qrCodeUrl, success: (res) => { if (res.statusCode === 200) { - wx.hideLoading(); - // 打开分享面板 - wx.showShareImageMenu({ - path: res.tempFilePath, - success: () => { - console.log('分享成功'); - }, - fail: (err) => { - console.error('分享失败:', err); + // 绘制带有边框和提示文字的二维码图片 + this.drawQRCodeWithFrame(res.tempFilePath, (err, tempFilePath) => { + if (err) { + wx.hideLoading(); + console.error('canvas 转换为图片失败:', err); wx.showToast({ title: '分享失败，请重试', icon: 'none', duration: 2000 }); + return; } + + wx.hideLoading(); + // 打开分享面板 + wx.showShareImageMenu({ + path: tempFilePath, + success: () => { + console.log('分享成功'); + }, + fail: (err) => { + console.error('分享失败:', err); + wx.showToast({ + title: '分享失败，请重试', + icon: 'none', + duration: 2000 + }); + } + }); }); } else { wx.hideLoading(); diff --git a/pages/qrcode/index.wxml b/pages/qrcode/index.wxml index 9ae1bbf..96fe999 100644 --- a/pages/qrcode/index.wxml +++ b/pages/qrcode/index.wxml @@ -1,4 +1,6 @@ + +