vue微信支付小测试

发表于:2020-9-28 09:29

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:purplezz    来源:掘金

分享:
  一、代码
<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),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号