.1 安装必要的库
npm install qrcode
2. 从后端获取微信支付二维码链接
你需要从后端获取微信支付二维码链接。这通常涉及到与微信支付API的交互,但这部分通常由后端处理。以下是一个简化的示例,展示如何使用axios发送POST请求到后端,并从响应中获取二维码链接:(连接一般是weixin://wxpay//XXX
)
import axios from 'axios';
async function getWeChatPayLink(orderId) {
try {
const response = await axios.post('/api/wechat-payment', { orderId });
return response.data.payLink; // 根据你的API响应调整这里
} catch (error) {
console.error('Failed to get pay link:', error);
throw error;
}
}
3. 在Vue组件中生成二维码并显示在弹窗中
我们使用qrcode库来生成二维码并在Vue组件中显示。
<template>
<div>
<!-- 按钮触发支付二维码弹窗 -->
<button @click="generateQRCode">支付</button>
<!-- 二维码弹窗 -->
<div v-if="showQRCodeModal" class="qr-code-modal">
<img :src="qrCodeImage" alt="微信支付二维码" />
<button @click="closeModal">关闭</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
import QRCode from 'qrcode';
export default {
data() {
return {
qrCodeImage: '',
showQRCodeModal: false,
};
},
methods: {
async generateQRCode() {
try {
const payLink = await getWeChatPayLink('your-order-id'); // 将'your-order-id'替换为你的订单ID
const dataUrl = await QRCode.toDataURL(payLink);
this.qrCodeImage = dataUrl;
this.showQRCodeModal = true;
} catch (error) {
console.error('Error generating QR code:', error);
}
},
closeModal() {
this.showQRCodeModal = false;
}
}
}
</script>
<style scoped>
.qr-code-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
</style>