You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
655 lines
19 KiB
655 lines
19 KiB
<template> |
|
<div> |
|
<NavHeader></NavHeader> |
|
<main class="coins-main"> |
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
<el-tab-pane label="用户管理" name="first"> |
|
<BalancesTabds></BalancesTabds> |
|
</el-tab-pane> |
|
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> |
|
</el-tabs> |
|
|
|
<div class="coins-main_inner balances"> |
|
<div class="total"> |
|
<p class="total_inner"> |
|
<!-- 总资产 --> |
|
<span>{{ $t('balances.table.taotal') }}：</span> |
|
<span>{{ tatolPrice | formatV }} USDT</span> |
|
<!-- <span>USDT</span> --> |
|
<span class="total_secondary-text"> |
|
<span class="total_symbol">≈</span> |
|
<!-- 切换汇率 --> |
|
<span v-if="!currentrate" |
|
>{{ (tatolPrice * hkdAmount) | formatV }} HKD</span |
|
> |
|
<span v-else-if="currentrate == 'HKD'" |
|
>{{ (tatolPrice * hkdAmount) | formatV }} HKD</span |
|
> |
|
<span v-else-if="currentrate == 'USD'" |
|
>{{ (tatolPrice * usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'CNY'" |
|
>{{ (tatolPrice * cnyAmount) | formatV }} CNY</span |
|
> |
|
<span v-else>{{ (tatolPrice * eurAmount) | formatV }} EUR</span> |
|
<!-- <span>0.00</span> |
|
<span>CN</span>--> |
|
</span> |
|
</p> |
|
</div> |
|
|
|
<!-- 标题 --> |
|
<el-row class="cec-table" stripe> |
|
<el-col class="cec-title" stripe> |
|
<div class="title">{{ $t('balances.table.header_pair') }}</div> |
|
<div class="title">{{ $t('balances.table.header_last_yes') }}</div> |
|
<div class="title">{{ $t('balances.table.header_last_no') }}</div> |
|
<!-- <span>BTC估值</span> --> |
|
<div class="title">{{ $t('balances.table.header_last_ok') }}</div> |
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 内容 --> |
|
<el-row |
|
class="cec-table" |
|
stripe |
|
v-if="btcMoney != '' || ethMoney != '' || eosMoney != ''" |
|
> |
|
<!-- btc钱包内容 --> |
|
<el-col |
|
class="cec-title" |
|
v-for="(itembtc, indexBtc) in btcMoney" |
|
:key="'info2-' + indexBtc" |
|
> |
|
<!-- 币种 --> |
|
<div> |
|
<el-button type="text" style="cursor: default;">{{ |
|
itembtc.tokenSymbol |
|
}}</el-button> |
|
</div> |
|
|
|
<!-- 可用 --> |
|
<div> |
|
<el-button type="text" class="white size">{{ |
|
itembtc.freeBalance | formatV |
|
}}</el-button> |
|
</div> |
|
<!-- 冻结 --> |
|
<div> |
|
<el-button type="text" class="white size">{{ |
|
itembtc.freezeBalance | formatV |
|
}}</el-button> |
|
</div> |
|
<!-- <div> |
|
<el-button type="text" class="white size">o.oooooo</el-button> |
|
</div>--> |
|
<div> |
|
<!-- 充值 --> |
|
<el-button |
|
class="blue" |
|
@click="handleTableActionClick('deposit', itembtc)" |
|
type="text" |
|
>{{ $t('balances.table.header_last_recharge') }}</el-button |
|
> |
|
<!-- 提币 --> |
|
<el-button |
|
@click="handleTableActionClick('withdrawal', itembtc)" |
|
type="text" |
|
>{{ $t('balances.table.header_last_mention') }}</el-button |
|
> |
|
<!-- 交易 --> |
|
<a href="./trade"> |
|
<el-button type="text">{{ |
|
$t('balances.table.header_last_deal') |
|
}}</el-button> |
|
</a> |
|
<!-- 财务记录 --> |
|
<a |
|
:href=" |
|
'./balancesRecord/record?id=' + |
|
itembtc.tokenSymbol + |
|
'&addr=' + |
|
itembtc.addr + |
|
'&tokenId=' + |
|
itembtc.tokenId |
|
" |
|
> |
|
<el-button type="text">{{ |
|
$t('balances.table.header_last_financial') |
|
}}</el-button> |
|
</a> |
|
</div> |
|
</el-col> |
|
|
|
<!-- eth钱包内容 --> |
|
<el-col class="cec-title" :data="ethMoney"> |
|
<!-- 币种 --> |
|
<div> |
|
<el-button type="text" style="cursor: default;">{{ |
|
ethMoney.tokenSymbol |
|
}}</el-button> |
|
</div> |
|
<!-- 可用 --> |
|
<div> |
|
<el-button type="text" class="white size">{{ |
|
ethMoney.freeBalance | formatV |
|
}}</el-button> |
|
</div> |
|
<!-- 冻结 --> |
|
<div> |
|
<el-button type="text" class="white size">{{ |
|
ethMoney.freezeBalance | formatV |
|
}}</el-button> |
|
</div> |
|
|
|
<div> |
|
<!-- 充值 --> |
|
<el-button |
|
@click="handleTableActionClick('deposit', ethMoney)" |
|
type="text" |
|
>{{ $t('balances.table.header_last_recharge') }}</el-button |
|
> |
|
<!-- 提币 --> |
|
<el-button |
|
@click="handleTableActionClick('withdrawal', ethMoney)" |
|
type="text" |
|
>{{ $t('balances.table.header_last_mention') }}</el-button |
|
> |
|
<!-- 交易 --> |
|
<a href="./trade"> |
|
<el-button type="text">{{ |
|
$t('balances.table.header_last_deal') |
|
}}</el-button> |
|
</a> |
|
<!-- 财务记录 --> |
|
<a |
|
:href=" |
|
'./balancesRecord/record?id=' + |
|
ethMoney.tokenSymbol + |
|
'&addr=' + |
|
ethMoney.addr |
|
" |
|
> |
|
<el-button type="text">{{ |
|
$t('balances.table.header_last_financial') |
|
}}</el-button> |
|
</a> |
|
</div> |
|
</el-col> |
|
|
|
<!-- eos钱包内容 --> |
|
<el-col |
|
class="cec-title" |
|
v-for="(item, indexEos) in eosMoney" |
|
:key="indexEos" |
|
> |
|
<!-- 币种 --> |
|
<div> |
|
<el-button type="text" style="cursor: default;">{{ |
|
item.tokenSymbol |
|
}}</el-button> |
|
</div> |
|
<!-- 可用 --> |
|
<div> |
|
<el-button type="text" class="white size">{{ |
|
item.freeBalance | formatV |
|
}}</el-button> |
|
</div> |
|
<!-- 冻结 --> |
|
<div> |
|
<el-button type="text" class="white size">{{ |
|
item.freezeBalance | formatV |
|
}}</el-button> |
|
</div> |
|
<!-- <div> |
|
<el-button type="text" class="white size">o.oooooo</el-button> |
|
</div>--> |
|
<div> |
|
<!-- 充值 --> |
|
<el-button |
|
@click="handleTableActionClick('deposit', item)" |
|
type="text" |
|
>{{ $t('balances.table.header_last_recharge') }}</el-button |
|
> |
|
<!-- 提币 --> |
|
<el-button |
|
@click="handleTableActionClick('withdrawal', item)" |
|
type="text" |
|
>{{ $t('balances.table.header_last_mention') }}</el-button |
|
> |
|
<!-- 交易 --> |
|
<a href="./trade"> |
|
<el-button type="text">{{ |
|
$t('balances.table.header_last_deal') |
|
}}</el-button> |
|
</a> |
|
<!-- 财务记录 --> |
|
<a |
|
:href=" |
|
'./balancesRecord/record?id=' + |
|
item.tokenSymbol + |
|
'&addr=' + |
|
item.userOpenId + |
|
'&addrId=' + |
|
item.id |
|
" |
|
> |
|
<el-button type="text">{{ |
|
$t('balances.table.header_last_financial') |
|
}}</el-button> |
|
</a> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<!-- 判断是否有记录 ,无则显示 --> |
|
<el-row v-else> |
|
<el-col class="no-data">{{ |
|
$t('balances.table.header_nodata') |
|
}}</el-col> |
|
</el-row> |
|
</div> |
|
</main> |
|
|
|
<!-- 充值 --> |
|
<el-dialog |
|
:title="$t('balances.table.header_last_recharge')" |
|
width="600px" |
|
:visible.sync="ctrl.depositDialogVisible" |
|
> |
|
<BalancesDepositWidget :taInfo="tatoo"></BalancesDepositWidget> |
|
</el-dialog> |
|
|
|
<!-- 提币 --> |
|
<el-dialog |
|
:title="$t('balances.table.header_last_mention')" |
|
width="980px" |
|
:visible.sync="ctrl.withdrawalDialogVisible" |
|
v-if="ctrl.withdrawalDialogVisible" |
|
> |
|
<BalancesWithdrawalWidget :tiInfo="titoo"></BalancesWithdrawalWidget> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
// 子组件 |
|
import NavHeader from '@/components/common/header'; |
|
import BalancesDepositWidget from '@/components/balances/balances-deposit-widget'; |
|
import BalancesWithdrawalWidget from '@/components/balances/balances-withdrawal-widget'; |
|
import BalancesTabds from '@/components/balances/banlanes-tabds'; |
|
// 引入汇率 |
|
import {getExchangeRateCookie} from '@/utils/auth'; |
|
|
|
// 获取请求 |
|
import {getBtc, chargeBtc, chargeUsdt} from '@/api/btc.js'; |
|
|
|
import {getEth, chargeEth} from '@/api/eth.js'; |
|
|
|
import {getEos, upEosAddr, chargeEos} from '@/api/eos.js'; |
|
|
|
import {getLeftPrice} from '@/api/currency.js'; |
|
|
|
import {log} from 'util'; |
|
|
|
export default { |
|
name: 'balances', |
|
components: { |
|
NavHeader, |
|
BalancesDepositWidget, |
|
BalancesWithdrawalWidget, |
|
BalancesTabds, |
|
}, |
|
|
|
data() { |
|
return { |
|
activeName: 'first', |
|
// balances: MockData.balances, |
|
ctrl: { |
|
depositDialogVisible: false, |
|
withdrawalDialogVisible: false, |
|
}, |
|
tatoo: [], //充值总数组 |
|
titoo: [], //提币数组 |
|
ethMoney: [], |
|
eosMoney: [], |
|
btcMoney: [], |
|
eosAddr: [], //eos充值地址 |
|
ethChange: {}, |
|
eosChange: [], |
|
btcChange: [], |
|
usdtChange: [], |
|
DestroyIncomeStatistics: true, |
|
USDTPrie: [], |
|
ethMang: '', //eth总数量 |
|
eosMang: '', //eos总数量 |
|
btcMang: '', //btc总数量 |
|
usdtMang: '', //usdt资产 |
|
ethPrice: '', //eth资产 |
|
eosPrice: '', //eos资产 |
|
btcPrice: '', //btc资产 |
|
tatolPrice: '', //总资产 |
|
currentrate: '', //获取头部汇率 |
|
cnyAmount: '', //汇率 |
|
eurAmount: '', |
|
hkdAmount: '', |
|
usdAmount: '', |
|
}; |
|
}, |
|
created() { |
|
// 获取头部栏点击汇率 |
|
this.currentrate = getExchangeRateCookie(); |
|
|
|
this.initAddr(); |
|
this.changeEth(); |
|
this.initEth(); |
|
this.changeEos(); |
|
this.initEos(); |
|
this.changeBtc(); |
|
this.changeUsdt(); |
|
this.initBtc(); |
|
this.getUSDTPrie(); |
|
}, |
|
methods: { |
|
handleClick(tab, event) { |
|
console.log(tab, event); |
|
}, |
|
/** |
|
* 表格触发操作 |
|
* @param {Object} row |
|
* @param {string} action - "deposit | withdrawal | trade" |
|
*/ |
|
handleTableActionClick(action, name) { |
|
switch (action) { |
|
case 'deposit': |
|
// 充值弹窗 |
|
this.ctrl.depositDialogVisible = true; |
|
this.tatoo = name; |
|
// console.log(this.tatoo); |
|
|
|
break; |
|
case 'withdrawal': |
|
// 提币弹窗 |
|
this.ctrl.withdrawalDialogVisible = true; |
|
this.titoo = name; |
|
// console.log(this.titoo); |
|
break; |
|
default: |
|
} |
|
}, |
|
// 获取eth手续费等 供提币功能使用 |
|
changeEth() { |
|
chargeEth().then(res => { |
|
this.ethChange = res.data.data; |
|
}); |
|
}, |
|
// 获取eth初始数据 |
|
initEth() { |
|
getEth().then(res => { |
|
if (res.data.code === 200) { |
|
this.ethMoney = res.data.data; |
|
// 拿到资产数额 |
|
this.ethMang = this.ethMoney.balance; |
|
// console.log(this.ethMang); |
|
|
|
//传递对象 ES6 新语法 |
|
// this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) |
|
this.ethMoney = Object.assign({}, this.ethMoney, { |
|
gasPrice: this.ethChange.gasPrice, //手续费 |
|
minWdAmount: this.ethChange.minWdAmount, //最小提币 |
|
}); |
|
// console.log(this.ethMoney); |
|
} |
|
}); |
|
}, |
|
// 获取eos手续费等 供提币功能使用 |
|
changeEos() { |
|
chargeEos().then(res => { |
|
this.eosChange = res.data.data; |
|
// console.log(this.eosChange); |
|
}); |
|
}, |
|
// 获取eos充值地址,只有eos需要 |
|
initAddr() { |
|
upEosAddr().then(res => { |
|
if (res.data.code === 200) { |
|
this.eosAddr = res.data.data || {}; |
|
// console.log(this.eosAddr);//null; |
|
} |
|
}); |
|
}, |
|
// 获取eos初始数据 |
|
initEos() { |
|
getEos().then(res => { |
|
if (res.data.code === 200) { |
|
this.eosMoney = res.data.data; |
|
// console.log(this.eosMoney); |
|
// 赋值新的属性addr,跟btc,eth一致,方便渲染 |
|
for (let i = 0; i <= this.eosMoney.length; i++) { |
|
// 拿到资产数额 |
|
this.eosMang = this.eosMoney[i].balance; |
|
// console.log(this.eosMang); |
|
|
|
this.eosMoney[i]['gasPrice'] = this.eosChange.gasPrice; |
|
this.eosMoney[i]['minWdAmount'] = this.eosChange.minWdAmount; |
|
// // 再次复制新的属性 |
|
// this.eosMoney[i] = Object.assign({}, this.eosMoney[i], { |
|
// gasPrice: this.eosChange.gasPrice, //手续费 |
|
// minWdAmount: this.eosChange.minWdAmount, //最小提币 |
|
// }); |
|
this.eosMoney[i]['addr'] = this.eosAddr.accountName; |
|
// console.log(this.eosMoney); |
|
return this.eosMoney; |
|
} |
|
} |
|
}); |
|
}, |
|
// 获取btc手续费等 供提币功能使用 |
|
changeBtc() { |
|
chargeBtc().then(res => { |
|
this.btcChange = res.data.data; |
|
// console.log(this.btcChange); |
|
}); |
|
}, |
|
// 获取USDT手续费等 供提币功能使用 |
|
changeUsdt() { |
|
chargeUsdt().then(res => { |
|
this.usdtChange = res.data.data; |
|
// console.log(this.usdtChange); |
|
}); |
|
}, |
|
// 获取btc初始数据 |
|
initBtc() { |
|
getBtc().then(res => { |
|
if (res.data.code === 200) { |
|
this.btcMoney = res.data.data; |
|
// 根据数组长度,分别给BTC,USDT对象添加新的属性 |
|
for (let i = 0; i < this.btcMoney.length; i++) { |
|
if (i == 0) { |
|
// 拿到资产数额 |
|
this.btcMang = this.btcMoney[i].balance; |
|
// console.log(this.btcMang); |
|
|
|
this.btcMoney[i]['gasPrice'] = this.btcChange.gasPrice; |
|
this.btcMoney[i]['minWdAmount'] = this.btcChange.minWdAmount; |
|
continue; |
|
} else if (i == 1) { |
|
// 拿到资产数额 |
|
this.usdtMang = this.btcMoney[i].balance; |
|
// console.log(this.usdtMang); |
|
|
|
this.btcMoney[i]['gasPrice'] = this.usdtChange.gasPrice; |
|
this.btcMoney[i]['minWdAmount'] = this.usdtChange.minWdAmount; |
|
} |
|
// console.log(this.btcMoney); |
|
return this.btcMoney; |
|
} |
|
} |
|
}); |
|
}, |
|
// 获取行情USDT币种最新价 |
|
getUSDTPrie() { |
|
getLeftPrice().then(res => { |
|
this.USDTPrie = res.data.data; |
|
// console.log(this.USDTPrie); |
|
|
|
// 获取币种汇率 |
|
this.cnyAmount = this.USDTPrie[0].cnyAmount; |
|
this.eurAmount = this.USDTPrie[0].eurAmount; |
|
this.hkdAmount = this.USDTPrie[0].hkdAmount; |
|
this.usdAmount = this.USDTPrie[0].usdAmount; |
|
|
|
for (let i = 0; i < this.USDTPrie.length; i++) { |
|
// 获取btc转usdt资产 |
|
if (this.USDTPrie[i].currencyPair == 'BTC-USDT') { |
|
// console.log(this.USDTPrie[i].amount); |
|
this.btcPrice = this.btcMang * this.USDTPrie[i].amount; |
|
// console.log('btc'+this.btcPrice); |
|
} |
|
// return this.btcPrice; |
|
} |
|
|
|
for (let i = 0; i < this.USDTPrie.length; i++) { |
|
// 获取eth转usdt资产 |
|
if (this.USDTPrie[i].currencyPair == 'ETH-USDT') { |
|
// console.log(this.USDTPrie[i].amount); |
|
this.ethPrice = this.ethMang * this.USDTPrie[i].amount; |
|
// console.log('eth'+this.ethPrice); |
|
} |
|
// return this.ethPrice; |
|
} |
|
|
|
for (let i = 0; i < this.USDTPrie.length; i++) { |
|
// 获取eos转usdt资产 |
|
if (this.USDTPrie[i].currencyPair == 'EOS-USDT') { |
|
// console.log(this.USDTPrie[i].amount); |
|
this.eosPrice = this.eosMang * this.USDTPrie[i].amount; |
|
// console.log('eos'+this.eosPrice); |
|
} |
|
// return this.eosPrice; |
|
} |
|
|
|
// 获取总资产 |
|
this.tatolPrice = |
|
this.btcPrice + this.usdtMang + this.ethPrice + this.eosPrice; |
|
// console.log(this.tatolPrice); |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
.balances { |
|
.total { |
|
padding-bottom: 0.3%; |
|
margin-top: 2.2%; |
|
&_inner { |
|
margin: 0; |
|
line-height: 40px; |
|
font-size: 28px; |
|
color: #333; |
|
} |
|
|
|
&_secondary-text { |
|
font-size: 24px; |
|
color: #999; |
|
padding-left: 5px; |
|
} |
|
|
|
&_symbol { |
|
padding: 0.7%; |
|
} |
|
} |
|
} |
|
.cec-table { |
|
.cec-title { |
|
font-size: 14px; |
|
color: #333; |
|
letter-spacing: 0; |
|
// padding: 25px 16px; |
|
padding: 1.75% 1.15%; |
|
display: flex; |
|
// justify-content: center; |
|
// align-content: center; |
|
font-size: 16px; |
|
color: #333; |
|
letter-spacing: 0; |
|
&:nth-of-type(2n + 1) { |
|
background-color: #fff; |
|
} |
|
div { |
|
// margin-right: 50px; |
|
margin-right: 2.5%; |
|
} |
|
div:first-child { |
|
flex: 2; |
|
} |
|
div:nth-child(2) { |
|
flex: 2; |
|
} |
|
div:nth-child(3) { |
|
flex: 2; |
|
} |
|
// div:nth-child(4) { |
|
// width: 263px; |
|
// } |
|
|
|
div:nth-child(4) { |
|
flex: 5; |
|
span { |
|
margin-right: 30px; |
|
font-size: 14px; |
|
color: #c7282c; |
|
letter-spacing: 0; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
} |
|
.white { |
|
color: #333; |
|
cursor: default; |
|
} |
|
.size { |
|
font-size: 16px; |
|
} |
|
.title { |
|
font-size: 14px; |
|
color: #333; |
|
letter-spacing: 0; |
|
} |
|
// .no-data { |
|
// color: #333; |
|
// display: flex; |
|
// justify-content: center; |
|
// align-items: center; |
|
// padding: 25px 0; |
|
// font-size: 14px; |
|
// border-bottom: 1px solid #1f3e5a; |
|
// } |
|
.coins-main { |
|
padding: 0 1.4%; |
|
} |
|
.coins-main_inner { |
|
padding-top: 1.4%; |
|
} |
|
.el-button--text { |
|
color: #333; |
|
&:hover { |
|
color: #333; |
|
} |
|
&:active { |
|
color: #333; |
|
} |
|
} |
|
.el-button { |
|
&:hover { |
|
color: #333; |
|
} |
|
&:active { |
|
color: #333; |
|
} |
|
} |
|
|
|
// Estimated Value |
|
</style>
|
|
|