diff --git a/src/components/QRCodeGenerator.tsx b/src/components/QRCodeGenerator.tsx deleted file mode 100644 index c025717..0000000 --- a/src/components/QRCodeGenerator.tsx +++ /dev/null @@ -1,284 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react' -import { View, Text, Canvas } from '@tarojs/components' -import { Button, Popup } from '@nutui/nutui-react-taro' -import { Close, Copy, Download } from '@nutui/icons-react-taro' -import Taro from '@tarojs/taro' - -export interface QRCodeGeneratorProps { - /** 是否显示弹窗 */ - visible: boolean - /** 关闭弹窗回调 */ - onClose: () => void - /** 二维码内容 */ - text: string - /** 二维码尺寸 */ - size?: number - /** 礼品卡名称 */ - title?: string - /** 礼品卡面值 */ - subtitle?: string -} - -const QRCodeGenerator: React.FC = ({ - visible, - onClose, - text, - size = 200, - title, - subtitle -}) => { - const [qrDataURL, setQrDataURL] = useState('') - const [loading, setLoading] = useState(false) - const canvasRef = useRef('qrcode-canvas') - - // 使用Canvas API生成二维码 - const generateQRCode = async () => { - if (!text || !visible) return - - setLoading(true) - try { - // 方案1: 使用在线API生成二维码 - const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(text)}` - setQrDataURL(qrApiUrl) - - // 方案2: 如果需要离线生成,可以使用Canvas绘制 - // await drawQRCodeOnCanvas() - - } catch (error) { - console.error('生成二维码失败:', error) - Taro.showToast({ - title: '生成二维码失败', - icon: 'error' - }) - } finally { - setLoading(false) - } - } - - // 使用Canvas绘制二维码(简化版本) - const drawQRCodeOnCanvas = async () => { - const ctx = Taro.createCanvasContext(canvasRef.current) - - // 清空画布 - ctx.clearRect(0, 0, size, size) - - // 绘制白色背景 - ctx.setFillStyle('#ffffff') - ctx.fillRect(0, 0, size, size) - - // 绘制黑色边框 - ctx.setStrokeStyle('#000000') - ctx.setLineWidth(2) - ctx.strokeRect(0, 0, size, size) - - // 绘制定位点 - const drawFinderPattern = (x: number, y: number) => { - ctx.setFillStyle('#000000') - ctx.fillRect(x, y, 28, 28) - ctx.setFillStyle('#ffffff') - ctx.fillRect(x + 4, y + 4, 20, 20) - ctx.setFillStyle('#000000') - ctx.fillRect(x + 8, y + 8, 12, 12) - } - - // 三个角的定位点 - drawFinderPattern(10, 10) // 左上 - drawFinderPattern(size - 38, 10) // 右上 - drawFinderPattern(10, size - 38) // 左下 - - // 生成数据点(模拟二维码数据) - ctx.setFillStyle('#000000') - const moduleSize = 4 - const modules = Math.floor((size - 80) / moduleSize) - - for (let i = 0; i < modules; i++) { - for (let j = 0; j < modules; j++) { - // 简单的伪随机算法,基于文本内容生成固定的图案 - const hash = text.charCodeAt(i % text.length) + text.charCodeAt(j % text.length) - if (hash % 3 === 0) { - const x = 40 + i * moduleSize - const y = 40 + j * moduleSize - ctx.fillRect(x, y, moduleSize - 1, moduleSize - 1) - } - } - } - - ctx.draw() - } - - // 复制文本内容 - const copyText = () => { - if (text) { - Taro.setClipboardData({ - data: text, - success: () => { - Taro.showToast({ - title: '内容已复制', - icon: 'success' - }) - } - }) - } - } - - // 保存二维码图片 - const saveQRCode = () => { - if (qrDataURL) { - Taro.downloadFile({ - url: qrDataURL, - success: (res) => { - Taro.saveImageToPhotosAlbum({ - filePath: res.tempFilePath, - success: () => { - Taro.showToast({ - title: '保存成功', - icon: 'success' - }) - }, - fail: () => { - Taro.showToast({ - title: '保存失败', - icon: 'error' - }) - } - }) - } - }) - } - } - - // 当弹窗打开时生成二维码 - useEffect(() => { - if (visible && text) { - generateQRCode() - } - }, [visible, text]) - - return ( - } - onClose={onClose} - style={{ - width: '90%', - maxWidth: '400px', - borderRadius: '12px' - }} - > - - {/* 标题 */} - - 二维码 - {title && ( - {title} - )} - - - {/* 副标题信息 */} - {subtitle && ( - - {subtitle} - - )} - - {/* 二维码显示区域 */} - - {loading ? ( - - 生成中... - - ) : qrDataURL ? ( - - 二维码 - - ) : ( - - - - )} - - - {/* 文本内容显示 */} - - - - 二维码内容 - - {text} - - - - - - - {/* 操作按钮 */} - - - - - - {/* 使用说明 */} - - 使用说明: - - • 长按二维码可以识别或保存 - • 点击保存按钮可保存到相册 - • 可以复制二维码内容进行分享 - - - - - ) -} - -export default QRCodeGenerator diff --git a/src/components/SimpleQRCodeModal.tsx b/src/components/SimpleQRCodeModal.tsx index ea8ffa8..ccebbcd 100644 --- a/src/components/SimpleQRCodeModal.tsx +++ b/src/components/SimpleQRCodeModal.tsx @@ -10,13 +10,19 @@ export interface SimpleQRCodeModalProps { onClose: () => void /** 二维码内容(礼品卡code码) */ qrContent: string + /** 礼品卡名称 */ + giftName?: string + /** 礼品卡面值 */ + faceValue?: string } const SimpleQRCodeModal: React.FC = ({ - visible, - onClose, - qrContent - }) => { + visible, + onClose, + qrContent, + giftName, + faceValue +}) => { return ( @@ -39,13 +45,28 @@ const SimpleQRCodeModal: React.FC = ({ + {/* 礼品卡信息 */} + {(giftName || faceValue) && ( + + {giftName && ( + + {giftName} + + )} + {faceValue && ( + + ¥{faceValue} + + )} + + )} + {/* 二维码区域 */} - + - 二维码 ID: {qrContent ? qrContent.slice(-6) : '------'} diff --git a/src/user/gift/detail.tsx b/src/user/gift/detail.tsx index 9f75534..958c34f 100644 --- a/src/user/gift/detail.tsx +++ b/src/user/gift/detail.tsx @@ -324,6 +324,8 @@ const GiftCardDetail = () => { visible={showQRCode} onClose={() => setShowQRCode(false)} qrContent={gift.code || ''} + giftName={gift.goodsName || gift.name} + faceValue={gift.faceValue} /> )}