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

一、效果图

二、具体实现

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

npm install qrcodejs2 --save
1

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

import QRCode from 'qrcodejs2';
1

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>
1
2
3
4
5
6
7

<!-- 支付弹窗 -->
<el-dialog
    title="支付"
    :visible.sync="modal3"
    width="20%"
    :before-close="closePayDialog">
        <!-- 支付方式选择，按钮显示 -->
        <div class="pay-dialog-body" v-if="payBtn">
            <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-else>
            <div>
                使用 
                <span v-if="payForWx" class="pay-for-method-1">微信</span>
                <span v-if="payForAli" class="pay-for-method-2">支付宝</span> 
                扫一扫二维码进行支付
            </div>
            <!-- 微信支付二维码 -->
            <div id="qrcodeImg"></div>
            <!-- 支付宝支付二维码 -->
            <iframe 
                v-if="payForAli"
                :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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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.$api.order.getWxPayCode({    // 这里根据不同的后端接口去修改
                totalFee: row.totalAmount * 100,
                outTradeNo: row.orderSn,
            }).then(res => {
                this.payBtn = false;
                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){    // 当查询到支付成功时
                    this.$message({
                        type: 'success',
                        message: '支付成功！'
                    });
                    this.closePayDialog();    // 关闭支付弹窗
                    // 这里可以加个刷新订单列表的接口请求函数的调用
                }
            })
        },
        handlePayAliQRcode(row){  // 获取支付宝支付二维码
            this.$api.order.getAliPayCode({    // 这里根据不同的后端接口去修改
                totalAmount: row.totalAmount,
                outTradeNo: row.orderSn,
            }).then(res => {
                this.payBtn = false;
                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){    // 当查询到支付成功时
                    this.$message({
                        type: 'success',
                        message: '支付成功！'
                    });
                    this.closePayDialog();    // 关闭支付弹窗
                    // 这里可以加个刷新订单列表的接口请求函数的调用
                }
            });
        },
    },
    beforeDestroy(){
        clearInterval(this.timer);
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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