de-net/src/view/popup/top-up/home.vue

<template>
    <!-- 公共组件 -->
    <div class="info">
        <v-head :title="'Deposit'" :show_more="true" :show_help="false" :back_url="'/'"></v-head>
        <template v-if="showCurrencySelect">
            <div class="selectDiv">
                <currency-select 
                    ref="currencySelectDom"
                    :list="tempCurrentCurrencyList"
                    @selectCurrency="selectCurrencyAfter">
                </currency-select>
            </div>
            <div class="selectBg" @click="showCurrencySelect = false"></div>
        </template>
        <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency" :page="'top-up'"></currency-list>
    </div>

</template>

<script setup>
import VHead from '@/view/popup/components/head.vue'
import CurrencyList from "@/view/components/currency-list.vue";
import currencySelect from "@/view/components/currency-select.vue";
import { inject, onMounted, ref } from 'vue'
import router from "@/router/popup.js";
import Report from "@/log-center/log";

let top_up_info = inject('top_up_info')
let showCurrencySelect = ref(false)
let tempCurrentCurrencyList = ref([])

function selectCurrency(params) {
    tempCurrentCurrencyList.value = params;
    if (params.length > 1) {
        showCurrencySelect.value = true;
    } else {
        selectCurrencyAfter(params[0])
    }
}
function selectCurrencyAfter(_params) {
    top_up_info.token = _params.currencyName || ''
    top_up_info.token_chain = _params.tokenChain 
    top_up_info.chainInfo = _params.chainInfo
    // top_up_info.token_chain = 'BNB Smart Chain (BEP20)'
    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')
    showCurrencySelect.value = false
    router.push({ path: '/top-up/info'});
}

onMounted(() => {
    Report.reportLog({
        pageSource: Report.pageSource.denetTopupSelector,
        businessType: Report.businessType.pageView,
    });
})
</script>


<style lang='scss' scoped>
.info {
    height: 100%;
    overflow: hidden;
}
.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: scroll;
}
.selectBg {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.6);
}
</style>