使用vue写pc端项目时,商城类网站通常需要接支付系统,下面是我在最近一个商城项目中关于支付系统的记录
支付宝支付
支付宝支付对于前端来说比较简单,只需要后端同志把要跳转的页面接口配置好,前端拼接上跳转参数直接跳转就好,代码示例:
//支付宝付款
//拼接url 其中this.https.urls是后端给接口地址,,其他为参数
let myurl =this.https.urls +"/index/memory/familytree_pay?user_id" + localStorage.getItem("ym_userId") + "&order=" +order;
//直接跳转
window.location.href = myurl;
微信支付
微信支付较为复杂点,因为微信会返回一个特殊链接,一般需要前端转换成一个二维码进行扫码支付,现在先引入一个转换二维码的插件qrcodejs2
1.引入qrcodejs2
npm install qrcodejs2 --save
2.在需要的页面引入
import QRCode from "qrcodejs2"; // 引入qrcode
3.微信支付中,在弹出二维码等待微信扫码时,pc端无法得到扫码支付结果,所以需要设置定时器不间断的请求后端提供的一个接口,用来判断是否支付完成
微信弹框的html:
<!-- 微信支付弹框 -->
<el-dialog :visible.sync="buy_code" width="80rem" @close="buy_close">
<div class="buy_box dis_f_c_c">
<div id="qrcode" ref="qrcode" class="img1 dis_f_c_c"></div>
<img src="static/image/store/pay2.png" class="img2" alt="" />
</div>
</el-dialog>
</div>
//重点是要有div的ref=qrcode,便于接下来渲染二维码
js:
this.buy_code = true;//显示二维码弹窗
//循环请求查看是否支付成功
this.timer1 = setInterval(() => {
this.wx_time(order);
}, 1000);
//使用nextTick确保在弹框显示前二维码数据渲染,不加的话可能报错获取不到qrcode元素
this.$nextTick(() => {
this.qrcode = new QRCode("qrcode", {
width: 150,//二维码宽度
height: 150,//二维码高度
text: res.data.data,//调用微信支付接口返回的微信特殊链接:例如"weixin://wxpay/bizpayurl?pr=uDKsQ4E00"
colorDark: "#000",//颜色配置
colorLight: "#fff",
});
});
关闭弹框js:
//监听支付成功后
//成功后关闭定时器
clearInterval(this.timer1);
this.$refs.qrcode.innerHTML = "";//清空渲染的二维码
this.buy_code = false;//关闭弹窗
支付结束!,下面是图片实列