一、代码
<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.
上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。