<template>
|
<div class="assets main_background text_color">
|
<!-- <div class="assets_title">{{ $t('总资产估值') }}</div>
|
<div class="assets_money font-bold mt-5 flex justify-start items-end">
|
{{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
|
(forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
|
|
<div class="pricing_jj ml-5">
|
{{ pricing }}
|
</div>
|
<van-dropdown-menu>
|
<van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
|
<div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
|
</van-dropdown-item>
|
</van-dropdown-menu>
|
</div>
|
<div class="assets_revenue mt-5">
|
<span>{{ $t('ProfitDay') }}</span>
|
{{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit_today ?
|
(forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
|
'--' }}
|
</div>
|
|
<div class="tabbers flex justify-between mt-20 pl-1 pr-1">
|
<div class="item" v-for="item in tabList" :key="item.key" @click="toPage(item.path)">
|
<img style="width: 100px;" :src="item.icon" alt="">
|
<div class="mt-3 text-center">{{ item.name }}</div>
|
</div>
|
</div>
|
|
<van-collapse v-model="activeNames" class="mt-10">
|
<van-collapse-item :title="$t('分布')" name="1">
|
<div class="percentage flex just-between items-center">
|
<div :style="`width:${assetObj.capital / (assetObj.capital + assetObj.contract) * 100}%`">
|
</div>
|
<div class="flex-1">
|
</div>
|
</div>
|
<div class="assets_item flex justify-start items-center mt-14 font-bold">
|
<div class="icon" style="background-color: #8A90FE;"></div>
|
<span class="ml-5 flex-1">{{ $t('资金账户') }}</span>
|
<span class="mr-5">{{ assetObj.capital }}</span>
|
<van-icon name="arrow" />
|
</div>
|
<div class="assets_item flex justify-start items-center mt-14 font-bold">
|
<div class="icon" style="background-color: #f7b600;"></div>
|
<span class="ml-5 flex-1">{{ $t('交易账户') }}</span>
|
<span class="mr-5">{{ assetObj.contract }}</span>
|
<van-icon name="arrow" />
|
</div>
|
</van-collapse-item>
|
</van-collapse>
|
|
<div class="assets_item flex font-bold justify-between items-center mt-14 mb-10">
|
<span>{{ $t('资产') }}</span>
|
<van-icon name="exchange" size="3rem" />
|
</div>
|
|
<div class="assets_item flex justify-start items-center mb-10 font-bold" v-for="item in assetList"
|
:key="item.id">
|
<img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" />
|
|
<span class="ml-5 flex-1">{{ item.symbol_data.toUpperCase() }}/USDT</span>
|
|
<div class="mr-3">
|
<div class="text-right" v-if="item.symbol == 'btc'">
|
{{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
|
</div>
|
<div class="text-right" v-else-if="item.symbol == 'eth'">
|
{{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
|
</div>
|
<div class="text-right" v-else-if="item.symbol == 'usdt'">
|
{{ item.volume ? Number(item.volume).toFixed(2) : '0.0' }}
|
</div>
|
<div class="text-right" v-else>
|
{{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
|
</div>
|
<div class="assets_item_light text-right">
|
≈{{ currency.currency_symbol }}
|
{{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
|
</div>
|
</div>
|
</div> -->
|
|
<van-nav-bar>
|
<template #left>
|
<div class="assets_tabs flex justify-start items-center textColor1">
|
<div v-for="i in headList" :key="i" :class="i.key == activeHead ? 'textColor' : ''"
|
@click="activeHead = i.key">
|
{{ i.name }}
|
</div>
|
</div>
|
</template>
|
<template #right>
|
<van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" />
|
</template>
|
</van-nav-bar>
|
|
<div class="assets_content">
|
<template v-if="activeHead == 0">
|
<div class="assets_1">
|
{{ $t('总资产估值') }}
|
</div>
|
<div class="assets_money mt-5 flex justify-start items-end">
|
{{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
|
(forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
|
<!-- -->
|
<div class="pricing_jj ml-5">
|
{{ pricing }}
|
</div>
|
<van-dropdown-menu style="position: relative;top: .5rem;">
|
<van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
|
<div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
|
</van-dropdown-item>
|
</van-dropdown-menu>
|
</div>
|
</template>
|
</div>
|
|
|
<van-nav-bar>
|
<template #left>
|
<div class="assets_tabs flex justify-start items-center textColor1">
|
<div v-for="i in headList1" :key="i" :class="i.key == activeHead1 ? 'textColor' : ''"
|
@click="activeHead1 = i.key">
|
{{ i.name }}
|
</div>
|
</div>
|
</template>
|
</van-nav-bar>
|
|
<div class="assets_content1">
|
<template v-if="activeHead1 == 1">
|
<div class="assets_1">
|
{{ $t('资金账户') }}
|
</div>
|
<div class="assets_money mt-5 flex justify-start items-end">
|
${{ assetObj.capital }}
|
<span>USD</span>
|
</div>
|
<div class="assets_2 flex justify-around items-center">
|
<div v-for="i in tabList" :key="i.key" @click="toPage(i.path)">
|
<img :src="i.icon" alt="" v-if="theme == 'light'">
|
<img :src="i.icon2" alt="" v-else>
|
<div>{{ i.name }}</div>
|
</div>
|
</div>
|
|
<div class="assets_3">
|
<div class="assets_3_head flex justify-between items-center">
|
<span>{{ $t('名称') }}</span>
|
<span>{{ $t('volumn') }}</span>
|
</div>
|
<div class="assets_3_item flex justify-between items-center" v-for="i in assetList" :key="i.id">
|
<div class="flex justify-start items-center">
|
<img :src="`${HOST_URL}/symbol/${i.symbol_data}.png`" />
|
<span class="ml-5">{{ i.symbol_data.toUpperCase() }}</span>
|
</div>
|
<div>
|
<p>{{ i.volume ? Number(i.volume).toFixed(8) : '0.0' }}</p>
|
<p>≈{{ currency.currency_symbol }}
|
{{ i.usdt ? Number(i.usdt).toFixed(2) : '0.0' }}</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<template v-else-if="activeHead1 == 2">
|
<div class="assets_1">
|
{{ $t('交易账户') }}
|
</div>
|
<div class="flex justify-between items-center">
|
<div class="assets_money mt-5 flex justify-start items-end">
|
${{ assetObj.contract }}
|
<span>USD</span>
|
</div>
|
<div class="assets_4" @click="toPage('/my/transfer')">
|
<img :src="tabList[2].icon" alt="" v-if="theme == 'light'">
|
<img :src="tabList[2].icon2" alt="" v-else>
|
<p>{{ $t('划转') }}</p>
|
</div>
|
</div>
|
</template>
|
</div>
|
|
</div>
|
|
<!-- <van-nav-bar>
|
<template #left>
|
<div class="assets_tabs flex justify-start items-center textColor1">
|
<div v-for="i in headList" :key="i" :class="i.key == activeHead ? 'textColor' : ''"
|
@click="activeHead = i.key">
|
{{ i.name }}
|
</div>
|
</div>
|
</template>
|
<template #right v-if="activeHead != 0">
|
<van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" />
|
</template>
|
</van-nav-bar> -->
|
|
<!-- <div class="flex-centerY"
|
style="position: sticky;top: 0px;left: 0;height: 55px;width: 100%;background: white;z-index: 999;border-bottom: #f1f1f1 1px solid;padding: 0 20px">
|
<div @click="showType=2" class="tab-item flex-center" :class="{'tab-item-select':showType==2}">
|
{{ $t('总资产估值') }}
|
</div>
|
<div @click="showType=1" class="tab-item flex-center" :class="{'tab-item-select':showType==1}">
|
{{ $t('资金账户') }}
|
</div>
|
<div @click="showType=3" class="tab-item flex-center" :class="{'tab-item-select':showType==3}">
|
{{ $t('交易账户') }}
|
</div>
|
</div>
|
<div class="assets_content">
|
<div v-if="showType==2">
|
<div class="assets_1">
|
{{ $t('总资产估值') }}
|
</div>
|
<div class="assets_money mt-5 flex justify-start items-end">
|
{{ currency.currency_symbol }}{{
|
forexAssets?.money_contract ?
|
(forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00'
|
}}
|
|
<div class="pricing_jj ml-5">
|
{{ pricing }}
|
</div>
|
<van-dropdown-menu style="position: relative;top: .5rem;">
|
<van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
|
<div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
|
</van-dropdown-item>
|
</van-dropdown-menu>
|
</div>
|
</div>
|
<div v-if="showType==3">
|
<div class="assets_1">
|
{{ $t('交易账户') }}
|
</div>
|
<div class="flex justify-between items-center">
|
<div class="assets_money mt-5 flex justify-start items-end">
|
${{ assetObj.contract }}
|
<span>USD</span>
|
</div>
|
<div class="assets_4" @click="toPage('/my/transfer')">
|
<img :src="tabList[2].icon" alt="" v-if="theme == 'light'">
|
<img :src="tabList[2].icon2" alt="" v-else>
|
<p>{{ $t('划转') }}</p>
|
</div>
|
</div>
|
</div>
|
<div v-if="showType==1">
|
<div class="assets_1">
|
{{ $t('资金账户') }}
|
</div>
|
<div class="assets_money mt-5 flex justify-start items-end">
|
${{ assetObj.capital }}
|
<span>USD</span>
|
</div>
|
<div class="assets_2 flex justify-around items-center">
|
<div v-for="i in tabList" :key="i.key" @click="toPage(i.path)">
|
<img :src="i.icon" alt="" v-if="theme == 'light'">
|
<img :src="i.icon2" alt="" v-else>
|
<div>{{ i.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="assets_3">
|
<div class="assets_3_head flex justify-between items-center">
|
<span>{{ $t('名称') }}</span>
|
<span>{{ $t('volumn') }}</span>
|
</div>
|
<div class="assets_3_item flex justify-between items-center" v-for="i in assetList" :key="i.id">
|
<div class="flex justify-start items-center">
|
<img :src="`${HOST_URL}/symbol/${i.symbol_data}.png`"/>
|
<span class="ml-5">{{ i.symbol_data.toUpperCase() }}</span>
|
</div>
|
<div>
|
<p>{{ i.volume ? Number(i.volume).toFixed(8) : '0.0' }}</p>
|
<p>≈{{ currency.currency_symbol }}
|
{{ i.usdt ? Number(i.usdt).toFixed(2) : '0.0' }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { useI18n } from "vue-i18n";
|
import { useRouter } from 'vue-router';
|
import { _getExchangeRate } from '@/service/cryptos.api'
|
import { _exchangerateuserconfig } from "@/service/trade.api";
|
import store from '@/store/store'
|
import { useStore } from "vuex"
|
import {
|
_getContractBySymbolType
|
} from "@/service/etf.api";
|
import { SET_CURRENCY } from "@/store/const.store";
|
import { _getassets } from "@/service/user.api.js";
|
import { _getAllWallet } from '@/service/fund.api';
|
import { HOST_URL } from '@/config';
|
|
const router = useRouter()
|
const { t } = useI18n()
|
const activeNames = ref(['1'])
|
const { dispatch } = useStore();
|
const showType = ref(2)
|
const theme = ref(store.state.vant.theme) // 当前主题模式,白天(light)或夜间(dark)
|
|
const tabList = [
|
{
|
key: 1,
|
name: t('充值'),
|
icon: new URL(`@/assets/theme/white/image/assets/recharge.png`, import.meta.url),
|
icon2: new URL(`@/assets/theme/dark/image/assets/recharge.png`, import.meta.url),
|
// path: '/cryptos/recharge/rechargeList?isForeign=true'
|
path: '/customerService'
|
},
|
{
|
key: 2,
|
name: t('提现'),
|
icon: new URL(`@/assets/theme/white/image/assets/withdrawal.png`, import.meta.url),
|
icon2: new URL(`@/assets/theme/dark/image/assets/withdrawal.png`, import.meta.url),
|
path: '/cryptos/Withdraw/withdrawPage'
|
},
|
{
|
key: 3, name: t('划转'), icon: new URL(`@/assets/theme/white/image/assets/transfer.png`, import.meta.url),
|
icon2: new URL(`@/assets/theme/dark/image/assets/transfer.png`, import.meta.url), path: '/my/transfer'
|
},
|
// { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
|
]
|
|
// 计价切换
|
const pricing = ref('')
|
const pricingList = [
|
{ text: 'USD', value: 'USD', key: 'USD_in' },
|
{ text: 'EUR', value: 'EUR', key: 'EUR_in' },
|
{ text: 'JPY', value: 'JPY', key: 'JPY_in' },
|
]
|
const changePricing = (e) => {
|
let item = pricingList.find((item) => item.value == e)
|
|
_exchangerateuserconfig({ rateId: item.key }).then((res) => {
|
dispatch(`home/${SET_CURRENCY}`)
|
getCurrency()
|
getContractBySymbolType()
|
})
|
}
|
|
// 获取客服链接
|
const customer_service_url = ref(store.state.user.customer_service_url)
|
|
// 跳转页面
|
const toPage = (path) => {
|
if (!path) return
|
else if (path == '/customerService') {
|
if (customer_service_url.value) {
|
window.location.href = customer_service_url.value;
|
} else {
|
router.push(path)
|
}
|
}
|
else router.push(path)
|
}
|
|
// 资产信息获取
|
const currency = ref({})
|
const forexAssets = ref({})
|
const symbolType = ref('cryptos') //默认etf
|
|
const getCurrency = async () => {
|
_getExchangeRate({
|
token: store.state.user.userInfo.token
|
}).then(res => {
|
currency.value = res
|
pricing.value = res.currency
|
}).catch(err => Promise.reject(err))
|
}
|
const getContractBySymbolType = () => {
|
_getContractBySymbolType(symbolType.value)
|
.then(res => {
|
forexAssets.value = res
|
})
|
}
|
const assetObj = ref({})
|
const getassets = () => { // 获取资产
|
_getassets().then(res => {
|
assetObj.value = res
|
})
|
}
|
|
// 获取资产列表
|
const assetList = ref([])
|
const getList = () => {
|
_getAllWallet({
|
symbolType: 'cryptos'
|
}).then((res) => {
|
assetList.value = res.extends
|
console.log("资产列表", assetList.value);
|
|
});
|
}
|
|
getList()
|
getassets()
|
getCurrency()
|
getContractBySymbolType()
|
|
// 头部切换项
|
const activeHead = ref(0)
|
const headList = [
|
{ name: t('总资产估值'), key: 0 },
|
// { name: t('资金账户'), key: 1 },
|
// { name: t('交易账户'), key: 2 },
|
]
|
// 中部切换项
|
const activeHead1 = ref(1)
|
const headList1 = [
|
{ name: t('资金账户'), key: 1 },
|
{ name: t('交易账户'), key: 2 },
|
]
|
|
</script>
|
|
<style lang="scss" scoped>
|
.tab-item {
|
height: 100%;
|
font-size: 16px;
|
color: #999;
|
|
margin-right: 10px;
|
}
|
|
.tab-item-select {
|
color: #111;
|
}
|
|
.assets {
|
min-height: 100vh;
|
font-size: 1.4rem;
|
|
::v-deep .van-nav-bar {
|
border-bottom: $divi_line solid 1px;
|
}
|
|
justify-content: space-around;
|
|
.assets_tabs {
|
font-size: 2rem;
|
|
&>div {
|
margin-right: 2rem;
|
}
|
}
|
|
.assets_content,
|
.assets_content1 {
|
padding: 16px 16px;
|
}
|
|
.assets_content {
|
@include themify() {
|
border-bottom: themed("divi_line") solid 1px;
|
}
|
}
|
|
.assets_1 {
|
font-size: 1.5rem;
|
}
|
|
.assets_2 {
|
margin-top: 3rem;
|
font-size: 1.4rem;
|
|
&>div {
|
text-align: center;
|
|
img {
|
height: 2.4rem;
|
margin: 0 auto .4rem;
|
}
|
}
|
}
|
|
.assets_3 {
|
margin-top: 3rem;
|
|
.assets_3_item {
|
margin-bottom: 3.2rem;
|
|
p {
|
text-align: end;
|
}
|
|
img {
|
width: 3.6rem;
|
}
|
}
|
|
.assets_3_head {
|
border-bottom: $divi_line solid 1px;
|
margin-bottom: 1.7rem;
|
}
|
}
|
|
.assets_4 {
|
padding-right: 2rem;
|
|
img {
|
height: 2.4rem;
|
}
|
}
|
|
:deep(.van-cell) {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
:deep(.van-cell:after) {
|
display: none;
|
}
|
|
:deep(.van-collapse-item__content) {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
:deep(.van-cell__title) {
|
font-size: 2.1rem;
|
font-weight: 600;
|
}
|
|
.assets_title {
|
font-size: 2.1rem;
|
}
|
|
.assets_money {
|
font-size: 3rem;
|
|
.pricing_jj {
|
font-size: 1.6rem;
|
margin-right: -8px;
|
position: relative;
|
top: .5rem;
|
}
|
|
&>span {
|
font-size: 1.6rem;
|
margin-left: .6rem;
|
position: relative;
|
top: 0.5rem;
|
}
|
|
:deep(.van-dropdown-menu__bar) {
|
height: auto;
|
box-shadow: none;
|
}
|
|
:deep(.van-dropdown-menu__title--down:after) {
|
margin-top: -14px !important;
|
}
|
|
:deep(.van-dropdown-menu__title:after) {
|
margin-top: -16px;
|
}
|
|
:deep(.van-ellipsis) {
|
display: none;
|
}
|
|
:deep(.van-popup--top) {
|
padding: 10px 20px;
|
font-size: 2rem;
|
}
|
}
|
|
.assets_revenue {
|
font-size: 2rem;
|
color: #646464;
|
font-weight: 600;
|
|
span {
|
color: #6e6e6e;
|
text-decoration: underline dotted;
|
font-weight: 400;
|
}
|
}
|
|
.tabbers {
|
.item {
|
$item_width: 8.3rem;
|
width: $item_width;
|
font-size: 1.8rem;
|
color: $text_color4;
|
|
img {
|
height: $item_width;
|
border-radius: 50%;
|
}
|
}
|
}
|
|
.percentage {
|
div {
|
height: 1rem;
|
border-radius: 0.5rem;
|
}
|
|
&>div:last-child {
|
background: $bg_yellow;
|
}
|
|
&>div:first-child {
|
background: #8A90FE;
|
margin-right: 0.2rem;
|
}
|
}
|
|
.assets_item {
|
color: $text_color4;
|
font-size: 2.1rem;
|
|
.icon {
|
width: 1.8rem;
|
height: 1.8rem;
|
border-radius: 50%;
|
background: $icon-bg;
|
}
|
|
img {
|
width: 2.8rem;
|
height: 2.8rem;
|
border-radius: 50%;
|
}
|
|
.assets_item_light {
|
color: #9b9b9b;
|
font-weight: 300;
|
}
|
}
|
}
|
</style>
|
