diff --git a/pages/collection/index.js b/pages/collection/index.js index db47ae4..979c7ed 100644 --- a/pages/collection/index.js +++ b/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 + }); + } + }); } }); \ No newline at end of file diff --git a/pages/collection/index.wxml b/pages/collection/index.wxml index 34508aa..344065f 100644 --- a/pages/collection/index.wxml +++ b/pages/collection/index.wxml @@ -41,7 +41,7 @@ - + @@ -50,8 +50,10 @@ / {{item.createdAt || '未知'}} - - {{expandedIndex === index ? '▲' : '▼'}} + + + {{expandedIndex === index ? '▲' : '▼'}} + @@ -108,4 +110,7 @@ + + + \ No newline at end of file diff --git a/pages/collection/index.wxss b/pages/collection/index.wxss index c501c07..d80dae7 100644 --- a/pages/collection/index.wxss +++ b/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; diff --git a/pages/compare_price/index.wxml b/pages/compare_price/index.wxml index 260e7f5..4b43172 100644 --- a/pages/compare_price/index.wxml +++ b/pages/compare_price/index.wxml @@ -9,10 +9,25 @@ 请选择想要了解的商品 - - - - + + + + + 绿壳 + + + + + + 粉壳 + + + + + + 褐壳 + + @@ -27,7 +42,7 @@ - + {{selectedOption}}在售商品 @@ -161,7 +176,7 @@ - + 暂无在售数据 @@ -172,9 +187,11 @@ 欢迎使用对比价格功能 此页面用于对比不同商品的价格信息。 - 对比同种商品,不同规格 的商品价格信息。 + 想要看到相同规格的同种类型 + 相同规格的同种类型 + 点击商品内的对比价格按钮即可展示