一,代码
<template>
<div id="test">
<div class="box">
<div>
<img src="./logo.png" alt="">
</div>
<el-input
placeholder="请输入金额"
v-model="totalAmount"
class="my_input"
v-on:input="inputNum"
></el-input>
<el-button @click="_pay">确认支付</el-button>
</div>
<el-dialog :visible.sync="dialogWXpay" width="270px" class="wx-dialog">
<div style="margin-bottom: 5px; color: #ccc; font-size: 16px">
请扫码支付
</div>
<div id="qrcode"></div>
</el-dialog>
</div>
</template>
<script>
import axios from "axios";
import { BASE_URL } from "./baseUrl";
import QRCode from "qrcodejs2";
import qs from 'qs'
export default {
data() {
return {
totalAmount: "",
dialogWXpay: false,
outTradeNo: "",
timer: null,
access_token: ""
};
},
created() {},
watch: {
// 监听弹出框的状态
dialogWXpay(val, oldVal) {
if (!val) {
// 清除二维码
document.getElementById("qrcode").innerHTML = "";
// 清楚循环的定时器
window.clearInterval(this.timer);
this.code_url = "";
}
},
},
computed: {},
methods: {
_pay() {
if (!this.totalAmount) {
this.$toast("请输入金额!");
return;
}
// mydata是后台接口需要的数据
let mydata = {
// Math.floor(Math.random() * 1000000000000000)生成随机数
outTradeNo: Math.floor(Math.random() * 1000000000000000),
subject: "我的支付", // 订单名称,必填
totalAmount: this.totalAmount,
body: "我的支付", // 商品描述,可空
tradeType: "NATIVE", // 支付交易方式(APP-APP支付、NATIVE-Native、WEB-网页支付)
platform: "ADPUT_ADVERTISER",
attach:
'{"platform":"ADPUT_ADVERTISER","channel":"WEB","business_type":"RECHARGE"}',
payClientType: "WEB",
payBusinessType: "RECHARGE",
};
let params = {
headers: {
Authorization:
"Bearer " + this.access_token,
},
url: `${BASE_URL}/api/pay/unifiedorder`,
method: "post",
data: mydata,
};
// 后台需要订单号来查询交易状态
this.outTradeNo = mydata.outTradeNo;
axios(params)
.then((res) => {
let code_url = res.data.data.code_url;
this.dialogWXpay = true;
// 用qrcodejs2插件把后台给的url转换成二维码,
必须在this.$nextTick里调用不然首次调用有bug,
问题可能出在Dialog弹出前,初始化Qscode的节点未生成!!!
this.$nextTick(() => {
var qrcode = new QRCode("qrcode", {
text: code_url,
width: 240,
height: 240,
});
});
this.getQRcode();
})
.catch((error) => {
console.log(error);
this.$toast("网络错误,请重试!");
});
},
// 定时查询交易状态
getQRcode() {
// 在前端生产二维码后,
因为不知道用户什么时间扫码支付,
所以用定时器循环调用查询交易状态!
若支付成功查询到订单信息就可以关闭二维码!
this.timer = window.setInterval(() => {
setTimeout(this.wechatQuery(), 0);
}, 5000);
},
async wechatQuery() {
let mydata = {
outTradeNo: this.outTradeNo,
platform: "ADPUT_ADVERTISER",
};
let params = {
headers: {
Authorization:
"Bearer " + this.access_token,
},
url: `${BASE_URL}/api/pay/wechatQuery`,
method: "post",
data: mydata,
};
axios(params)
.then((res) => {
// console.log(res.data.data);
if (
res.data.data.trade_state === "SUCCESS" &&
res.data.data.result_code === "SUCCESS" &&
res.data.data.return_code === "SUCCESS"
) {
window.clearInterval(this.timer);
this.timer = null;
this.$message.success("支付成功");
this.dialogWXpay = false;
this.totalAmount = "";
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style lang="less" scoped="scoped"></style>
二,截图
1.
2.
3.