de-net/src/view/popup/currency-detail.vue

<template>
  <div class="currency-detail-page">
    <v-head :title="currencyInfo.currencyName" 
            :show_more="false"
            :show_refresh="true"
            :show_list="true"
            @on-refresh="onRefresh" />
    <div class="top">
      <img
        class="icon-currency"
        :src="currencyInfo.iconPath"/>
      <div class="amount">
        {{currencyInfo.balance}} {{currencyInfo.currencyName}}
        <div class="final">${{currencyInfo.usdEstimateBalance}}</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"></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 { syncChainTokenRechargeRecord } from "@/http/publishApi";

import VHead from '@/view/popup/components/head.vue'
import currencySelect from "@/view/components/currency-select.vue";


let currenciesData = ref([]);
let currencyInfo = ref({});
let showCurrencySelect = ref(false);

const selectCurrency = (params) => {
    showCurrencySelect.value = false;

    currencyInfo.value = {
      ...params,
      totalBalance: currencyInfo.value.totalBalance,
      totalUsdEstimateBalance: currencyInfo.value.totalUsdEstimateBalance
    }
    console.log(currencyInfo.value)
}

// 点击提现
const clickWithdraw = () => {
    Report.reportLog({
        pageSource: Report.pageSource.denetHomePage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.withdrawButton
    });
    withdrawHandle(currencyInfo.value);
}

let withdraw_info = inject('withdraw_info')
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')
  }
}

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

    depositHandle(currencyInfo.value);
}

let top_up_info = inject('top_up_info');
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 = () => {
  // 刷新余额接口
  asyncTokenRechRecord(currencyInfo.value, (res) => {
    if(res.code == 0 && res.data && res.data.length) {
        let currencyData = res.data[0];
        if(currencyData.currencyCode == currencyInfo.value.currencyCode) {
          currencyInfo.value.balance = currencyData.balance;
          currencyInfo.value.usdEstimateBalance = currencyData.usdEstimateBalance;
        }
    }
  })
};

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

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(currenciesData.value.length > 1) {
      showCurrencySelect.value = true;
    }
})
</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;
      .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>