Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码

一、效果图

二、具体实现

1、安装一个转换二维码的插件 qrcodejs2（适用于微信二维码生成）

npm install qrcodejs2 --save

2、在需要使用该插件的 Vue 文件中引入

import QRCode from 'qrcodejs2';

3、接下来编写代码实现，在表格点击“支付”按钮，跳出支付弹窗，有微信支付和支付宝支付的两种方式按钮选择，当点击某个方式会跳出相应的二维码，并设置定时器去查询支付状态是否支付成功。更多内容看代码里的注释（这里给出这部分的相关代码，无关内容的代码没有给出）

HTML 部分（支付宝二维码生成直接用 iframe 标签）：

<!-- 表格操作列 -->
<el-table-column label="操作" width="160" align="center"><template slot-scope="scope"><!-- 这里是项目需要做的判断，读者自行判断，当订单状态为待付款（scope.row.status = 0）和订单金额大于 0 时（scope.row.totalAmount > 0）才有支付按钮 --><el-button type="text" @click="openPayDialog(scope.row)" v-if="scope.row.status == 0 && scope.row.totalAmount > 0">支付</el-button></template>
</el-table-column>

<!-- 支付弹窗 -->
<el-dialogtitle="支付":visible.sync="modal3"width="20%":before-close="closePayDialog"><!-- 支付方式选择，按钮显示 --><div class="pay-dialog-body" v-if="payBtn == true"><p>请选择支付方式：</p><el-button type="primary" size="small" @click="handlePayWxQRcode(payInfoRow)">微信支付</el-button><el-button type="primary" size="small" @click="handlePayAliQRcode(payInfoRow)">支付宝支付</el-button></div><!-- 支付方式选择完成，按钮消失 --><div v-if="payBtn == false"><div>使用 <span v-if="payForWx == true" class="pay-for-method-1">微信</span><span v-if="payForAli == true" class="pay-for-method-2">支付宝</span> 扫一扫二维码进行支付</div><!-- 微信支付二维码 --><div id="qrcodeImg"></div><!-- 支付宝支付二维码 --><iframe v-if="payForAli == true":srcdoc="payAliQRcode" frameborder="no" border="0"marginwidth="10" marginheight="10" scrolling="no" width="220" height="220"style="overflow: hidden;"></iframe><div>注：若二维码过期失效，请刷新页面重新进入支付！</div></div><span slot="footer"><el-button @click="closePayDialog" size="small">返回</el-button></span>
</el-dialog>

JavaScript 部分：

<script>
import QRCode from 'qrcodejs2';
export default {data(){return{modal3: false,    // 是否打开支付弹窗payBtn: true,    // 是否显示方式选择按钮payInfoRow: {},    // 该条订单数据payForWx: false,    // 是否微信支付payForAli: false,    // 是否支付宝支付timer: '',    // 定时器payAliQRcode: '',    // 支付宝codeURL}},methods: {qrcode(url) {  // 前端根据 URL 生成微信支付二维码return new QRCode('qrcodeImg', {width: 100,height: 100,text: url,colorDark: '#000',colorLight: '#fff'});},openPayDialog(row){  // 打开支付窗口this.modal3 = true;this.payBtn = true;    // 显示支付方式选择按钮this.payForWx = false;this.payForAli = false;this.payInfoRow = row;    // 获取该条订单数据},closePayDialog(){  // 关闭支付窗口this.modal3 = false;this.payBtn = true;this.payForWx = false;this.payForAli = false;clearInterval(this.timer);    // 清除定时器},handlePayWxQRcode(row){  // 获取微信支付二维码this.payBtn = false;this.$api.order.getWxPayCode({    // 这里根据不同的后端接口去修改totalFee: row.totalAmount * 100,outTradeNo: row.orderSn,}).then(res => {this.qrcode(res.data.url);    // 例如：res.data.url 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码this.payForWx = true;this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）this.handleQueryWxPayStatus(row, res.data.outTradeNo);}, 1000);})},handleQueryWxPayStatus(row, sn){  // 查询微信支付状态this.$api.order.queryWxPayStatus({    // 这里根据不同的后端接口去修改totalFee: row.totalAmount * 100,outTradeNo: sn,}).then(res => {if(res.data.paySuccess == true){    // 当查询到支付成功时this.$message({type: 'success',message: '支付成功！'});this.closePayDialog();    // 关闭支付弹窗// 这里可以加个刷新订单列表的接口请求函数的调用}})},handlePayAliQRcode(row){  // 获取支付宝支付二维码this.payBtn = false;this.$api.order.getAliPayCode({    // 这里根据不同的后端接口去修改totalAmount: row.totalAmount,outTradeNo: row.orderSn,}).then(res => {this.payAliQRcode = res.data.url;    // 支付宝的二维码生成用 iframe 标签this.payForAli = true;this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询支付宝支付状态（具体参数根据项目需要而定）this.handleQueryAliPayStatus(row, res.data.outTradeNo);}, 1000);});},handleQueryAliPayStatus(row ,sn){  // 查询支付宝支付状态this.$api.order.queryAliPayStatus({    // 这里根据不同的后端接口去修改totalAmount: row.totalAmount,outTradeNo: sn,}).then(res => {if(res.data.paySuccess == true){    // 当查询到支付成功时this.$message({type: 'success',message: '支付成功！'});this.closePayDialog();    // 关闭支付弹窗// 这里可以加个刷新订单列表的接口请求函数的调用}});},},beforeDestroy(){clearInterval(this.timer);}
}
</script>

CSS 部分：

<style>
.pay-dialog-body p{margin-bottom: 10px;
}
#qrcodeImg{margin: 10px;
}
.pay-for-method-1{font-weight: bold;color: #67c23a;
}
.pay-for-method-2{font-weight: bold;color: #409eff;
}
</style>

参考：https://www.cnblogs.com/wangyan0926/p/14473859.html

这是我本人在工作学习中遇到的，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！

Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码相关推荐

前端调用后端接口的错误(400)
前端调用后端接口时,浏览器debug出现Failed to load resource: the server responded with a status of 400 (Bad Request) ...
Nginx解决前端调用后端接口跨域问题
Nginx解决前端调用后端接口跨域问题参考文章: (1)Nginx解决前端调用后端接口跨域问题 (2)https://www.cnblogs.com/wangymd/p/11200746.html ...
webstorm前端调用后端接口_一篇前端同学对后端接口的吐槽
来源:juejin.im/post/5cfbe8c7e51d4556da53d07f 前言去年的某个时候就想写一篇关于接口的吐槽,当时后端提出了接口方案对于我来说调用起来非常难受,但又说不上为什么, ...
前端调用后端接口 xhr 只看到一次实际调用两次_持续演进的接口自动化测试方案...
点击关注"有赞coder" 获取更多技术干货哦- 作者:Henry 部门:美业测试前言接口自动化测试是个老生常谈的话题,基本上每个测试团队都会涉及,市面上大部分文章会从如何设计 ...
vue 项目前端模拟后端接口数据（vue2,vue3）
项目中或者平常自己创建demo的过程中,往往需要后端配合,但是有时候没有后端,又需要数据,此时就展示了我们前端的强大之处,自己模拟后端接口数据. 如果自定义一个模拟后端数据, 首先创建一个文件夹放置后 ...
webstorm前端调用后端接口_软件测试面试题：怎么去判断一个bug是前端问题还是后端问题...
大家好,在软件测试面试过程中,经常有面试官问到这个问题,那我们应该如何回答才好呢?少废话,直接看答案: 答案: 在页面上发现bug之后,要想判断这个问题属于后端还是前端,我就需要来判断这个页面背后调用 ...
FastDFS自定义水印的文件上传（前端调用后端接口）
之前写了普通的文件上传,考虑到可能有些公司的文件会有版权问题,因此加上带水印的文件上传功能. controller: /*** 文件上传带水印格式,支持PDF/图片* @param file* @pa ...
前端调用后端接口全都报403,但是换个浏览器可以正常访问，请问有大佬知道什么问题吗？
就是如下图这样!!!
java调用授权接口oauth2_微信授权就是这个原理，Spring Cloud OAuth2 授权码模式
上一篇文章Spring Cloud OAuth2 实现单点登录介绍了使用 password 模式进行身份认证和单点登录.本篇介绍 Spring Cloud OAuth2 的另外一种授权模式-授权码模式 ...
vue调用接口修改密码_vue开发前后端分离前端如何调用后端接口？
对前后端分离如何调用接口这块感觉一直没怎么弄明白,但又不知如何说明,下面我模拟一个项目说明我的问题. 现在我们有个项目,前端用vue开发,后端php开发,后端测试地址为:localhost:8181, ...

Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码

一、效果图

二、具体实现

1、安装一个转换二维码的插件 qrcodejs2（适用于微信二维码生成）

2、在需要使用该插件的 Vue 文件中引入

Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码相关推荐

最新文章

热门文章