Merge branch 'main' of http://8.137.125.67:4000/SwtTt29/Mini-Program

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;

pages/compare_price/index.wxml

@@ -9,10 +9,25 @@
         <view style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx;">
           <text style="font-size: 32rpx; font-weight: bold; color: #333; text-align: center;">请选择想要了解的商品</text>
         </view>
-        <view style="display: flex; flex-direction: column; gap: 20rpx; width: 100%; max-width: 400rpx;">
+        <view style="display: flex; flex-direction: column; gap: 24rpx; width: 100%; max-width: 400rpx;">
-          <button style="background-color: rgba(255, 255, 255, 0.8); color: #333; border-radius: 8rpx; padding: 20rpx; font-size: 28rpx;" bindtap="selectOption" data-option="绿壳">绿壳</button>
+          <view style="position: relative; width: 100%; height: 140rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease;" bindtap="selectOption" data-option="绿壳">
-          <button style="background-color: rgba(255, 255, 255, 0.8); color: #333; border-radius: 8rpx; padding: 20rpx; font-size: 28rpx;" bindtap="selectOption" data-option="粉壳">粉壳</button>
+            <image src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fresh%20green%20shell%20eggs%20in%20a%20wooden%20box%2C%20natural%20light%2C%20soft%20focus%2C%20warm%20tones&image_size=landscape_4_3" mode="aspectFill" style="width: 100%; height: 100%;"></image>
-          <button style="background-color: rgba(255, 255, 255, 0.8); color: #333; border-radius: 8rpx; padding: 20rpx; font-size: 28rpx;" bindtap="selectOption" data-option="褐壳">褐壳</button>
+            <view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6)); display: flex; justify-content: center; align-items: center;">
+              <text style="font-size: 36rpx; font-weight: bold; color: #333; text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);">绿壳</text>
+            </view>
+          </view>
+          <view style="position: relative; width: 100%; height: 140rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease;" bindtap="selectOption" data-option="粉壳">
+            <image src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fresh%20pink%20shell%20eggs%20in%20a%20wooden%20box%2C%20natural%20light%2C%20soft%20focus%2C%20warm%20tones&image_size=landscape_4_3" mode="aspectFill" style="width: 100%; height: 100%;"></image>
+            <view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6)); display: flex; justify-content: center; align-items: center;">
+              <text style="font-size: 36rpx; font-weight: bold; color: #333; text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);">粉壳</text>
+            </view>
+          </view>
+          <view style="position: relative; width: 100%; height: 140rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease;" bindtap="selectOption" data-option="褐壳">
+            <image src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=fresh%20brown%20shell%20eggs%20in%20a%20wooden%20box%2C%20natural%20light%2C%20soft%20focus%2C%20warm%20tones&image_size=landscape_4_3" mode="aspectFill" style="width: 100%; height: 100%;"></image>
+            <view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6)); display: flex; justify-content: center; align-items: center;">
+              <text style="font-size: 36rpx; font-weight: bold; color: #333; text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);">褐壳</text>
+            </view>
+          </view>
         </view>
       </view>
       
@@ -27,7 +42,7 @@
       </view>
       
       <view wx:else>
-        <view wx:if="{{goods.length > 0}}" style="margin-top: 40rpx; width: 100%; max-width: 750rpx;">
+        <view wx:if="{{goods.length > 0 && selectedOption}}" style="margin-top: 40rpx; width: 100%; max-width: 750rpx;">
           <view style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx;">
             <text style="font-size: 28rpx; font-weight: bold; color: #333; text-align: center; display: block;">{{selectedOption}}在售商品</text>
           </view>
@@ -161,7 +176,7 @@
           </view>
         </view>
         
-        <view wx:else style="margin-top: 40rpx; color: #fff; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);">
+        <view wx:if="{{goods.length === 0 && selectedOption}}" style="margin-top: 40rpx; color: #fff; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);">
           <text>暂无在售数据</text>
         </view>
       </view>
@@ -172,9 +187,11 @@
     <view style="background-color: rgba(255, 255, 255, 0.9); border-radius: 16rpx; padding: 40rpx; width: 80%; max-width: 500rpx; text-align: center;">
       <text style="font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; display: block;">欢迎使用对比价格功能</text>
       <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">此页面用于对比不同商品的价格信息。</text>
-      
       <text style="font-size: 28rpx; color: #f10b0bff; line-height: 40rpx;">对比同种商品，不同规格</text>
       <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">的商品价格信息。</text>
+      <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">想要看到相同规格的同种类型</text>
+      <text style="font-size: 28rpx; color: #f10b0bff; line-height: 40rpx;">相同规格的同种类型</text>
+      <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">点击商品内的对比价格按钮即可展示</text>
       <view style="margin-top: 40rpx;">
         <button style="background-color: #ff6b81; color: #fff; border-radius: 8rpx; padding: 12rpx 40rpx; font-size: 28rpx;" bindtap="closeTips">我知道了</button>
       </view>