【无标题】vue pc支付宝支付/微信支付

原创已于 2025-04-02 17:44:04 修改 · 352 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #微信 #javascript

于 2025-03-22 16:14:12 首次发布

微信支付

实现思路:安装插件qrcode，通过后端接口返回数据（微信支付链接）,生成二维码回显在页面上进行支付，回调调用后台接口获取订单状态是否改变
实现步骤:
1.npm install --save qrcode
2.在需要用到的页面引入
import QRCode from ‘qrcode’
3.获取接口数据，使用qrcode回显
createQR(codeUrl) {
let opts = {
errorCorrectionLevel: “H”,
type: “image/png”,
quality: 0.3,
margin: 5,
width: 300,
height: 300,
color: {
dark: “#000”,
light: “#FFF”
}
}
QRCode.toDataURL(codeUrl, opts, (err, url) => {
if (url == undefined) {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 30: \dots'支付调起失败') }̲ else { c\dots$ message.success(“支付成功~”);
clearInterval(this.timer);
window.clearInterval(this.timer)
this.timer = null
setTimeout(() => {
this.$router.go(-1)
}, 1500);
}
});
}, 5000);
//离开页面时清除掉定时器
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
},

支付宝支付前置二维码

1.跳转页面
const div = document.createElement(“div”);
div.innerHTML = from;
document.body.appendChild(div);
document.forms[0].submit();// 执行后会唤起支付宝
2.内嵌使用

< iframe :srcdoc=“form接口数据” frameborder=“no” border=“0” marginwidth=“0” marginheight=“0” scrolling=“no” width=“300” height=“300” style=“overflow: hidden” > < /iframe>