vue 扫码,vue实现扫一扫
主要介绍了vue项目中扫码支付的实现实例，通过实例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
需求分析背景及思路UI展示。开始使用第一个付款组件模板和第二个付款组件JS相关代码和说明。附：组件JS完整源代码。
需求背景
市场报告列表中显示两种类型的报告，一种是免费报告，另一种是付费报告。免费用户可以直接查看报告，而付费报告只有在用户购买后才能查看。
思路分析
点击作为付费报告查看，会弹出付费二维码。
创建订单，二维码倒计时。显示5秒后，开始监控支付回拨结果，频率为5秒。
首次倒计时0秒，提醒用户二维码过期时点击刷新二维码。
继续倒计时，开始监控支付回拨结果。
刷新倒计时到0秒后，如果还没有监测到结果，关闭支付弹窗，让用户重新发起支付。
UI展示
付款弹出窗口没有过期，看起来是这样的。
付款弹窗这样过期多久？
开始使用
支付是项目的公共功能，所以我们单独封装了一个组件，以便其他模块在使用时可以作为子组件引入。
一 编写支付组件模板
下面是模板的具体源代码。由于样式不是我们考虑的重点，所以就不展示样式的代码了。需要的话自己添加。
模板
差异
el对话
class=dialog-pay
title=
:visible.sync=dialogVisible
:show-close=false
@close=handleClosePay
div class=内容
p class=tip{{ pay.title }}/p
小费
支付金额：span class=小额人民币/span
span class= large { pay . money } }/span
/p
图片
pic
:style={ opacity: btnDisabled？1 : 0.3 }
:src=pay.url
/
el按钮
class=btn
:class=btnDisabled？已禁用“:”
type=primary
:disabled=btnDisabled
@click=handleRefreshCode
{{ btnText }}/el-button
/div
/el-dialog
/div
/模板
二 支付组件的JS相关代码和说明
1.监控付款弹出窗口是否显示。
子组件通过props属性接收父组件在子组件中传递的值。用手表监控pay.show，只在为真时显示支付弹窗，显示5秒后启动监控支付结果的方法。
观察：{
pay.show :
处理器(val) {
if (val) {
this . dialog visible=this . pay . show
setTimeout(this . handlereportpaynotify()，5000)
}
},
即时：正确
}
},
2.二维码开始倒计时。
开始倒计时二维码60秒，点击刷新0秒再次获取二维码，继续倒计时。此时如果达到0秒，会关闭支付弹窗，提示用户等待时间过长，请重新发起支付。
handleCountDown() {
if (this.second==1) {
if (this.refresh) {
这.秒=60
this.btnDisabled=false
This.btnText=单击刷新重新获取二维码
if (this.timer) {
clearInterval(this.timer)
}
}否则{
这个。$emit(closePay ，{ type: fail })
clearInterval(this.timer)
这个。$message.warning(等待时间过长，请重新发起支付)
}
}否则{
这个。第二个-
this.btnDisabled=true
This.btnText=`在二维码过期之前还有${this.second}秒`。
this.downTimer=setTimeout(()={
this.handleCountDown()
}, 1000)
}
},
3.监控支付弹出窗口关闭。
handleClosePay() {
if (this.timer) {
clearInterval(this.timer)
}
if (this.downTimer) {
clearTimeout(this.downTimer)
}
这个。$emit(closePay ，{ type: fail })
这个。$message.warning(您已取消付款)
},
4.监控付款回拨结果。
回调结果有两种，如果是正常范围内监听成功，则执行父组件传过来的fn，并清除定时器；如果监听到次数为12的时候还没有得到相应的结果，则关闭支付弹窗，提示用户等待时间过长，请重新发起支付，并清除定时器。
handleReportPayNotify() {
设数量=0
this.timer=setInterval(()={
数字
this.pay.fn().然后(res={
if (res.status==111111) {
这个emit(closePay ，{ type: success })
clearInterval(this.timer)
}
})
if (num==12) {
这个emit(closePay ，{ type: fail })
clearInterval(this.timer)
这个message.warning(等待时间过长，请重新发起支付)
}
}, 5000)
}
5.支付组件销毁时清除定时器
这一步是容易忽略但是也是需要做的，当组件销毁时将定时器及时的清除掉。
销毁前(){
if (this.timer) {
clearInterval(this.timer)
}
if (this.downTimer) {
clearTimeout(this.downTimer)
}
}
}
附：组件JS完整的源码
脚本
导出默认值{
姓名：微信支付，
道具：{
支付：对象
},
data() {
返回{
dialogVisible: false，
BTN禁用：真的，
btnText:" "，
第二：60,
计时器：空，
刷新：真
}
},
观察：{
pay.show :
处理器(瓦尔){
if (val) {
这个。对话框可见=this。付钱。显示
setTimeout(this。handlereportpaynotify()，5000)
}
},
即时：正确
}
},
已安装(){
this.handleCountDown()
},
方法：{
/**
* @描述：刷新二维码
*/
handleRefreshCode() {
这个。$巴士发出( refreshCode )
this.handleCountDown()
this.handleReportPayNotify()
this.refresh=false
},
/**
* @描述：二维码倒计时
*/
handleCountDown() {
if (this.second==1) {
if (this.refresh) {
这。秒=60
this.btnDisabled=false
this.btnText=点击刷新重新获取二维码
if (this.timer) {
clearInterval(this.timer)
}
}否则{
这个emit(closePay ，{ type: fail })
clearInterval(this.timer)
这个message.warning(等待时间过长，请重新发起支付)
}
}否则{
这个。第二个-
this.btnDisabled=true
这个。BTN text=` 1距离二维码过期剩余${this.second}秒`
this.downTimer=setTimeout(()={
this.handleCountDown()
}, 1000)
}
},
/**
* @描述：监听支付弹窗关闭
*/
handleClosePay() {
if (this.timer) {
clearInterval(this.timer)
}
if (this.downTimer) {
clearTimeout(this.downTimer)
}
这个emit(closePay ，{ type: fail })
这个message.warning(您已取消支付)
},
/**
* @描述：监测支付回调结果
*/
handleReportPayNotify() {
设数量=0
this.timer=setInterval(()={
数字
this.pay.fn().然后(res={
if (res.status==111111) {
这个emit(closePay ，{ type: success })
clearInterval(this.timer)
}
})
if (num==12) {
这个emit(closePay ，{ type: fail })
clearInterval(this.timer)
这个message.warning(等待时间过长，请重新发起支付)
}
}, 5000)
}
},
销毁前(){
if (this.timer) {
clearInterval(this.timer)
}
if (this.downTimer) {
clearTimeout(this.downTimer)
}
}
}
/脚本
到此这篇关于某视频剪辑软件项目中扫码支付的实现示例（附演示)的文章就介绍到这了，更多相关某视频剪辑软件扫码支付内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。