vue3实现实现二维码扫码支付

在做一些跨境电商网站的支付功能时，如果遇到一些用户没有安装MetaMask钱包插件的话，就实现另一种方案，那就是用到今天的生成二维码，然后引导用户来做一个扫码支付的行为。

首先下载一个插件

这个插件主要的功能可以将你输入的内容，转换为加密格式，然后拼接生成二维码

npm install qrcode

使用方法

const qrCodeData = ref('');
const imageUrl = ref('');
const generateQRCode = async (address, amount) => {
    // 第一项为USDT的合约地址，第二项为USDT的转账方法transfer，第三项为收款地址，第四项为转账金额，10*18次方
    const url = `ethereum:${contractAddress}/transfer?address=${address}&uint256=${amount * 10 ** 18}`;
    const qrCodeDataUrl = await QRCode.toDataURL(url);
    imageUrl.value = qrCodeDataUrl;
    console.log(qrCodeData.value);
};
// usdt合约地址
const contractAddress = '0x55d398326f99059ff775485246999027b3197955'
// 收款地址
const address = '0xb0e73E6e9794DD5a86e5F64aD766f205412D72A7';
// 转账金额
const amount = 5.6;

生成图片后，实现长按图片保存到本地功能

const image = ref(null)
const timer = ref(null);
// 长按调用保存图片事件
const startLongPress = (event) => {
    event.preventDefault();
    // console.log(event);
    timer.value = setTimeout(() => {
        downloadImage();
        console.log('Long press event triggered');
    }, 1000); // 设置长按的时间，单位为毫秒
};

// 手指抬起清除定时器
const endLongPress = () => {
    clearTimeout(timer.value);
};

// 移动端长按保存图片到本地
const downloadImage = () => {
  const imageElement = image.value;
  const link = document.createElement('a');
  link.href = imageElement.src;
  link.download = 'payment';
  link.click();
  console.log('Image downloaded');
};

如何在页面上显示？

<div class="dialog">
                <img ref="image" @touchstart="startLongPress" @touchend="endLongPress" :src="imageUrl" alt="QR Code" />
            </div>

最终效果图展示：

这篇好文章是转载于：学新通技术网