微信扫码支付
需要用到的插件 ：qrcodejs2
先安装cnpm i qrcodejs2 -S
然后引入：import QRCode from "qrcodejs2";
配置啥的照着官网写就ok了
点击后弹窗出现，就有惊喜
代码如下：
<template><div class="box"><el-button type="success" @click="payOrder">点我有惊喜</el-button><el-dialog width="300px" title="微信支付" @close="closeCode" :visible.sync="show" append-to-body><div class="paycode"><!-- 放置二维码的容器,需要给一个ref --><div id="qrcode" ref="qrcode"></div></div></el-dialog></div></template><script>import QRCode from "qrcodejs2";export default {data() {return {show: false};},methods: {// 展示二维码payOrder() {this.show = true;// 二维码内容,由后台返回的地址this.qrcode = "/?tn=21002492_25_hao_pg";// 使用$nextTick确保数据渲染this.$nextTick(() => {this.crateQrcode();});},// 生成二维码crateQrcode() {this.qr = new QRCode("qrcode", {width: 130,height: 130, // 高度text: this.qrcode, // 二维码内容background: "#f0f"});},// 关闭弹框,清除已经生成的二维码closeCode() {this.innerVisible = false;this.$refs.qrcode.innerHTML = "";}}};</script><style>#qrcode {display: flex;justify-content: center;}</style>
支付宝支付
调接口后端返回的是form 表单
单击支付宝支付后出现支付界面：
自己也在学习中，加油！！！
