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);
}
}
洗尽铅华始见金,褪去浮华归本真