前端二维码支付

最新推荐文章于 2024-06-05 01:29:18 发布

阿哥狸

最新推荐文章于 2024-06-05 01:29:18 发布

阅读量440

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46181416/article/details/136350802

版权

//引入qrcode
import QRCode from 'qrcode'

async  open() {
        //生成二维码地址
        let payCode = await QRCode.toDataURL(this.payInfo.codeUrl);
        this.$alert(`<img src=${payCode}></img>`, '微信扫码支付', {
          center:true,
          dangerouslyUseHTMLString: true,
          showClose:false,
          showCancelButton:true,
          cancelButtonText:'支付遇见问题',
          confirmButtonText:"已支付成功",
          beforeClose:(action, instance, done)=>{
            if (action=='cancel'){
              alert('请联系管理员')
            //  清除计时器
              clearInterval(this.timer)
              this.timer=null
            //  关闭弹窗
              done()
            }else {
            //  判断是否真的支付
              if (this.code==200){
                clearInterval(this.timer)
                this.timer=null
              //  跳转
                done()
                this.$router.push('/paySuccess')
              }
            }
          }
        }).then(res=>{
          console.log('res',res)
        }).catch(err=>{
          console.log('err',err)
        })//必须要有catch，不然会报错

      //  是否支付成功
      // 开启定时器
       if (!this.timer){
         this.timer=setInterval(async ()=>{
         //  发请求获取用户支付的状态
           let result = await this.$API.paymentWeixinQueryPayStatus(this.orderId);
           if (result.code==200){
             clearInterval(this.timer)
             this.timer=null
             //保存支付的状态
             this.code=result.code
             //关闭弹出窗
             this.$msgbox.close()
             //跳转到下一个路口
             this.$router.push('/paySuccess')
           }
         },1000)
       }
      },