微信支付接口返回的连接动态生成二维码

.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>