<template>
|
<div class="assets">
|
<van-field v-model="searchValue" :placeholder="$t('search')" class="assets_search" left-icon="search" />
|
|
<div class="assets_1">
|
<div class="price_box-tit">{{ $t('总资产估值') }}</div>
|
|
<div class="price_box-text assets_money font-bold mt-5 flex justify-center 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="price-bot">
|
<div>
|
<div class="price-bot-tit mb-3">{{ $t('ProfitDay') }}</div>
|
<div class="price-bot-text">
|
{{ currency.currency_symbol }}{{
|
forexAssets?.money_contract_profit_today ?
|
(forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
|
'--' }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="assets_2 flex justify-between items-center">
|
<div class="flex justify-center items-center" v-for="i in tabList1" :key="i.key" @click="toPage(i.path)">
|
<img :src="i.icon" alt="">
|
<span>{{ i.name }}</span>
|
</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_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_3 mt-10">
|
<div class="assets_item flex justify-start items-center mb-10 font-bold" v-for="item in assetListCopy"
|
: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">0</div>
|
<div class="assets_item_light text-right">0.00</div> -->
|
<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>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch } 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 tabList = [
|
{ key: 1, name: t('充值'), icon: new URL('@/assets/imgs/assets/chonbi.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
|
{ key: 2, name: t('提现'), icon: new URL('@/assets/imgs/assets/tibi.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
|
{ key: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/huazhuan.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 tabList1 = [
|
{ key: 1, name: t('充值'), icon: new URL('@/assets/imgs/assets/cz.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
|
{ key: 2, name: t('提现'), icon: new URL('@/assets/imgs/assets/tx.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
|
{ key: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/hz.png', import.meta.url), path: '/my/transfer' },
|
]
|
|
// 计价切换
|
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 toPage = (path) => {
|
if (!path) return
|
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 assetListCopy = ref([])
|
const getList = () => {
|
_getAllWallet({
|
symbolType: 'cryptos'
|
}).then((res) => {
|
assetList.value = res.extends
|
assetListCopy.value = res.extends
|
// console.log("资产列表", assetList.value);
|
});
|
}
|
|
// 资产列表筛选
|
const searchValue = ref('')
|
watch(searchValue, (newVal) => {
|
assetListCopy.value = assetList.value.filter(item => item.name.toLowerCase().includes(newVal.trim().toLowerCase()))
|
})
|
|
|
getList()
|
getassets()
|
getCurrency()
|
getContractBySymbolType()
|
</script>
|
|
<style lang="scss" scoped>
|
.assets {
|
min-height: 100vh;
|
padding: 2.8rem 2rem 10rem 2rem;
|
color: $text_color;
|
|
: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_search {
|
background-color: $input_background;
|
width: 100%;
|
border-radius: 2.5rem;
|
padding: .5rem 2rem;
|
}
|
|
.assets_1 {
|
background: url('@/assets/image/assets-center/as_bg.png');
|
background-size: 100% 100%;
|
padding: 2rem 2rem 2.375rem;
|
margin: 2.5rem 0 5rem 0;
|
border-radius: 1.125rem;
|
|
.price_box-tit {
|
font-size: 2.2rem;
|
margin-bottom: 1.4rem;
|
display: flex;
|
justify-content: center;
|
}
|
|
.price_box-text {
|
margin-bottom: 1.4rem;
|
font-size: 3.2rem;
|
}
|
|
.price-bot {
|
display: flex;
|
justify-content: space-around;
|
background: rgba(0, 0, 0, .4);
|
border-radius: .75rem;
|
padding: .75rem;
|
|
.price-bot-tit {
|
text-align: center;
|
font-size: 2rem;
|
}
|
|
.price-bot-text {
|
font-weight: 500;
|
color: #fb7171;
|
font-size: 3.2rem;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
|
.assets_2 {
|
margin-bottom: 2.2rem;
|
// padding: 0 1rem;
|
|
&>div {
|
width: 14.625rem;
|
height: 5rem;
|
background-color: $input_background;
|
font-size: 1.6562rem;
|
border-radius: .55rem;
|
|
img {
|
width: 2.5rem;
|
height: 2.5rem;
|
margin-right: 1.375rem;
|
}
|
}
|
}
|
|
.assets_3 {
|
background-color: $input_background;
|
width: 100%;
|
background: #212121;
|
border-radius: 3rem;
|
padding: 2.7rem;
|
box-sizing: border-box;
|
}
|
|
.assets_title {
|
font-size: 2.1rem;
|
}
|
|
.assets_money {
|
color: $text_color3;
|
font-size: 3.4rem;
|
|
.pricing_jj {
|
font-size: 1.6rem;
|
margin-right: -8px;
|
}
|
|
: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: $text_color3;
|
font-weight: 600;
|
|
span {
|
color: $text_color3;
|
text-decoration: underline dotted;
|
font-weight: 400;
|
}
|
}
|
|
.tabbers {
|
.item {
|
$item_width: 8.3rem;
|
width: $item_width;
|
font-size: 1.8rem;
|
color: $text_color3;
|
|
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_color3;
|
font-size: 2.1rem;
|
padding: 1.5rem 0;
|
border-bottom: #555 solid 1px;
|
|
.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: $text_color3;
|
font-weight: 300;
|
}
|
}
|
}
|
</style>
|
