Vue wechat payment mini test

A, the code

<template>
    <div id="test">
        <div class="box">
            <div>
                <img src="./logo.png" alt="">
            </div>
            <el-input
                placeholder="Please enter the amount"
                v-model="totalAmount"
                class="my_input"
                v-on:input="inputNum"
            ></el-input>
            <el-button @click="_pay">Confirm the payment</el-button>
        </div>
        <el-dialog :visible.sync="dialogWXpay" width="270px" class="wx-dialog">
            <div style="margin-bottom: 5px; color: #ccc; font-size: 16px">Please scan the code to pay</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: {
        // Listen for the status of the popup
        dialogWXpay(val, oldVal) {
            if(! val) {// Clear the qr code
                document.getElementById("qrcode").innerHTML = "";
                // Clear loop timer
                window.clearInterval(this.timer);
                this.code_url = ""; }}},computed: {},
methods: {
        _pay() {
            if (!this.totalAmount) {
                this.$toast("Please enter the amount!");
                return;
            }
            // myData is the data required by the background interface
            let mydata = {
                Math.floor(math.random () * 1000000000000000) generates a random number
                outTradeNo: Math.floor(Math.random() * 1000000000000000),
                subject: "My payment".// Order name, mandatory
                totalAmount: this.totalAmount,
                body: "My payment".// Product description can be empty
                tradeType: "NATIVE".// Payment transaction mode (app-APP payment, native-native payment, Web-web payment)
                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,
            };
            // The order number is required to query the transaction status
            this.outTradeNo = mydata.outTradeNo;
            axios(params)
                .then((res) = > {
                    let code_url = res.data.data.code_url;
                    this.dialogWXpay = true;
                    // Use qrcodeJs2 plug-in to convert the url given by the background into two-dimensional code,Must be inthis$nextTick (" Qscode "); $nextTick (" Qscode ");this.$nextTick(() = > {
                        var qrcode = new QRCode("qrcode", {
                            text: code_url,
                            width: 240.height: 240}); });this.getQRcode();
                })
                .catch((error) = > {
                    console.log(error);
                    this.$toast("Network error, please try again!");
                });
        },
        // Query transaction status periodically
        getQRcode() {
            // After the front-end produces the QR code,Because do not know what time users scan code to pay, so use timer cycle call query transaction status! If the payment is successful to query the order information you can close the TWO-DIMENSIONAL code!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("Payment successful");
                        this.dialogWXpay = false;
                        this.totalAmount = "";
                    }
                })
                .catch((error) = > {
                    console.log(error); }); ,}}};</script>
<style lang="less" scoped="scoped"></style>
Copy the code

2, screenshots

1.

2.

3.