de-net-hotload/src/pages/currency/detail.vue

<template>
    <div class="currency-detail-page">
        <v-head
            :title="currencyInfo.tokenSymbol"
            :show_more="false"
            :show_refresh="true"
            :show_list="true"
            :transactionsRouterParams="{ backUrl: 'back' }"
            @on-refresh="onRefresh"
            @onBack="clickBack">
        </v-head>
        <div class="top">
            <img class="icon-currency" :src="currencyInfo.iconPath" />
            <div class="amount">
                <div class="balance"
                    :class="{ 'direction-column': (currencyInfo.totalBalance.length + currencyInfo.tokenSymbol.length) > 15 }">
                    <a-tooltip :title="currencyInfo.totalBalance">
                        {{ getBit(currencyInfo.totalBalance) }}
                    </a-tooltip>
                    <template v-if="currencyInfo.totalBalance.length + currencyInfo.tokenSymbol.length < 16">
                        &nbsp;&nbsp;
                    </template>
                    <span class="symbol">
                        {{ currencyInfo.tokenSymbol }}
                    </span>
                </div>
                <div class="final">
                    <a-tooltip :title="'$' + currencyInfo.totalUsdEstimateBalance">
                        ${{ getBit(currencyInfo.totalUsdEstimateBalance) }}
                    </a-tooltip>
                </div>
            </div>
        </div>
        <div class="bottom">
            <template v-if="showSendBtn">
                <div class="btn send-btn" v-if="enableRecharge == 1" @click="showSendGiveawayDialog(currencyInfo)">
                    <img :src="require('@/assets/svg/icon-send-giveaway.svg')" />
                    Send Giveaway
                </div>
                <div class="btn-wrapper">
                    <div class="button left" v-if="enableRecharge == 1" @click="clickDeposit">Deposit</div>
                    <div class="button" v-if="enableWithdraw == 1" @click="clickWithdraw">Withdrawal</div>
                </div>
            </template>
            <template v-else>
                <div class="btn deposit-btn" v-if="enableRecharge == 1" @click="clickDeposit">Deposit</div>
                <div class="btn withdrawal-btn" v-if="enableWithdraw == 1" @click="clickWithdraw">Withdrawal</div>
            </template>
        </div>

        <template v-if="showCurrencySelect">
            <div class="selectDiv">
                <currency-select ref="currencySelectDom" :list="currenciesData" @selectCurrency="selectCurrency">
                </currency-select>
            </div>
            <div class="selectBg" @click="showCurrencySelect = false"></div>
        </template>
        <input-action-sheet :visible="showDepositInput" title="Enter the USD amount to be deposited" :desc="depositDesc"
            position="absolute" @onInput="onDepositAmountInput" @cancel="cancelDeposit" @confirm="confirmDeposit">
        </input-action-sheet>
    </div>
</template>
  
<script setup>
import { ref, onMounted, inject, onBeforeUnmount } from "vue";
import { useRouter } from 'vue-router';
import Report from "@/log-center/log";
import { getCurrencyInfoBySymbol, syncChainTokenRechargeRecord } from "@/http/publishApi";
import { setChromeStorage, chromeExtensionUrl } from "@/uilts/chromeExtension"
import messageCenter from "@/uilts/messageCenter";
import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
import VHead from '@/components/v-head.vue'
import currencySelect from "@/components/currency-select.vue";
import inputActionSheet from "@/components/input-action-sheet.vue";
import { getBit } from "@/uilts/help";
import { payCalcFee } from "@/http/pay";

let currenciesData = ref([]);
let currencyInfo = ref({
    totalBalance: '',
    tokenSymbol: ''
});
let showCurrencySelect = ref(false);
let router = useRouter();
let currencyOpertionType = '';
let showSendBtn = ref(true);
let enableRecharge = ref(1);
let enableWithdraw = ref(1);
let showDepositInput = ref(false);
let reqCalcIng = false;
let depositDesc = ref('');
let finalAmountData = ref({});

const selectCurrency = (params) => {
    showCurrencySelect.value = false;
    let { enableRecharge, enableWithdraw } = params;

    if (currencyOpertionType == 'WITHDRAW') {
        if (enableWithdraw != 1) {
            return;
        }
        withdrawHandle(params);
    } else if (currencyOpertionType == 'DEPOSIT') {
        if (enableRecharge != 1) {
            return;
        }
        depositHandle(params);
    } else if (currencyOpertionType == 'SEND') {
        if (enableRecharge != 1) {
            return;
        }
        showSendGiveawayDialog(params);
    }
}

let withdraw_info = inject('withdraw_info')
// 点击提现
const clickWithdraw = () => {
    Report.reportLog({
        pageSource: Report.pageSource.denetHomePage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.withdrawButton
    });

    if (currenciesData.value.length > 1) {
        showCurrencySelect.value = true;
        currencyOpertionType = "WITHDRAW";
    } else if (currenciesData.value.length == 1) {
        withdrawHandle(currenciesData.value[0]);
    }
}

const withdrawHandle = (_params) => {
    withdraw_info.chainInfo = _params.chainInfo;
    withdraw_info.source = 'home'
    withdraw_info.balance = _params.balance
    withdraw_info.token_symbol = _params.tokenSymbol || ''
    withdraw_info.currency_name = _params.currencyName || ''
    withdraw_info.token_chain = _params.tokenChain || ''
    withdraw_info.currency_code = _params.currencyCode
    withdraw_info.icon_token = _params.iconPath || ''
    withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')

    if (_params.currencyCode == 'USD') {
        withdraw_info.currency_code = _params.currencyCode
        withdraw_info.paypal.amount_value = _params.balance
        router.push('/withdraw/paypal')
    } else {
        console.log(withdraw_info.chainInfo.iconPath)
        router.push('/withdraw/info')
    }
}

let top_up_info = inject('top_up_info');

const clickDeposit = () => {
    Report.reportLog({
        pageSource: Report.pageSource.denetHomePage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.topupButton
    });

    if (currenciesData.value.length > 1) {
        showCurrencySelect.value = true;
        currencyOpertionType = "DEPOSIT";
    } else if (currenciesData.value.length == 1) {
        let currencyInfo = currenciesData.value[0];
        if (currencyInfo.currencyCode == 'USD') {
            // 法币充值
            showDepositInput.value = true;
            setDepositDesc();

        } else {
            depositHandle(currencyInfo);
        }
    }
}

const setDepositDesc = async () => {
    let res = await payCalcFee({
        params: {
            amountValue: 0,
            currencyCode: currencyInfo.value.currencyCode,
            payChannel: 'ach',
        },
    });
    if (res.code == 0) {
        let { feeDesc } = res.data;
        depositDesc.value = `${feeDesc}`;
    }
}

const depositHandle = (_params) => {
    top_up_info.token = _params.currencyName || ''
    top_up_info.token_chain = _params.tokenChain
    top_up_info.token_symbol = _params.tokenSymbol || ''
    top_up_info.currency_code = _params.currencyCode
    top_up_info.icon_token = _params.iconPath || ''
    top_up_info.icon_net = require('@/assets/svg/icon-BNB.svg')
    top_up_info.chainInfo = {
        ..._params.chainInfo
    };

    router.push('/top-up/info');
};


const asyncTokenRechRecord = (currencyCode = '', cb) => {
    syncChainTokenRechargeRecord({
        params: {
            currencyCode: currencyCode
        }
    }).then(res => {
        cb && cb(res.data)
    }).catch(() => {
        cb && cb()
    })
}

const onRefresh = () => {
    asyncTokenRechRecord('', () => {
        getCurrencyInfoBySymbol({
            params: {
                symbol: currencyInfo.value.tokenSymbol
            }
        }).then(res => {
            if (res.code == 0) {
                if (res.data && res.data.currencyCategories && res.data.currencyCategories.length) {
                    let data = res.data.currencyCategories[0].data;
                    if (data.length) {
                        let { totalBalance = '', totalUsdEstimateBalance = '' } = data[0] || {};
                        currencyInfo.value.totalBalance = totalBalance;
                        currencyInfo.value.totalUsdEstimateBalance = totalUsdEstimateBalance;
                    }
                }
            }
        });
    })
};

const showSendGiveawayDialog = (params = {}) => {
    if (currenciesData.value.length > 1 && currencyOpertionType != 'SEND') {
        showCurrencySelect.value = true;
        currencyOpertionType = "SEND";
    } else {
        setLocalSelectCurrencyInfo(params)
        setTimeout(() => {
            // chrome.runtime.sendMessage({
            //     actionType: "POPUP_SHOW_DENET_PUBLISH_DIALOG",
            //     data: {}
            // });
        }, 600)
        currencyOpertionType = '';
    }
};

const setLocalSelectCurrencyInfo = (params = {}) => {
    setChromeStorage({ selectCurrencyInfo: JSON.stringify(params) })
}

const cancelDeposit = () => {
    showDepositInput.value = false;
}

const confirmDeposit = () => {
    if (reqCalcIng) {
        return;
    }

    showDepositInput.value = false;
    depositDesc.value = '';

    let achPayInfo = {
        amountValue: finalAmountData.value.finalAmountValue
    };
    let guideUrl = chromeExtensionUrl + ('iframe/ach-cashier.html');
    setChromeStorage({ achPayInfo: JSON.stringify(achPayInfo) });
    let str = window.location.hash + '&refresh=true';
    let path = str.substring(1, str.length);
    setChromeStorage({
        achPayData: JSON.stringify({
            form: 'popupPage',
            path
        })
    });

    chrome.tabs.create({
        url: guideUrl
    });
}

const onDepositAmountInput = async (params = {}) => {
    let { inputVal } = params;
    reqCalcIng = true;
    if (inputVal === '') {
        inputVal = 0;
    }
    let res = await payCalcFee({
        params: {
            amountValue: inputVal,
            currencyCode: currencyInfo.value.currencyCode,
            payChannel: 'ach',
        },
    });
    reqCalcIng = false;
    if (res.code == 0) {
        let { feeAmountValue, feeDesc } = res.data;
        finalAmountData.value = res.data;
        if (inputVal === 0) {
            depositDesc.value = `${feeDesc}`;
        } else {
            depositDesc.value = `Charge Fee：${feeAmountValue} USD（${feeDesc}）`;
        }
    }
}

const clickBack = () => {
    messageCenter.send({
        actionType: MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU,
        data: {
            showMenu: true,
        }
    })
}

const onMessage = () => {
    // chrome.runtime.onMessage.addListener(msgListener)
}

// const msgListener = (req) => {
//     let refresh = false;
//     switch (req.actionType) {
//         case 'CONTENT_POPUP_PAGE_SHOW':
//             refresh = router.currentRoute.value.query;
//             if (refresh && currencyInfo.value.tokenSymbol) {
//                 onRefresh();
//             }
//             break;
//     }
// }

onMounted(() => {
    let { params = '{}' } = router.currentRoute.value.query;

    let { currencies = [], totalBalance = 0, totalUsdEstimateBalance = 0 } = JSON.parse(params);

    currenciesData.value = currencies;
    if (currencies.length) {
        currencyInfo.value = {
            ...currencies[0],
            totalBalance,
            totalUsdEstimateBalance
        };
        if (currencies.length == 1) {
            enableRecharge.value = currencyInfo.value.enableRecharge;
            enableWithdraw.value = currencyInfo.value.enableWithdraw;
        }
    }
    if (window.location.pathname.indexOf('/home.html') > -1) {
        showSendBtn.value = false;
    } else {
        showSendBtn.value = true;
    }
    onMessage();
})

onBeforeUnmount(() => {
    // chrome.runtime.onMessage.removeListener(msgListener);
})

</script>
  

<style lang='scss' scoped>
.currency-detail-page {
    width: 100%;
    height: 100%;
    position: relative;

    .top {
        height: calc(100% - 212px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .icon-currency {
            width: 100px;
            margin-bottom: 30px;
        }

        .amount {
            font-weight: 700;
            font-size: 28px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100%;

            .balance {
                padding: 0 18px;
                box-sizing: border-box;
                width: 100%;
                word-break: break-word;
                display: flex;
                align-items: center;
                justify-content: center;

                .symbol {
                    word-break: break-all;
                }
            }

            .direction-column {
                flex-direction: column;
            }

            .final {
                margin-top: 9px;
                font-weight: 500;
                font-size: 22px;
                color: #a2a2a2;
                text-align: center;
            }
        }
    }

    .bottom {
        height: 162px;
        padding: 0 20px;
        box-sizing: border-box;

        .btn {
            width: 100%;
            height: 57px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 17px;
            border-radius: 100px;
            cursor: pointer;
        }

        .deposit-btn {
            margin-bottom: 18px;
            background: #1d9bf0;
            color: #fff;
        }

        .withdrawal-btn {
            background: rgba(244, 244, 244, 0.01);
            border: 1px solid #d7e8f4;
            box-sizing: border-box;
            color: #1d9bf0;
        }

        .send-btn {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 18px;
            background: #1d9bf0;
            color: #fff;

            img {
                width: 19px;
                height: 19px;
                margin-right: 8px;
            }
        }

        .btn-wrapper {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .button {
                flex: 1;
                height: 50px;
                border: 1px solid #d7e8f4;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 16px;
                border-radius: 100px;
                box-sizing: border-box;
                color: #1D9BF0;
                cursor: pointer;
            }

            .left {
                margin-right: 20px;
            }
        }
    }


    .selectDiv {
        position: absolute;
        z-index: 1000;
        width: 100%;
        max-height: 480px;
        padding-bottom: 30px;
        left: 0;
        bottom: 0;
        background-color: #fff;
        border-radius: 20px 20px 0 0;
        overflow-y: auto;
    }

    .selectBg {
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.6);
    }
}
</style>