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'
            }"
            back_url="/"
            @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">
      <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, reactive, onBeforeUnmount } from "vue";
import router from "@/router/popup.js";
import Report from "@/log-center/log";
import { getStorage } from "@/uilts/help";

import { getCurrencyInfoBySymbol, syncChainTokenRechargeRecord } from "@/http/publishApi";
import {setChromeStorage} from "@/uilts/chromeExtension"

import VHead from '@/view/popup/components/head.vue'
import currencySelect from "@/view/components/currency-select.vue";
import inputActionSheet from "@/view/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 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((err) => {
      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 = (params) => {
  if(reqCalcIng) {
    return;
  }

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

  let achPayInfo = {
      amountValue: finalAmountData.value.finalAmountValue
  };
  let guideUrl = chrome.runtime.getURL('/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 onMessage = () => {
    chrome.runtime.onMessage.addListener(msgListener)
}

const msgListener = (req, sender, sendResponse) => {
    switch (req.actionType) {
        case 'CONTENT_POPUP_PAGE_SHOW':
            let {refresh = false} = 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>