|
@@ -0,0 +1,520 @@
|
|
|
+<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" @onBack="clickBack" />
|
|
|
+ <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">
|
|
|
+
|
|
|
+ </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, onBeforeUnmount } from "vue";
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import Report from "@/log-center/log";
|
|
|
+import { getCurrencyInfoBySymbol, syncChainTokenRechargeRecord } from "@/http/publishApi";
|
|
|
+import { setChromeStorage, chromeExtensionUrl } from "@/uilts/chromeExtension"
|
|
|
+import messageCenter from "@/uilts/messageCenter";
|
|
|
+import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
|
|
|
+import VHead from '@/components/v-head.vue'
|
|
|
+import currencySelect from "@/components/currency-select.vue";
|
|
|
+import inputActionSheet from "@/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 router = useRouter();
|
|
|
+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(() => {
|
|
|
+ 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 = () => {
|
|
|
+ if (reqCalcIng) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ showDepositInput.value = false;
|
|
|
+ depositDesc.value = '';
|
|
|
+
|
|
|
+ let achPayInfo = {
|
|
|
+ amountValue: finalAmountData.value.finalAmountValue
|
|
|
+ };
|
|
|
+ let guideUrl = chromeExtensionUrl + ('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 clickBack = () => {
|
|
|
+ messageCenter.send({
|
|
|
+ actionType: MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU,
|
|
|
+ data: {
|
|
|
+ showMenu: true,
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onMessage = () => {
|
|
|
+ // chrome.runtime.onMessage.addListener(msgListener)
|
|
|
+}
|
|
|
+
|
|
|
+// const msgListener = (req) => {
|
|
|
+// let refresh = false;
|
|
|
+// switch (req.actionType) {
|
|
|
+// case 'CONTENT_POPUP_PAGE_SHOW':
|
|
|
+// refresh = 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>
|