前端在线微信扫码支付的小功能

前两天写了一个微信扫码支付的小功能，采用vue+antDesign，在此记录一下.

功能大概如下

• 输入信息
• 微信扫码支付
• 结果页面

·输入信息

通过下拉选择框的联动，输入信息后点击下一步调取api并进入支付页面（前台使用antDesign表单验证非空）

·微信扫码支付

通过api获取二维码的url（一般格式为‘weixin://wxpay/bizpayurl?pr=5svmAQaoz’）拿到路径后通过vue-qr转换成图片。同时进入支付页面后每隔一秒调取一次查询支付状态的api，当返回为‘SUCCESS’时，停止调取并进入结果页面

 // 每隔一秒获取一次支付状态
            this.interval = setInterval(() => {
              getPayStatus(this.payDeatil.orderId)
                .then((res) => {
                  if (res.data.content == 'SUCCESS') {
                    //清除定时器
                    clearInterval(this.interval)
                    this.next()
                    // 获取评估结果
                    getResult(this.payDeatil.orderId).then((res) => {
                      this.assessmentResult = res.data.content
                    })
                  }
                })
                .catch((err) => {
                  console.log(err)
                })
            }, 1000)

·结果页面

结果页面直接展示数据，至此结束，微信支付主要还是后台逻辑，前端做的东西不多。