| | |
| | | <li class="flex line"> |
| | | <div class="flex-1"> |
| | | <div>{{ t('ETFTotalAssets') }}</div> |
| | | <p class="value">{{ formatNumberWithComma(assets?.totalAssets) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.totalAssets ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <p class="label">{{ t('ETFTotalLoss') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.profit) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.profit ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <div> |
| | | <p>{{ t('ETFTheDay') }} </p> |
| | | </div> |
| | | <p class="value">{{ formatNumberWithComma(assets?.profitTotal) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.profitTotal ?? '--' }}</p> |
| | | </div> |
| | | </li> |
| | | <li class="flex line"> |
| | | <div class="flex-1"> |
| | | <p class="label"> {{ t('ETFAvailableBalance') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.usdtBalance) ?? '--' }}</p> |
| | | <p class="value">{{ Number(assets?.usdtBalance).toFixed(2) ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <p>{{ t('ETFsAreDesirable') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.usdtBalance) ?? '--' }}</p> |
| | | <p class="value">{{ Number(assets?.usdtBalance).toFixed(2) ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | </div> |
| | |
| | | <li class="flex line"> |
| | | <div class="flex-1"> |
| | | <div>{{ t('USStockTotalAssets') }}</div> |
| | | <p class="value">{{ formatNumberWithComma(assets?.totalAssets) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.totalAssets ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <p class="label">{{ t('UStotalLoss') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.profit) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.profit ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <div> |
| | | <p>{{ t('USStockProfitDay') }}</p> |
| | | </div> |
| | | <p class="value">{{ formatNumberWithComma(assets?.profitTotal) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.profitTotal ?? '--' }}</p> |
| | | </div> |
| | | </li> |
| | | <li class="flex line"> |
| | | <div class="flex-1"> |
| | | <p class="label">{{ t('USStockBalance') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.usdtBalance) ?? '--' }}</p> |
| | | <p class="value">{{ Number(assets?.usdtBalance).toFixed(2) ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <p>{{ t('USdesirable') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.usdtBalance) ?? '--' }}</p> |
| | | <p class="value">{{ Number(assets?.usdtBalance).toFixed(2) ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | </div> |
| | |
| | | <li class="flex line"> |
| | | <div class="flex-1"> |
| | | <div>{{ t('HKStockTotalAssets') }}</div> |
| | | <p class="value">{{ formatNumberWithComma(assets?.totalAssets) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.totalAssets ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <p class="label">{{ t('HKtotalLoss') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.profit) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.profit ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <div> |
| | | <p>{{ t('HKStockProfitDay') }}</p> |
| | | </div> |
| | | <p class="value">{{ formatNumberWithComma(assets?.profitTotal) ?? '--' }}</p> |
| | | <p class="value">{{ assets?.profitTotal ?? '--' }}</p> |
| | | </div> |
| | | </li> |
| | | <li class="flex line"> |
| | | <div class="flex-1"> |
| | | <p class="label">{{ t('HKStockBalance') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.usdtBalance) ?? '--' }}</p> |
| | | <p class="value">{{ Number(assets?.usdtBalance).toFixed(2) ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | <p>{{ t('HKdesirable') }}</p> |
| | | <p class="value">{{ formatNumberWithComma(assets?.usdtBalance) ?? '--' }}</p> |
| | | <p class="value">{{ Number(assets?.usdtBalance).toFixed(2) ?? '--' }}</p> |
| | | </div> |
| | | <div class="flex-1"> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="flex-r"> |
| | | <div class="flex-r-item"> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | <p :class="item.open < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.profitLoss |
| | | }}</p> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | }}</p> |
| | | <p :class="item.open < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.profitLossPercentage && item.profitLossPercentage !== 0 ? |
| | | `${item.profitLossPercentage}%` : 0 |
| | | `${item.profitLossPercentage}%` : 0 |
| | | }}</p> |
| | | </div> |
| | | <div class="flex-r-item"> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.positionVolume |
| | | }}</p> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | }}</p> |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.volume |
| | | }}</p> |
| | | }}</p> |
| | | </div> |
| | | <div class="flex-r-item"> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.price |
| | | }}</p> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | }}</p> |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.currentPrice |
| | | }}</p> |
| | | }}</p> |
| | | </div> |
| | | <div class="flex-r-item"> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.toDayProfitLoss |
| | | }}</p> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'">{{ |
| | | }}</p> |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'">{{ |
| | | item.toDayProfitLossPercentage && item.toDayProfitLossPercentage !== 0 ? |
| | | `${item.toDayProfitLossPercentage}%` : 0 |
| | | `${item.toDayProfitLossPercentage}%` : 0 |
| | | }}</p> |
| | | </div> |
| | | </div> |
| | |
| | | </section> |
| | | </section> |
| | | </template> |
| | | |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, onBeforeUnmount } from 'vue'; |
| | | import { useUserStore } from '@/store/user'; |
| | |
| | | import { _assetsTradeTop } from "@/service/user.api"; |
| | | import { _getQuotes } from '@/service/quotes.api' |
| | | import { useI18n } from 'vue-i18n' |
| | | import { formatNumberWithComma } from '@/utils/utis'; |
| | | |
| | | const props = defineProps({ |
| | | isSell: { |