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

<template>
    <div class="payment">
        <!-- 选择支付方式 -->
        <template v-if="step === 1">
            <div class="moneyInfo">
                <div class="tips">You Neet to Pay</div>
                <div class="money" v-if="salePlans">
                    <FontZoom width="320">
                        <template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
                            <img class="icon" :src="salePlans.currencyInfo.iconPath" /><span class="info"> {{ salePlans.price }} {{ salePlans.currencyInfo.tokenSymbol }} (${{salePlans.usdPrice}})</span>
                        </template>
                        <template v-else>
                            <span class="info usd">${{salePlans.usdPrice}}</span>
                        </template>
                    </FontZoom>
                </div>
            </div>
            <div class="payList">
                <div class="detail" v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
                    <div class="title">Crypto Wallet</div>
                    <div class="item denet" @click="deNetPay">
                        <div>
                            <img src="../../static/payment/icon_wallet.png" />
                            <span>DeNet Pay</span>
                        </div>
                        <div class="wallet">
                            <FontZoom width="300" :unColor="true">
                                Balance:{{currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}
                            </FontZoom>
                        </div>
                    </div>
                    <div class="item" @click="maskPay">
                        <a class="maskLink" :href="maskUrlLink" v-if="Number(currencyInfoData.balance) < Number(salePlans.price)"></a>
                        <img src="../../static/payment/icon_meta_mask.png" />
                        <span>MetaMask</span>
                    </div>
                </div>
                <div class="detail" v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode === 'USD'">
                    <div class="title">Credit/Debit Card</div>
                    <div class="item denet" @click="deNetPay">
                        <div>
                            <img src="../../static/payment/icon_wallet.png" />
                            <span>DeNet Pay</span>
                        </div>
                        <div class="wallet">
                            Balance:{{currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}
                        </div>
                    </div>
                    <div class="item" @click="achPay(true, Report.objectType.mastercardPayButton)">
                        <img src="../../static/payment/icon_master_card.png" />
                        <span>MasterCard</span>
                    </div>
                    <div class="item" @click="achPay(true, Report.objectType.visaPayButton)">
                        <img src="../../static/payment/icon_visa.png" />
                        <span>VISA</span>
                    </div>
                </div>
                <div class="detail">
                    <div class="title">Redemption Code</div>
                    <div class="item" @click="showRedeem">
                        <img src="../../static/payment/icon_enter_code.png" />
                        <span>Enter Code</span>
                    </div>
                </div>
            </div>
        </template>

        <!-- 余额足够 -->
        <template v-else-if="step === 2">
            <div class="balanceTop">
                <img class="balance" src="../../static/img/icon_balance.svg" />
                <div class="text">Balance</div>
                <div class="money">
                    <FontZoom width="300">
                        <img class="icon" :src="currencyInfoData.iconPath" /> <span class="font">{{currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}</span>
                    </FontZoom>
                </div>
                <template v-if="waitRefresh">
                    <div class="waitFont">It may take some time to credit the funds into your account.</div>
                    <div
                        @click="checkWaitInfo"
                        class="waitBtn">
                        <img :class="{ 'icon-refresh-rotate': refreshRotate }" src="../../static/img/icon_refresh.svg" />
                    </div>
                </template>
            </div>
            <div class="balanceBot">
                <div class="l">
                    <div class="neet">You Neet to Pay</div>
                    <div class="money">
                        <FontZoom width="190">
                            <span class="text">{{salePlans.price}} {{ salePlans.currencyInfo.tokenSymbol }}</span>
                        </FontZoom>
                    </div>
                </div>
                <div>
                    <div
                        class="btn"
                        :class="{ disabled: (Number(currencyInfoData.balance) < Number(salePlans.price)) || payDisabled }"
                        @click="pay">
                        Pay Now
                    </div>
                </div>
            </div>
        </template>

        <!-- 余额不足 -->
        <template v-else-if="step === 3">
            <template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
                <div class="balanceInfo">
                    <div class="top">
                        <div class="item title">
                            <img src="../../static/img/icon_deposit.png" />
                            <span>Deposit to Buy</span>
                        </div>
                        <div class="item column">
                            <div class="l">Deposit</div>
                            <div class="r">
                                <FontZoom width="260">
                                    <img :src="currencyInfoData.iconPath" />
                                    <span>{{ (salePlans.price - currencyInfoData.balance) > 0 ? (salePlans.price - currencyInfoData.balance) : 0 }} {{currencyInfoData.tokenSymbol}}</span>
                                </FontZoom>
                            </div>
                        </div>
                        <div class="item column">
                            <div class="l">Network</div>
                            <div class="r">
                                <FontZoom width="260">
                                    <img :src="currencyInfoData.chainInfo.iconPath" />
                                    <span>{{ currencyInfoData.chainInfo.chainName }}</span>
                                </FontZoom>
                            </div>
                        </div>
                        <div class="address">
                            <div class="title">Address</div>
                            <QrCode :tokenChain="currencyInfoData.tokenChain" :rechargeAddress="rechargeAddress" @copy="copyErCode"></QrCode>
                        </div>
                        <div class="notice">
                            <div class="icon"><img src="../../static/img/icon_warning.svg" /></div>
                            <div class="text">Make sure you also selected <Br/><strong>{{ currencyInfoData.chainInfo.chainName }}</strong> <br/>as the Network on the platform where you are withdrawing funds for this deposiit. Otherwise, you'll lose your assets.</div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="balance">
                        <div class="icon">
                            <img src="../../static/img/icon_balance_blue.svg" />
                        </div>
                        <div class="text">
                            <FontZoom width="260">
                                <span>Balance: {{ currencyInfoData.balance }} {{ currencyInfoData.tokenSymbol }}</span>
                            </FontZoom>
                        </div>
                        <div
                            class="refresh"
                            @click="checkCurrencyInfo">
                            <img :class="{ 'icon-refresh-rotate': refreshRotate }" src="../../static/img/icon_refresh.svg" />
                        </div>
                    </div>
                </div>
                <div class="balanceBot">
                    <div class="l">
                        <div class="neet">You Neet to Pay</div>
                        <div class="money">
                            <FontZoom width="190">
                                <span class="text">{{salePlans.price}} {{ salePlans.currencyInfo.tokenSymbol }}</span>
                            </FontZoom>
                        </div>
                    </div>
                    <div>
                        <div
                            class="btn"
                            :class="{ disabled: (Number(currencyInfoData.balance) < Number(salePlans.price)) || payDisabled }"
                            @click="payToken">
                            Pay Now
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode === 'USD'">
                <div class="balanceInfo">
                    <div class="top">
                        <div class="item usd">
                            <div class="l">Payment amount</div>
                            <div class="r fontPayment">${{ usdAmountData.orderAmountValue }}</div>
                        </div>
                        <div class="item usd">
                            <div class="l">Balance</div>
                            <div class="r font">${{ usdAmountData.balance }}</div>
                        </div>
                        <div class="item usd" v-if="Number(usdAmountData.rechargeAmountValue) > 0">
                            <div class="l">{{ usdAmountData.feeDesc }}</div>
                            <div class="r font">${{ usdAmountData.feeAmountValue }}</div>
                        </div>
                        <div class="item usd" v-if="Number(usdAmountData.rechargeAmountValue) > 0">
                            <div class="l">Deposit Amount</div>
                            <div class="r fontDeposit">${{ usdAmountData.rechargeAmountValue }}</div>
                        </div>
                        <div class="deposit" @click="achPay(false, '')">Deposit</div>
                    </div>
                    <div class="line"></div>
                    <div class="balance">
                        <div class="icon">
                            <img src="../../static/img/icon_balance_blue.svg" />
                        </div>
                        <div class="text">Balance: ${{currencyInfoData.balance}}</div>
                        <div
                            class="refresh"
                            @click="checkUsdCurrencyInfo">
                            <img :class="{ 'icon-refresh-rotate': refreshRotate }" src="../../static/img/icon_refresh.svg" />
                        </div>
                    </div>
                </div>
                <div class="balanceBot">
                    <div class="l">
                        <div class="neet">You Neet to Pay</div>
                        <div class="money">
                            <FontZoom width="190">
                                <span class="text">{{ Number(usdAmountData.rechargeAmountValue) > 0 ? usdAmountData.rechargeAmountValue : usdAmountData.orderAmountValue }} {{ salePlans.currencyInfo.tokenSymbol }}</span>
                            </FontZoom>
                        </div>
                    </div>
                    <div>
                        <div
                            class="btn"
                            :class="{ disabled: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
                            @click="payUSD">
                            Pay Now
                        </div>
                    </div>
                </div>
            </template>
        </template>

        <!-- 成功支付 -->
        <template v-else-if="step === 4">
            <div class="payInfo">
                <div class="picShow" v-if="buyData">
                    <div class="tip">Wow, NFT in the Mystery box is</div>
                    <img class="pic" :src="buyData.imagePath" />
                    <div class="name">{{buyData.nftItemName}}</div>
                </div>
            </div>
            <div class="payBtn">
                <button class="btn" @click="goNext">Done</button>
            </div>
        </template>

        <!-- loading -->
        <div class="loading" v-if="loading">
            <van-loading color="#1D9BF0"></van-loading>
        </div>
        <div class="loadingBg" v-if="loading"></div>

        <!-- redeem -->
        <van-popup
            round
            v-model="redeemLayer"
            position="bottom">
            <div class="redeem">
                <div class="tips">Enter Redemption Code</div>
                <div class="footer">
                    <div class="input">
                        <input
                            type="text"
                            ref="input"
                            v-model="redeemStr"
                            @input="textInput"
                            @blur="textBlur"
                            @focus="textFocus"
                            @keydown.enter="redeemPayment" />
                    </div>
                    <button
                        class="enter"
                        :class="{ disabled: !redeemNext }"
                        @click="redeemPayment">
                        Redeem
                    </button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import FontZoom from '../../components/FontZoom.vue';
import QrCode from '../../components/qrcode.vue';
import { postRequest } from '../../http/index';
import { maskUrl } from '../../utils/help';
import { Dialog, Toast } from 'vant';
import Api from '../../http/api';
import Report from '../../log-center/log';

export default {
    name: 'payment',
    data() {
        return {
            step: 1,        // 1: 支付方式列表 2: 余额支付 3: 充值支付 4: 支付完成
            loading: true,
            salePlans: null,
            rechargeAddress: '',
            redeemStr: '',
            redeemNext: false,
            redeemLayer: false,
            buyData: {},
            payDisabled: false,
            waitRefresh: false,
            refreshRotate: false,
            currencyInfoData: {},
            currencyTimer: 0,
            achTimer: 0,
            maskUrlLink: ``,
            usdAmountData: {},
            Report: Report,
        }
    },
    head() {
        return {
            title: 'Buy NFT Mystery Box',
        }
    },
    components: {
        QrCode,
        FontZoom,
    },
    mounted() {
        this.saleInfo()
        this.reportView(Report.pageSource.nftPaymentPage)
    },
    beforeDestroy() {
        clearTimeout(this.currencyTimer);
    },
    methods : {
        saleInfo () {
            postRequest(Api.getNftMysteryBoxSaleInfo, {
                params: {
                    nftProjectId: this.$route.query.nftProjectId
                }
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    this.salePlans = data.salePlans[0];
                    this.getCurrencyInfoByCode();
                    // 获取充值地址
                    if (this.rechargeAddress === '') {
                        this.getAddress()
                    }
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        getCurrencyInfoByCode() {
            postRequest(Api.getCurrencyInfoByCode, {
                params: {
                    currencyCode: this.salePlans.currencyCode
                }
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    this.currencyInfoData = data;
                }
            })
            // 计算金额
            if (this.salePlans.currencyCode === 'USD') {
                // this.salePlans.price
                postRequest(Api.calcRechargePayAmount, {
                    params: {
                        currencyCode: this.salePlans.currencyCode,
                        orderAmountValue: this.salePlans.price,
                        payChannel: 'ach'
                    }
                }).then(res => {
                    let { code, data } = res;
                    if (code === 0) {
                        this.usdAmountData = data;
                    }
                })
            }
        },
        getTokenRechargeRecord() {
            postRequest(Api.syncChainTokenRechargeRecord, {
                params: {
                    currencyCode: this.salePlans.currencyCode
                }
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    if (data.length > 0) {
                        let currencyInfo = data[0];
                        if (currencyInfo.currencyCode == this.currencyInfoData.currencyCode) {
                            this.currencyInfoData.balance = currencyInfo.balance;
                        }
                    } else {
                        this.currencyInfoData.balance = 0
                    }
                }
            })
        },
        currencyInfoTimer() {
            clearTimeout(this.currencyTimer);
            this.currencyTimer = setTimeout(() => {
                this.currencyInfoTimer()
                this.getCurrencyInfoByCode()
            }, 10000);
        },
        checkUsdCurrencyInfo() {
            if (!this.refreshRotate) {
                this.refreshRotate = true;
                this.getCurrencyInfoByCode()
                setTimeout(() => {
                    this.refreshRotate = false;
                }, 1000)
        
                // report
                this.reportDepositCashPageClick(Report.objectType.refreshBalanceButton)
            }
        },
        checkCurrencyInfo() {
            if (!this.refreshRotate) {
                this.refreshRotate = true;
                this.getTokenRechargeRecord()
                setTimeout(() => {
                    this.refreshRotate = false;
                }, 1000)

                // report
                this.reportDepositTokenPageClick(Report.objectType.refreshBalanceButton)
            }
        },
        checkWaitInfo(isReport = true) {
            if (!this.refreshRotate) {
                this.refreshRotate = true;
                if (this.salePlans.currencyCode === 'USD') {
                    this.getCurrencyInfoByCode()
                } else {
                    this.getTokenRechargeRecord()
                }
                setTimeout(() => {
                    this.refreshRotate = false;
                }, 1000)
            }
            if (isReport) {
                this.reportBalanceRefresh()
            }
        },
        showRedeem() {
            this.redeemStr = '';
            this.redeemNext = false;
            this.redeemLayer = true;
            this.$nextTick(() => {
                this.$refs.input.focus();
            })
            this.reportView(Report.pageSource.nftRedeemPage)
            this.reportPaymentBtnClick(Report.objectType.redeemButton)
        },
        textInput(e) {
            let len = 16
            let str = this.redeemStr.replace(/[^a-zA-Z0-9]/g, '')
                str = str.toUpperCase();
                str = str.slice(0, len);
            
            // set
            this.redeemStr = str;
            this.redeemNext = str !== '' && str.length === len;
        },
        textBlur(e) {
            let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/)
            if (isiOS) {
                setTimeout(() => {
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
                }, 100)
            }
        },
        textFocus(e) {
            let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/)
            if (isiOS) {
                setTimeout(() => {
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
                }, 100)
            }
        },
        redeemPayment() {
            if (!this.redeemNext) return;

            let params = {
                redeemCode: this.redeemStr,
                nftProjectId: this.$route.query.nftProjectId,
            }

            this.redeemNext = false;
            postRequest(Api.redeemNft, {
                params
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    this.redeemLayer = false;
                    if (data.length > 0) {
                        this.buyData = data[0];
                    }
                    // 购买成功
                    this.step = 4;
                } else {
                    this.payError(code)
                }
            }).finally(() => {
                this.redeemNext = true;
            })

            this.reportRedeemBtnClick()
        },
        getAddress() {
            postRequest(Api.getTokenRechargeAddress, {
                params: {
                    tokenChain: this.salePlans.currencyInfo?.tokenChain
                }
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    this.rechargeAddress = data.rechargeAddress
                    this.maskUrlToLink()
                }
            })
        },
        maskUrlToLink() {
            // MetaMask Link
            let url;
            let price = Number(this.salePlans.price) > Number(this.currencyInfoData.balance) ? Number(this.salePlans.price) - Number(this.currencyInfoData.balance) : Number(this.salePlans.price)
            if (this.salePlans.currencyInfo?.contractAddress) {
                // 代币
                url = maskUrl({
                    target_address: this.salePlans.currencyInfo.contractAddress,
                    parameters: {
                        address: this.rechargeAddress,
                        uint256: `${price}e${this.salePlans.currencyInfo?.decimalLength || 18}`
                    }
                }, false)
            } else {
                // 主币
                url = maskUrl({
                    target_address: this.rechargeAddress,
                    parameters: {
                        value: `${price}e${this.salePlans.currencyInfo?.decimalLength || 18}`
                    }
                })
            }
            this.maskUrlLink = url;
        },
        goNext() {
            this.$router.push({
                path: `/nft/${this.$route.query.nftProjectId}/${this.$route.query.account}/show`,
            })
        },
        pay(isReport = true) {
            if (this.payDisabled || Number(this.currencyInfoData.balance) < Number(this.salePlans.price)) return;

            this.payDisabled = true;
            postRequest(Api.payNftMysteryBoxWithBalance, {
                params: {
                    nftProjectId: this.$route.query.nftProjectId,
                    salePlanId: this.salePlans.salePlanId,
                }
            }).then(res => {
                let { code, data } = res;
                if (code == 0) {
                    if (data && data.buyItems.length > 0) {
                        this.buyData = data.buyItems[0];
                    }
                    // 购买成功
                    this.step = 4;
                } else {
                    this.payError(code)
                }
            }).finally(() => {
                this.payDisabled = false;
            })

            // report
            if (isReport) {
                this.reportBalanceBuy()
            }
        },
        payUSD() {
            if (Number(this.usdAmountData.rechargeAmountValue) <= 0) {
                this.pay(false)
                this.reportDepositCashPageClick(Report.objectType.purchaseNftButton)
            }
        },
        payToken() {
            if (Number(this.currencyInfoData.balance) >= Number(this.salePlans.price)) {
                this.pay(false)
                this.reportDepositTokenPageClick(Report.objectType.purchaseNftButton)
            }
        },
        payError(code) {
            let msg;
            switch (code.toString()) {
                case '5001':
                    msg = 'nft project not exist'
                    break;
                case '5002':
                    msg = 'nft project not available'
                    break
                case '5101':
                    msg = 'nft sale plan not exist'
                    break
                case '5102':
                    msg = 'nft sold out'
                    break
                case '5103':
                    msg = 'Purchase limit reached'
                    break
                case '5104':
                case '5105':
                case '5106':
                    msg = 'Invalid redemption code'
                    break;
                default:
                    msg = 'Invalid redemption code, please try again'
                    break;
            }
            // Dialog
            Dialog({
                message: msg,
                confirmButtonText: 'OK',
                confirmButtonColor: '#1D9BF0',
            });
        },
        deNetPay() {
            if (!this.salePlans) return;

            let where, pageSource;
            if (this.salePlans.currencyCode === 'USD') {
                where = Number(this.usdAmountData.rechargeAmountValue) > 0
                pageSource = Report.pageSource.nftDepositCashPage
            } else {
                where = Number(this.salePlans.price) > Number(this.currencyInfoData.balance)
                pageSource = Report.pageSource.nftDepositTokenPage
            }

            if (where) {
                // 余额不够
                this.step = 3;
                this.currencyInfoTimer();
                // Report
                this.reportView(pageSource);
            } else {
                // 余额足够
                this.step = 2;
                this.reportView(Report.pageSource.nftBalancePage);
            }
            this.reportPaymentBtnClick(Report.objectType.denetPayButton)
        },
        maskPay() {
            if (Number(this.salePlans.price) > Number(this.currencyInfoData.balance)) {
                this.step = 2;
                this.waitRefresh = true;
                this.currencyInfoTimer();
                Dialog({
                    message: `Was the pament successful?`,
                    showCancelButton: true,
                    confirmButtonText: 'YES',
                    confirmButtonColor: '#1D9BF0',
                    cancelButtonText: 'NO',
                    cancelButtonColor: '#1D9BF0',
                }).then(() => {
                    this.checkWaitInfo(false)
                }).catch(() => {
                    this.checkWaitInfo(false)
                });
                this.reportView(Report.pageSource.nftPaymentBalancePage);
            } else {
                this.step = 2;
                this.reportView(Report.pageSource.nftBalancePage);
            }

            this.reportPaymentBtnClick(Report.objectType.metamaskPayButton)
        },
        achPay(modifyStep = true, objectType = '') {
            if (Number(this.usdAmountData.rechargeAmountValue) > 0) {
                if (modifyStep) {
                    this.step = 2;
                    this.reportView(Report.pageSource.nftPaymentBalancePage);
                }
                this.waitRefresh = true;
                this.currencyInfoTimer();
                Dialog({
                    message: `Was the pament successful?`,
                    showCancelButton: true,
                    confirmButtonText: 'YES',
                    confirmButtonColor: '#1D9BF0',
                    cancelButtonText: 'NO',
                    cancelButtonColor: '#1D9BF0',
                }).then(() => {
                    this.checkWaitInfo(false)
                }).catch(() => {
                    this.checkWaitInfo(false)
                });

                this.$nextTick(() => {
                    let win = window.open();
                        win.opener = null;
                        win.location.href = `${location.protocol}//${location.host}/payment_ach/${this.usdAmountData.rechargeAmountValue}`;
                    this.achTimer = setInterval(() => {
                        console.log('pay')
                        if (win && win.closed) {
                            console.log('done')
                            clearInterval(this.achTimer);
                        }
                    }, 500);
                })
            } else {
                if (modifyStep) {
                    this.step = 2;
                    this.reportView(Report.pageSource.nftBalancePage);
                }
            }

            if (objectType !== '') {
                this.reportPaymentBtnClick(objectType)
            } else {
                this.reportDepositCashPageClick(Report.objectType.depositButtion)
            }
        },
        copyErCode() {
            this.reportDepositTokenPageClick(Report.objectType.copyButtion)
        },

        reportView(pageSource) {
            Report.log({
                pageSource,
                params: {
                    eventData: {
                        businessType: Report.businessType.pageView,
                    },
                    extParams: {
                        userAgent: window.navigator.userAgent,
                    }
                }
            })
        },
        reportPaymentBtnClick(objectType) {
            Report.log({
                pageSource: Report.pageSource.nftPaymentPage,
                params: {
                    eventData: {
                        objectType,
                        businessType: Report.businessType.buttonClick,
                    },
                    extParams: {
                        userAgent: window.navigator.userAgent,
                    }
                }
            })
        },
        reportRedeemBtnClick() {
            Report.log({
                pageSource: Report.pageSource.nftRedeemPage,
                params: {
                    eventData: {
                        objectType: Report.objectType.redeemButton,
                        businessType: Report.businessType.buttonClick,
                    },
                    extParams: {
                        userAgent: window.navigator.userAgent,
                    }
                }
            })
        },
        reportDepositCashPageClick(objectType) {
            Report.log({
                pageSource: Report.pageSource.nftDepositCashPage,
                params: {
                    eventData: {
                        objectType,
                        businessType: Report.businessType.buttonClick,
                    },
                    extParams: {
                        userAgent: window.navigator.userAgent,
                    }
                }
            })
        },
        reportDepositTokenPageClick(objectType) {
            Report.log({
                pageSource: Report.pageSource.nftDepositTokenPage,
                params: {
                    eventData: {
                        objectType,
                        businessType: Report.businessType.buttonClick,
                    },
                    extParams: {
                        userAgent: window.navigator.userAgent,
                    }
                }
            })
        },
        reportBalanceRefresh() {
            let pageSource = this.waitRefresh ? Report.pageSource.nftPaymentBalancePage : Report.pageSource.nftBalancePage;

            Report.log({
                pageSource: pageSource,
                params: {
                    eventData: {
                        objectType: Report.objectType.refreshBalanceButton,
                        businessType: Report.businessType.buttonClick,
                    },
                    extParams: {
                        userAgent: window.navigator.userAgent,
                    }
                }
            })
        },
        reportBalanceBuy() {
            let pageSource = this.waitRefresh ? Report.pageSource.nftPaymentBalancePage : Report.pageSource.nftBalancePage;

            Report.log({
                pageSource: pageSource,
                params: {
                    eventData: {
                        objectType: Report.objectType.purchaseNftButton,
                        businessType: Report.businessType.buttonClick,
                    },
                    extParams: {
                        userAgent: window.navigator.userAgent,
                    }
                }
            })
        },
    }
}
</script>

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

.payment {
    width: 100%;
    height: 100%;
}
.moneyInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 90px;
    border-bottom: solid 8px rgba($color: #f5f5f5, $alpha: .6);
    .tips {
        font-size: 12px;
        font-weight: 500;
    }
    .money {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        .icon {
            overflow: hidden;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;
            background-color: #f5f5f5;
        }
        .info {
            color: #000;
            font-size: 20px;
            font-weight: 700;
            &.usd {
                margin-top: -5px;
            }
        }
    }
}
.payList {
    overflow-y: auto;
    height: calc(100% - 90px);
    .detail {
        padding: 18px 16px;
        .title {
            color: #ADADAD;
            height: 26px;
            font-size: 12px;
            font-weight: 500;
        }
        .item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            height: 50px;
            margin-bottom: 14px;
            border-radius: 100px;
            border: 1px solid #ECECEC;
            &:last-child {
                margin-bottom: 0;
            }
            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
            }
            &.denet {
                flex-direction: column;
                img {
                    margin-top: -6px;
                }
            }
            .wallet {
                width: 100%;
                overflow: hidden;
                color: #ADADAD;
                font-size: 11px;
                text-align: center;
                margin-top: -2px;
            }
            .maskLink {
                position: absolute;
                z-index: 10;
                width: 100%;
                height: 100%;
            }
        }
    }
}

.loading {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loadingBg {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000, $alpha: .1);
}

.redeem {
    padding: 18px 16px 38px;
    .tips {
        height: 31px;
        font-size: 15px;
        font-weight: 500;
    }
    .footer {
        display: flex;
        justify-content: space-between;
        .input {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(100% - 93px);
            height: 45px;
            border-radius: 5px;
            border: 1px solid #E0E0E0;
            input {
                width: 94%;
                border: 0;
                outline: 0;
            }
        }
        .enter {
            width: 83px;
            height: 45px;
            border: 0;
            padding: 0;
            color: #ffffff;
            font-size: 17px;
            font-weight: 500;
            border-radius: 5px;
            background: #1D9BF0;
            &.disabled {
                background: #DEDEDE;
            }
        }
    }
}

.payInfo {
    width: 100%;
    height: calc(100% - 88px);
    .picShow {
        padding: 54px 48px;
        .tip {
            height: 44px;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }
        .pic {
            display: block;
            margin: auto;
            width: 280px;
            height: 280px;
            border-radius: 3px;
            margin-bottom: 20px;
        }
        .name {
            font-size: 18px;
            font-weight: 600;
            line-height: 21px;
            text-align: center;
        }
    }
}
.payBtn {
    padding: 0 16px 38px;
    .btn {
        width: 100%;
        height: 50px;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 700;
        border-radius: 50px;
        background: #1D9BF0;
    }
}

.balanceTop {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(100% - 100px);
    background-color: #f5f5f5;
    .balance {
        width: 66px;
        height: 66px;
        margin-bottom: 6px;
    }
    .text {
        font-size: 15px;
        font-weight: 500;
        line-height: 18px;
        color: #9D9D9D;
    }
    .money {
        font-size: 22px;
        font-weight: 700;
        line-height: 26px;
        margin-top: 6px;
        .icon {
            width: 22px;
            height: 22px;
            margin-right: 6px;
        }
        .font {
            color: #000;
        }
    }
}
.balanceInfo {
    overflow-y: auto;
    height: calc(100% - 100px);
    background-color: #f5f5f5;
    .top {
        padding: 0 16px 17px 16px;
        background-color: #ffffff;
        .item {
            display: flex;
            align-items: center;
            height: 54px;
            border-bottom: solid 1px #F2F2F2;
            &.title {
                font-size: 16px;
                font-weight: 600;
                line-height: 19px;
                img {
                    width: 26px;
                    height: 26px;
                    margin-right: 6px;
                }
            }
            &.column {
                color: rgba($color: #5E5E5E, $alpha: .7);
                font-size: 14px;
                font-weight: 400;
                .l {
                    width: 70px;
                }
                .r {
                    img {
                        width: 21px;
                        height: 21px;
                        margin-right: 4px;
                    }
                    span {
                        color: rgba($color: #5E5E5E, $alpha: .7);
                    }
                }
            }
            &.usd {
                font-size: 14px;
                font-weight: 500;
                justify-content: space-between;
                .fontPayment {
                    font-size: 18px;
                    font-weight: 600;
                }
                .font {
                    color: #9A9A9A;
                    font-size: 16px;
                    font-weight: 500;
                }
                .fontDeposit {
                    color: #1D9BF0;
                    font-size: 18px;
                    font-weight: 600;
                }
            }
        }
        .deposit {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 54px;
            color: #ffffff;
            font-weight: 600;
            font-size: 18px;
            margin-top: 16px;
            border-radius: 54px;
            background: #1D9BF0;
        }
        .address {
            color: rgba($color: #5E5E5E, $alpha: .7);
            .title {
                height: 42px;
                font-size: 14px;
                font-weight: 400;
                line-height: 42px;
            }
        }
        .notice {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            margin-top: 12px;
            border-radius: 8px;
            background: #F9F6EE;
            .icon {
                width: 20px;
                margin-right: 10px;
                img {
                    width: 20px;
                    height: 20px;
                }
            }
            .text {
                flex: 1;
                color: rgba($color: #5E5E5E, $alpha: .7);
                font-size: 14px;
                font-weight: 400;
                line-height: 19px;
                word-break: break-all;
                strong {
                    color: #FF0000;
                    font-weight: bold;
                }
            }
        }
    }
    .line {
        height: 8px;
    }
    .balance {
        display: flex;
        align-items: center;
        padding: 0 16px;
        height: 54px;
        background-color: #ffffff;
        .icon {
            width: 24px;
            margin-right: 6px;
            img {
                width: 24px;
            }
        }
        .text {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
            line-height: 17px;
            span {
                color: #000;
                margin-right: auto;
            }
        }
        .refresh {
            width: 24px;
            height: 24px;
            img {
                width: 24px;
                transform-origin: center center;
            }
        }
    }
}
.balanceBot {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 17px 16px 38px;
    border-top: solid 1px #ECECEC;
    .l {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .neet {
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
    }
    .money {
        height: 22px;
        line-height: 22px;
        font-size: 18px;
        font-weight: 700;
        margin-top: 4px;
        .text {
            color: #000;
            margin-right: auto;
        }
    }
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 46px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
        line-height: 21px;
        border-radius: 46px;
        background: #1D9BF0;
        &.disabled {
            background: #D2D2D2;
        }
    }
}

.waitFont {
    margin-top: 16px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    text-align: center;
}
.waitBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 50px auto 0;
    border-radius: 50%;
    background-color: #ffffff;
    img {
        width: 24px;
        height: 24px;
    }
}

.icon-refresh-rotate {
    transform: rotate(360deg);
    transition-duration: 1s;
}
</style>