1.书写js
//生成二维码的方法 createNatvie(orderNo) { return request({ url: '/eduorder/t-pay-log/createNative/'+orderNo, method: 'get' }) }, //查询订单状态的方法 queryPayStatus(orderNo) { return request({ url: '/eduorder/t-pay-log/queryPaystatus/'+orderNo, method: 'get' }) }
2.页面
<template> <div class="cart py-container"> <!--主内容--> <div class="checkout py-container pay"> <div class="checkout-tit"> <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功,请您及时付款!订单号:{{payObj.out_trade_no}}</span> </h4> <span class="fr"><em class="sui-lead">应付金额:</em><em class="orange money">¥{{payObj.total_fee}}</em></span> <div class="clearfix"></div> </div> <div class="checkout-steps"> <div class="fl weixin">微信支付</div> <div class="fl sao"> <p class="red">请使用微信扫一扫。</p> <div class="fl code"> <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> --> <!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ" :size="338"/> --> <qriously :value="payObj.code_url" :size="338"/> <div class="saosao"> <p>请使用微信扫一扫</p> <p>扫描二维码支付</p> </div> </div> </div> <div class="clearfix"></div> <!-- <p><a href="pay.html" target="_blank">> 其他支付方式</a></p> --> </div> </div> </div> </template>
这里用到了一个插件qriously 之前已经下过了
个人理解的插件介绍: 可以使用qrious在HTML Canvas上绘制QR码的vue组件。
3、页面方法
这里主要用了一个定时器去定时执行我们的后端方法,去获取支付状态
<script> import ordersApi from '@/api/orders' export default { asyncData({ params, error }) { return ordersApi.createNatvie(params.pid) .then(response => { return { payObj: response.data.data } }) }, data() { return { timer1:'' } }, //每隔三秒调用一次查询订单状态的方法 mounted() {//页面渲染之后执行 this.timer1 = setInterval(() => { this.queryOrderStatus(this.payObj.out_trade_no) },3000); }, methods:{ queryOrderStatus(orderNo) { ordersApi.queryPayStatus(orderNo) .then(response => { if (response.data.success) { //支付成功,清除定时器 clearInterval(this.timer1) //提示 this.$message({ type: 'success', message: '支付成功!' }) //跳转回到课程详情页面 this.$router.push({path: '/course/' + this.payObj.course_id}) } }) } } } </script>