提纲挈领:
1.安装qrcode插件:
2. 如何使用这个插件,看看代码:
1》.引入
2》在open弹框的地方也就是遮罩层加上这个QRCode.toDataURL(参数)
1)需要传的参数就是codeUrl
2)观察一下这个函数调用后返回的是什么东西?
2)----的效果图:
3)但是我们需要的是promise的成功的结果:
这个promise成功的结果其实是一个地址,点击之后跳转到一个二维码图片
4)继续修改代码:
4)----的效果图:
3.开始分析:我们是需要知道后台告诉我们支付的成功与失败的。支付成功有跳转路由,失败会有提示信息。故我们需要向后台发请求,并且要一直发请求。因为支付是由用户决定的,它不可能只发一次请求。你咋决定它只发一次请求,肯定是一直发告诉我们到底有没有支付成功?
4.它有一个查询支付订单状态的接口:
1》博主文档:
2》写api接口(获取支付订单状态)
1)在api文件夹的index.js里面:
2)在Pay组件里面:
补充一点:当你的二维码展示出来,你就要做一件事长轮询,
所以要用到定时器,但是定时器很恶心,当你用完之后,记得要清除掉
在组件pay里面:
1
2.他会一直发请求,问你支付成功了吗?支付成功了吗?支付成功了吗?
3.继续优化代码:
4.把静态组件paySucuess放进去项目中:
1》
2》在roueter.js里面配置路由:
5.目前阶段的效果图:
6.所以这两个按钮点击后应该要处理一些业务逻辑才对
1》官方文档有:
2》
3》
4》在 Pay里面继续优化代码:【关闭配置项的优化。】
4》---的效果图:
1)当你点击“支付遇见问题”(取消)按钮的时候
图1:
图2:
图3:
2)当你点击“已支付”(确定)按钮的时候