de-net/src/view/popup/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" />
    <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">
      <div class="btn deposit-btn"
          v-if="currencyInfo.currencyCode != 'USD'"
          @click="clickDeposit">Deposit</div>
      <div class="btn withdrawal-btn" @click="clickWithdraw">Withdrawal</div>
    </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>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive } from "vue";
import router from "@/router/popup.js";
import Report from "@/log-center/log";
import { getStorage } from "@/uilts/help";

import { getCurrencyInfoBySymbol } from "@/http/publishApi";

import VHead from '@/view/popup/components/head.vue'
import currencySelect from "@/view/components/currency-select.vue";
import { getBit } from "@/uilts/help";

let currenciesData = ref([]);
let currencyInfo = ref({
  totalBalance: '',
  tokenSymbol: ''
});
let showCurrencySelect = ref(false);

let currencyOpertionType = '';



const selectCurrency = (params) => {
    showCurrencySelect.value = false;
    if(currencyOpertionType == 'WITHDRAW') {
      withdrawHandle(params);
    } else if(currencyOpertionType == 'DEPOSIT') {
      depositHandle(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;
  if (_params.currencyCode == 'USD') {
      withdraw_info.currency_code = _params.currencyCode
      router.push('/withdraw/paypal')
  } else {
      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 || 'BNB Chain'
      withdraw_info.currency_code = _params.currencyCode
      withdraw_info.icon_token = _params.iconPath || ''
      withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')
      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){
      depositHandle(currenciesData.value[0]);
    }
}

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 onRefresh = () => {
  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;
        }
      }
    }
  })
};

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
      };
      console.log(currencyInfo.value )
    }
})
</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;
    }
  }


  .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>