赞
踩
npm install qrcodejs2 --save
import QRCode from 'qrcodejs2';
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-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>
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>
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
这是我本人在工作学习中遇到的,同时也分享出来给需要的小伙伴哈 ~ 供参考学习,有什么建议也欢迎评论留言,转载请注明出处哈,感谢支持!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。