【Vue】微信扫码支付

步骤一，引入文件

npm install --save qrcode

页面使用

<div v-if="payshow"><div id="qrcode" ref="qrcode" class="paywechat"></div>
</div>

import QRCode from 'qrcode'data() {return {payshow: false,//支付盒子codeurl: "",//回调urltimer1: "", //支付循环};},
methods: {//循环请求查看是否支付成功async wechatpay() {let obj = {price: this.paymoney,pay_type: 10,};try {//调用后端接口，接收返回urlconst res = await order_pay(obj);//这句代码可以避免重复生成二维码document.getElementById("qrcode").innerHTML = "";this.codeurl = res.data.payDetail.code_url;//循环请求查看是否支付成功this.timer1 = setInterval(() => {this.get_order_status(res.data.order_id);}, 1000);//如果在组件内的支付，很可能会监听不到组件销毁//通过$once来监听定时器，在beforeDestroy钩子可以被清除。this.$once("hook:beforeDestroy", () => {clearInterval(timer1);this.payshow = false;//支付的弹窗});//生成二维码this.$nextTick(() => {this.qrcode = new QRCode("qrcode", {width: 150, //二维码宽度height: 150, //二维码高度text: this.codeurl, //调用微信支付接口返回的微信特殊链接：例如"weixin://wxpay/bizpayurl?pr=uDKsQ4E00"colorDark: "#000", //颜色配置colorLight: "#fff",});});} catch (err) {this.$message.error({message: err,type: "none",});}},//监听支付轮询async get_order_status(id) {try {const res = await get_order_status({ order_id: id });//如果支付成功if (res.data.order_status == 30) {this.payshow = false;clearInterval(this.timer1);this.$message({message: "支付成功",type: "success",});}} catch (err) {this.$message.error({message: err,type: "none",});}},
}

【Vue】微信扫码支付相关推荐

vue+element模仿电商商城，前后端分离实现，下单微信扫码支付
1.前言接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...
React实现微信扫码支付
效果图一.请求后台接口获取data数据送上一波福利微信公众号开发.企业建站开发.小程序.vue.h5.css3.react等前端视频学习资料关注公众号[码兄]免费获取二.解析数据 https: ...
前端在线微信扫码支付的小功能
前两天写了一个微信扫码支付的小功能,采用vue+antDesign,在此记录一下. 功能大概如下输入信息微信扫码支付结果页面 ·输入信息通过下拉选择框的联动,输入信息后点击下一步调取api并进 ...
2021年django微信扫码支付流程--全攻略(阻止回调请看下一章)
PC端,微信扫码支付, 我们产生支付二维码后,等用户支付, 用户扫码支付成功后,我们接收腾迅的回调数据但是我们如果不阻止回调,则我们的服务器会被腾迅请求很多次在几个小时之内, 所以我们一定要阻止回调 ...
c#版在pc端发起微信扫码支付
c#版在pc端发起微信扫码支付参考此连接(https://www.cnblogs.com/vinsonLu/p/5166214.html#!comments) posted on 2019-01-0 ...
微信扫码支付模式二【无法回调】解决方案
微信扫码支付模式二[无法回调]解决方案参考文章: (1)微信扫码支付模式二[无法回调]解决方案 (2)https://www.cnblogs.com/lhat/p/5611242.html 备忘一下 ...
微信扫码支付官方配置(一)
微信扫码支付官方API: https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1 .net C# SDK: https://pay. ...
ASP.NET Core Web 支付功能接入微信-扫码支付篇
// 随着版本更迭,新版本可能无法完全适用,请参考仓库内的示例. 这篇文章将介绍ASP.NET Core中使用开源项目 Payment(https://github.com/Essensoft/Pa ...
微擎支付返回商户单号_一步一步教你在SpringBoot中集成微信扫码支付
一:准备工作使用微信支付需要先开通服务号,然后还要开通微信支付,最后还要配置一些开发参数,过程比较多. 申请服务号(企业) 开通微信支付开发配置具体准备工作请参考Spring Boot入门教程( ...
微信支付宝服务器分布,支付宝微信扫码支付中间件「第二届立创商城电子制作节30强作品」...
原标题:支付宝微信扫码支付中间件「第二届立创商城电子制作节30强作品」本作品为第二届立创商城电子制作节30强入围作品,作者立创社区ID:云逸Baby:转载请注明出处,未经允许不得用作商业用途.作品原 ...

【Vue】微信扫码支付

步骤一，引入文件

页面使用

【Vue】微信扫码支付相关推荐

最新文章

热门文章