在做一些跨境电商网站的支付功能时，如果遇到一些用户没有安装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>
