de-net-official/pages/payment/ach.vue

<template>
    <div class="ach">
        <div class="loading">
            <img src="../../static/img/icon_refresh.svg" />
        </div>
        <form ref="formDom" :action="formData.actionUrl" method="post" id="submitForm">
            <input type="hidden" name="callbackUrl" :value="formData.callbackUrl">
            <input type="hidden" name="currency" :value="formData.currency">
            <input type="hidden" name="merType" :value="formData.merType">
            <input type="hidden" name="merchantNo" :value="formData.merchantNo">
            <input type="hidden" name="merchantOrderNo" :value="formData.merchantOrderNo">
            <input type="hidden" name="noticeUrl" :value="formData.noticeUrl">
            <input type="hidden" name="orderAmount" :value="formData.orderAmount">
            <input type="hidden" name="productDetail" :value="formData.productDetail">
            <input type="hidden" name="sign" :value="formData.sign">
            <input type="hidden" name="timeStamp" :value="formData.timeStamp">
            <input type="hidden" name="version" :value="formData.version">
        </form>
    </div>
</template>

<script>
import { postRequest } from '../../http/index';
import Api from '../../http/api';
import { getStorage, storageKey } from '../../utils/help';

export default {
    name: 'ach',
    data() {
        return {
            formData: {},
            isFirstEnter: true,
        }
    },
    mounted() {
        this.getPayInfo()
        let url = getStorage(storageKey.paymentUrl);
        if (this.isFirstEnter === false && url) {
            window.location.href = url;
        }
    },
    methods: {
        getPayInfo() {
            let amountValue = this.$route.params.amount;
            if (amountValue) {
                postRequest(Api.usdRechargeRequestByAchpay, {
                    params: {
                        amountValue: amountValue
                    }
                }).then(res => {
                    if(res.code == 0) {
                        this.formData = res.data;
                        this.isFirstEnter = false;
                        this.$nextTick(() => {
                            this.$refs.formDom.submit();
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss">
html,
body,
#__nuxt,
#__layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.ach {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.loading {
    width: 50px;
    height: 50px;
    img {
        width: 100%;
        height: 100%;
        animation: rotate 1s infinite linear;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>