vue pc端 支付宝微信支付，实例详解

因为业务需要，公司需要在web端网页生成二维码，通过手机扫码实现支付宝，微信支付的功能。实例如下：

1、安装二维码生成插件，我这里用的是qrcodejs2插件，具体安装方法看我上一篇文章，生成二维码

2、直接上代码，这里的支付宝支付是直接生成新的html页面，支付成功后自动跳转回我们的网站，微信支付是生成二维码，沦陷后获取是否支付成功信息

    //前往支付
    submitPay() {
      if (this.payActive == 0) {
        //支付宝支付
        serveApi.payZFB(obj).then(res => {
          const div = document.createElement('div')
          div.innerHTML = res
          document.body.appendChild(div)
          document.forms[0].acceptCharset = 'UTF-8' //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地，重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配
          document.forms[0].submit()
        })
      } else if (this.payActive == 1) {
        //微信支付
        serveApi.payWX(obj).then(res => {
          if (res) {
            this.dialogWXpay = true
            this.drawCode(res.codeUrl)
            // 定时查询是否支付成功
            this.timer = setInterval(() => {
              this.queryIsPay()
            }, 3000)
          }
        })
      }
    },
    // 绘制二维码
    drawCode(value) {
      this.$nextTick(() => {
        let qrcode = new QRcode('qrcode', {
          width: 250,
          height: 250,
          text: value, // 二维码地址
          colorDark: '#000',
          colorLight: '#fff'
        })
      })
    },
    // 微信支付查询是否支付成功
    queryIsPay() {
      serveApi
        .confirmOrder(
          {
            id: sessionStorage.ZDDorderId,
            payment: this.payActive == 0 ? 2 : 1 //支付方式 1 微信 2 支付宝,
          },
          {
            ingoreMessage: true
          }
        )
        .then(res => {
          if (res && res.code == 0) {
            clearInterval(this.timer)
            this.timer = null
            this.$message.success('支付成功，2秒后将自动跳转到订单管理页面')
            setTimeout(() => {
              this.$router.push({
                path: '/user/myorder'
              })
            }, 2000)
          } else {
            return false
          }
        })
        .catch(err => {
          return false
        })
    },
    // 关闭弹窗清除轮询
    closeWXpay() {
      clearInterval(this.timer)
      this.timer = null
    }

如此，大功告成。