| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template #right v-if="activeHead != 0"> |
| | | <template #right> |
| | | <van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" /> |
| | | </template> |
| | | </van-nav-bar> |
| | |
| | | <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> |
| | | </div> |
| | | </template> |
| | | </div> |
| | | |
| | | <template v-else-if="activeHead == 1"> |
| | | |
| | | <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> |
| | | </template> |
| | | |
| | | <template v-else-if="activeHead == 2"> |
| | | <template v-else-if="activeHead1 == 2"> |
| | | <div class="assets_1"> |
| | | {{ $t('交易账户') }} |
| | | </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> |
| | |
| | | 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' |
| | | 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' |
| | | }, |
| | | { |
| | | 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: 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), |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | |
| | | .assets_content, |
| | | .assets_content1 { |
| | | padding: 16px 16px; |
| | | } |
| | | |
| | | .assets_content { |
| | | padding: 16px 16px 10rem; |
| | | @include themify() { |
| | | border-bottom: themed("divi_line") solid 1px; |
| | | } |
| | | } |
| | | |
| | | .assets_1 { |