|
|
@@ -0,0 +1,273 @@
|
|
|
+<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>
|
A\An
