feat: 添加资产记录和资金、交易账户视图;更新钱包状态管理和路由配置
This commit is contained in:
@@ -4,59 +4,58 @@ import SolarRoundTransferHorizontalBoldDuotone from "~icons/solar/round-transfer
|
||||
import { getCryptoIcon } from "@/config/crypto";
|
||||
|
||||
const walletStore = useWalletStore();
|
||||
const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
|
||||
const { balances, totalAssetValue } = storeToRefs(walletStore);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="text-md font-semibold my-4">
|
||||
资产分布
|
||||
</div>
|
||||
<div class="text-md font-semibold my-4">
|
||||
资产分布
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="asset-card">
|
||||
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
|
||||
<SolarDollarMinimalisticBoldDuotone />
|
||||
资金账户
|
||||
</div>
|
||||
<div class="font-bold">
|
||||
${{ totalAssetValue.fundingValueUsd }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="asset-card" @click="$router.push('/wallet/funding')">
|
||||
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
|
||||
<SolarDollarMinimalisticBoldDuotone />
|
||||
资金账户
|
||||
</div>
|
||||
<div class="asset-card">
|
||||
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
|
||||
<SolarRoundTransferHorizontalBoldDuotone />
|
||||
交易账户
|
||||
</div>
|
||||
<div class="font-bold">
|
||||
${{ totalAssetValue.tradingValueUsd }}
|
||||
</div>
|
||||
<div class="font-bold">
|
||||
${{ totalAssetValue.fundingValueUsd }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-md font-semibold my-4">
|
||||
资产
|
||||
<div class="asset-card" @click="$router.push('/wallet/trading')">
|
||||
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
|
||||
<SolarRoundTransferHorizontalBoldDuotone />
|
||||
交易账户
|
||||
</div>
|
||||
<div class="font-bold">
|
||||
${{ totalAssetValue.tradingValueUsd }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-list lines="none" class="space-y-5 mt-2!">
|
||||
<ion-item v-for="asset, i in fundingBalances" :key="i" class="">
|
||||
<div class="flex items-center space-x-3 flex-1">
|
||||
<component :is="getCryptoIcon(asset.assetCode)" class="w-8 h-8" />
|
||||
<div class="space-y-1">
|
||||
<div class="font-medium text-md">
|
||||
{{ asset.assetCode }}
|
||||
</div>
|
||||
<div class="text-xs text-text-700 font-bold">
|
||||
Total: ${{ asset.total }}
|
||||
</div>
|
||||
<div class="text-md font-semibold my-4">
|
||||
资产
|
||||
</div>
|
||||
|
||||
<ion-list lines="none" class="space-y-5 mt-2!">
|
||||
<ion-item v-for="asset, i in balances" :key="i" @click="$router.push(`/asset_record/${asset.assetCode}`)">
|
||||
<div class="flex items-center space-x-3 flex-1">
|
||||
<Icon :icon="asset.asset.iconUrl || ''" class="w-8 h-8" />
|
||||
|
||||
<div class="space-y-1">
|
||||
<div class="font-medium text-md">
|
||||
{{ asset.assetCode }}
|
||||
</div>
|
||||
<div class="text-xs text-text-700 font-bold">
|
||||
Total: ${{ asset.total }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-fit font-bold">
|
||||
${{ Number(asset.available) }}
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-fit font-bold">
|
||||
${{ Number(asset.available) }}
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped>
|
||||
|
||||
@@ -16,11 +16,6 @@ const totalAsset = computed(() => Number(totalAssetValue.value.totalValueUsd).to
|
||||
function onCloseModal() {
|
||||
rechargeInstance.value?.$el.dismiss(null, "confirm");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
walletStore.syncFundingBalances();
|
||||
walletStore.syncTradingBalances();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Reference in New Issue
Block a user