feat: add long press save image functionality

pages/collection/index.js

@@ -339,6 +339,154 @@ Page({
       icon: 'none',
       duration: 2000
     });
+  },
+
+  // 长按保存图片
+  longPressSaveImage: function (e) {
+    const index = e.currentTarget.dataset.index;
+    const qrCode = this.data.qrCodes[index];
+    
+    if (!qrCode) {
+      wx.showToast({
+        title: '暂无二维码数据',
+        icon: 'none',
+        duration: 2000
+      });
+      return;
+    }
+
+    // 显示确认对话框
+    wx.showModal({
+      title: '保存图片',
+      content: '确定要保存此二维码图片吗？',
+      success: (res) => {
+        if (res.confirm) {
+          // 确保当前二维码项是展开状态
+          if (this.data.expandedIndex !== index) {
+            this.setData({ expandedIndex: index });
+          }
+
+          // 延迟执行，确保元素已渲染完成
+          setTimeout(() => {
+            this.saveQrCodeImage(index);
+          }, 500);
+        }
+      }
+    });
+  },
+
+  // 保存二维码项为图片
+  saveQrCodeImage: function (index) {
+    const qrCode = this.data.qrCodes[index];
+    if (!qrCode) {
+      wx.showToast({
+        title: '暂无二维码数据',
+        icon: 'none',
+        duration: 2000
+      });
+      return;
+    }
+
+    // 获取屏幕宽度
+    const screenWidth = wx.getSystemInfoSync().windowWidth;
+    const canvasWidth = screenWidth;
+    const canvasHeight = 280; // 进一步调整高度，确保内容紧凑
+    
+    // 创建canvas上下文
+    const ctx = wx.createCanvasContext('saveCanvas');
+    
+    // 清除canvas
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    
+    // 设置背景色
+    ctx.setFillStyle('#ffffff');
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    
+    // 绘制公司名称（居中）
+    ctx.setFontSize(18);
+    ctx.setFillStyle('#333333');
+    ctx.setTextAlign('center');
+    ctx.fillText(qrCode.company || '未知', canvasWidth / 2, 40);
+    
+    // 绘制电话号码和创建时间（居中）
+    ctx.setFontSize(14);
+    ctx.setFillStyle('#666666');
+    ctx.setTextAlign('center');
+    ctx.fillText((qrCode.phoneNumber || '未知') + ' / ' + (qrCode.createdAt || '未知'), canvasWidth / 2, 70);
+    
+    // 绘制二维码图片（居中）
+    const qrCodeUrl = qrCode.qrCodeUrl || `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`;
+    
+    // 先下载二维码图片
+    wx.downloadFile({
+      url: qrCodeUrl,
+      success: (res) => {
+        if (res.statusCode === 200) {
+          const qrSize = 140; // 调整二维码大小
+          const qrX = (canvasWidth - qrSize) / 2;
+          const qrY = 90;
+          
+          // 绘制二维码图片到canvas
+          ctx.drawImage(res.tempFilePath, qrX, qrY, qrSize, qrSize);
+          
+          // 绘制邀请人信息（二维码正下方，居中）
+          ctx.setFontSize(14);
+          ctx.setFillStyle('#333333');
+          ctx.setTextAlign('center');
+          ctx.fillText('邀请人: ' + (qrCode.inviter || '未知'), canvasWidth / 2, qrY + qrSize + 20);
+          ctx.fillText('职位: ' + (qrCode.inviterProjectName || '无职位'), canvasWidth / 2, qrY + qrSize + 40);
+          
+          // 绘制完成
+          ctx.draw(false, () => {
+            // 将canvas转换为临时文件
+            wx.canvasToTempFilePath({
+              canvasId: 'saveCanvas',
+              width: canvasWidth,
+              height: canvasHeight,
+              destWidth: canvasWidth * 2,
+              destHeight: canvasHeight * 2,
+              success: (result) => {
+                // 保存到相册
+                wx.saveImageToPhotosAlbum({
+                  filePath: result.tempFilePath,
+                  success: () => {
+                    wx.showToast({
+                      title: '图片保存成功',
+                      icon: 'success',
+                      duration: 2000
+                    });
+                  },
+                  fail: (err) => {
+                    console.error('保存图片失败:', err);
+                    wx.showToast({
+                      title: '保存图片失败',
+                      icon: 'none',
+                      duration: 2000
+                    });
+                  }
+                });
+              },
+              fail: (err) => {
+                console.error('转换图片失败:', err);
+                wx.showToast({
+                  title: '转换图片失败',
+                  icon: 'none',
+                  duration: 2000
+                });
+              }
+            });
+          });
+        }
+      },
+      fail: (err) => {
+        console.error('下载二维码图片失败:', err);
+        wx.showToast({
+          title: '下载图片失败',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    });
   }
 
 });

pages/collection/index.wxml

@@ -41,7 +41,7 @@
     <block wx:else>
       <block wx:for="{{qrCodes}}" wx:key="sessionId" wx:for-index="index">
         <!-- 二维码项 -->
-        <view class="qr-item" bindtap="toggleSection" data-index="{{index}}">
+        <view class="qr-item" bindtap="toggleSection" data-index="{{index}}" bindlongpress="longPressSaveImage" data-index="{{index}}">
           <view class="qr-item-header">
             <view class="qr-item-info">
               <rich-text nodes="{{item.company ? item.company : '未知'}}"></rich-text>
@@ -50,8 +50,10 @@
                 <text> / {{item.createdAt || '未知'}}</text>
               </view>
             </view>
-            <view class="qr-item-arrow">
+            <view class="qr-item-actions">
-              <text>{{expandedIndex === index ? '▲' : '▼'}}</text>
+              <view class="qr-item-arrow">
+                <text>{{expandedIndex === index ? '▲' : '▼'}}</text>
+              </view>
             </view>
           </view>
           <!-- 二维码详情 -->
@@ -108,4 +110,7 @@
       </view>
     </view>
   </view>
+
+  <!-- 用于保存图片的canvas -->
+  <canvas canvas-id="saveCanvas" style="position: absolute; left: -9999rpx; top: -9999rpx; width: 375px; height: 280px;"></canvas>
 </view>

pages/collection/index.wxss

@@ -161,6 +161,26 @@
   overflow: hidden;
 }
 
+.qr-item-actions {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.save-button {
+  padding: 8rpx 16rpx;
+  background-color: #4CAF50;
+  color: white;
+  border-radius: 8rpx;
+  font-size: 22rpx;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.save-button:hover {
+  background-color: #45a049;
+}
+
 .qr-item-info rich-text {
   display: block;
   font-size: 28rpx;