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

<template>
  <div class="currency-detail-page">
    <div class="top">
      <img
        class="icon-currency"
        :src="routerParams.iconPath"
      />
      <div class="amount">
        {{routerParams.balance}} {{routerParams.currencyName}}
        <div class="final">${{routerParams.usdEstimateBalance}}</div>
      </div>
    </div>
    <div class="bottom">
      <div class="btn deposit-btn"  @click="clickDeposit">Deposit</div>
      <div class="btn withdrawal-btn" @click="clickWithdraw">Withdrawal</div>
    </div>

    <div class="popup" v-if="showPopup" @click="clickPopup">
      <div class="content">
        <div class="item" v-for="(item, index) in listData" :key="index">
          <div class="chain">
            <img
              class="icon-chain"
              src="https://d1mcov78iir8kk.cloudfront.net/image/currency_icon/BSC_USDT.png"
            />
            {{ item.chain }}
          </div>
          <div class="currency">
            <div class="left">
              <img
                class="icon-currency"
                src="https://d1mcov78iir8kk.cloudfront.net/image/currency_icon/BSC_USDT.png"
              />
              <div class="info">
                <div class="unit">{{ item.currency }}</div>
                TetherUS
              </div>
            </div>
            <div class="right">
              {{ item.amount }}
              <div class="final">${{ item.amount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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";

let routerParams = ref({});

let showPopup = ref(true);

let listData = ref([
  {
    chain: "BNB Smart Chain (BEP20)",
    currency: "USDT",
    amount: "10",
  },
  {
    chain: "BNB Smart Chain (BEP20)",
    currency: "USDT",
    amount: "10",
  },
]);

const clickPopup = () => {
  showPopup.value = false;
};

let withdraw_info = inject('withdraw_info')
// 点击提现
const clickWithdraw = () => {
    let _params = routerParams.value;

    Report.reportLog({
        pageSource: Report.pageSource.denetHomePage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.withdrawButton
    });

    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')
        router.push('/withdraw/info')
    }
}

let top_up_info = reactive(getStorage('top_up_info')) || inject('top_up_info') || {};

const clickDeposit = () => {
    let _params = routerParams.value;

    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')
    Report.reportLog({
        pageSource: Report.pageSource.denetHomePage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.topupButton
    });
    router.push('/top-up/info');
}

onMounted(() => {
    let {params = '{}'} = router.currentRoute.value.query;
    routerParams.value =  JSON.parse(params);
    console.log(routerParams.value)
})
</script>


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

  .top {
    height: calc(100% - 163px);
    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;
    }
  }

  .popup {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;

    .content {
      background: #f7f7f7;
      border-radius: 20px 20px 0px 0px;
      width: 100%;
      height: 230px;
      position: absolute;
      bottom: 0;
      left: 0;
      overflow-y: auto;
      cursor: default;

      .item {
        .chain {
          font-weight: 500;
          font-size: 14px;
          padding: 12px 14px;
          box-sizing: border-box;
          background: #f7f7f7;

          .icon-chain {
            width: 18px;
            height: 18px;
            margin-right: 8px;
          }
        }

        .currency {
          background: #fff;
          padding: 12px 20px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          cursor: pointer;

          .left {
            display: flex;

            .icon-currency {
              width: 24px;
              height: 24px;
              margin-right: 12px;
              margin-top: 4px;
            }

            .info {
              font-weight: 400;
              font-size: 12px;
              color: #a2a2a2;
              .unit {
                font-weight: 500;
                font-size: 15px;
                color: #000;
                margin-bottom: 5px;
              }
            }
          }

          .right {
            font-weight: 500;
            font-size: 15px;
            
            .final {
                font-weight: 400;
                font-size: 12px;
                color: #A2A2A2;
            }
          }
        }
      }
    }
  }
}
</style>