feat: 优化二维码样式，添加绿色健康可信边框和文字

pages/qrcode/index.js

@@ -174,9 +174,126 @@ Page({
       url: qrCodeUrl,
       success: (res) => {
         if (res.statusCode === 200) {
+          // 创建 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: 'none',
+                duration: 2000
+              });
+              return;
+            }
+            
             // 保存图片到相册
             wx.saveImageToPhotosAlbum({
-            filePath: res.tempFilePath,
+              filePath: tempFilePath,
               success: () => {
                 wx.hideLoading();
                 wx.showToast({
@@ -215,6 +332,7 @@ Page({
                 }
               }
             });
+          });
         } else {
           wx.hideLoading();
           console.error('下载图片失败，状态码:', res.statusCode);
@@ -261,10 +379,23 @@ Page({
       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: 'none',
+                duration: 2000
+              });
+              return;
+            }
+            
             wx.hideLoading();
             // 打开分享面板
             wx.showShareImageMenu({
-            path: res.tempFilePath,
+              path: tempFilePath,
               success: () => {
                 console.log('分享成功');
               },
@@ -277,6 +408,7 @@ Page({
                 });
               }
             });
+          });
         } else {
           wx.hideLoading();
           console.error('下载图片失败，状态码:', res.statusCode);

pages/qrcode/index.wxml

@@ -1,4 +1,6 @@
 <view class="container">
+  <!-- 用于绘制带边框和文字的二维码图片的 canvas -->
+  <canvas canvas-id="shareCanvas" style="width: 375px; height: 450px; position: absolute; top: -9999px; left: -9999px;"></canvas>
   <view class="user-info">
     <view class="user-info-header">
       <text class="user-info-title">登录信息</text>