ElementUI的MessageBox组件配合QRcode包完成二维码弹窗的支付页面

2022年2月13日17:24:00

学会QRcode包的使用，根据路径字符串生成二维图片

MessageBox弹窗的使用ElementUI官网的文档非常详细，请直接参照官网。（ElementUI务必按需引入以及按需注册）

 

学习记忆点：

①.支付页弹窗打开后，定时器不停发查询状态码，状态码通过后跳转成功支付页面（定时器随弹窗关闭后的及时清除）

②.MessageBox的beforeClose配置（3个参数）使用，出现未跳转异常后，让客户手动操作

 

GET|POST：短轮询，请求发一次，服务器响应一次，完事。

第一种做法:前端开启定时器，一直找服务器要用户支付信息【定时器】此处用的是长轮询。

第二种做法:项目务必要上线 + 和后台紧密配合

当用户支付成功以后，需要后台重定向到项目某一个路由中，将支付情况通过URL参数形式传给前端，

前端获取到服务器返回的参数，就可以判断了。

 

// 弹出框
      async open() {
        // 利用QRcode生成二维码（url地址） 
        let url = await QRCode.toDataURL(this.orderInfo.codeUrl)
        // elementui的messagebox弹出框展示支付页面，注意路径反引号并且斜杠前留空
        this.$alert(`<img src="${url}" />`, '微信支付', {
          // 是否将 message 属性作为 HTML 片段处理
          dangerouslyUseHTMLString: true,
          // 中间布局
          center:true,
          // 关闭右上角关闭按钮,
          showClose:false,
          roundButton:true,
          // 显示取消按钮，确认按钮是默认打开的
          showCancelButton:true,
          // 取消按钮的文本
          cancelButtonText:'请联系管理员',
          // 确认按钮的文本
          confirmButtonText:'已经支付',
          // 关闭前的回调
          beforeClose:(action, instance, done)=>{
              // action:区分取消||确定按钮
              // instance：当前组件实例
              // done：关闭弹出框的方法 
              if (action=='cancel') {      // 取消按钮的回调
                alert('请联系管理人员')
                // 清除定时器
                clearInterval(this.timer)
                this.timer=null
                // 回调的第三个参数，关闭弹出窗
                done()
              }else{     //确认按钮的回调（出现没有自动跳转的界面）
                // 根据支付状态码判断是否真的付了
                if (this.code==200) {     //code为组件data里保存的状态码（凭证）
                  // q 清除定时器，关闭弹出窗，路由跳转支付成功的界面
                  clearInterval(this.timer)
                  this.timer=null
                  done()
                  this.$router.push({name:'paysuccess'})
                }
              }
          }
        });
        
        // 你需要知道支付成功||失败
        // 支付成功，路由的跳转。如果失败，提示信息
        // ↓定时器没有，开启一个新的定时器
        if (!this.timer) {
           this.timer = setInterval(async() => {
              // 发请求获取用户支付的状态 
              let result =  await this.$API.reqPayStatus(this.orderId)
              if (result.code ==200) {
                // 清除定时器
                clearInterval(this.timer)
                this.timer=null
                // 保存支付成功的状态码
                this.code =result.code     //code为组件data里保存的状态码（凭证）
                // 关闭弹出窗
                this.$msgbox.close()
                //跳转下一级路由 
                this.$router.push({name:'paysuccess'})
              }
            }, 1000);
        }

      }