vue PC端页面实现微信扫码支付

要在 Vue PC端页面实现微信扫码支付，你需要使用微信支付的 Native 支付模式。具体步骤如下：

1. 向服务器获取支付二维码链接：你需要向服务器发送请求，获取支付二维码的链接。

2. 生成支付二维码：你可以使用第三方库 `qrcode` 来生成支付二维码，并将生成的二维码显示在页面上。

import QRCode from 'qrcode'

export default {
  data() {
    return {
      qrCodeUrl: '' // 存储二维码链接
    }
  },
  mounted() {
    this.getPayQrCode()
  },
  methods: {
    getPayQrCode() {
      // 向服务器获取支付二维码链接
      axios.get('/api/getPayQrCode')
        .then(res => {
          const qrCodeUrl = res.data.qrCodeUrl
          // 生成二维码
          QRCode.toDataURL(qrCodeUrl, { errorCorrectionLevel: 'H', margin: 1 })
            .then(dataUrl => {
              this.qrCodeUrl = dataUrl
            })
            .catch(err => {
              console.error(err)
            })
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}

以上代码中，`getPayQrCode` 方法向服务器获取支付二维码链接，然后使用 `qrcode` 库生成二维码，并将二维码链接存储在 `qrCodeUrl` 变量中，你可以将该变量绑定到一个 `img` 标签上来显示二维码。

3. 轮询支付状态：使用轮询的方式来查询支付状态，如果支付成功，则弹出支付成功的提示框。

checkPayStatus() {
  setInterval(() => {
    axios.get('/api/checkPayStatus')
      .then(res => {
        const status = res.data.status
        if (status === 'success') {
          // 支付成功
          this.showPaySuccess()
        }
      })
      .catch(err => {
        console.error(err)
      })
  }, 3000)
},
showPaySuccess() {
  // 弹出支付成功的提示框
  alert('支付成功！')
}

以上代码中，`checkPayStatus` 方法使用轮询的方式查询支付状态，每隔 3 秒发送一次请求，如果支付成功，则调用 `showPaySuccess` 方法弹出支付成功的提示框。

4. 调起微信扫码支付界面：在支付成功后，你需要调用微信扫码支付界面，在微信扫描支付二维码后完成支付。

startNativePay() {
  const qrCodeUrl = '支付二维码的链接'
  const userAgent = window.navigator.userAgent.toLowerCase()
  if (userAgent.indexOf('micromessenger') === -1) {
    // 不在微信中，跳转到支付链接
    window.location.href = qrCodeUrl
  } else {
    // 在微信中，调起微信扫码支付界面
    window.location.href = 'weixin://wxpay/bizpayurl?url=' + encodeURIComponent(qrCodeUrl)
    this.checkPayStatus()
  }
}

以上代码中，`startNativePay` 方法判断当前是否在微信中，如果在微信中，则使用 `weixin://wxpay/bizpayurl?url=` 协议调起微信扫码支付界面，并将支付二维码的链接作为参数传递给微信支付界面。支付成功后，使用轮询的方式查询支付状态，如果支付成功，则弹出支付成功的提示框。

希望这能帮助到你。如果你有其他问题，请随时提出。