|
@@ -1,6 +1,5 @@
|
|
<template>
|
|
<template>
|
|
<div class="container">
|
|
<div class="container">
|
|
- <!-- <div class="bg-img"></div> -->
|
|
|
|
<svg-icon name="wallet-bg" class="bg-img" />
|
|
<svg-icon name="wallet-bg" class="bg-img" />
|
|
<div class="user-info-body">
|
|
<div class="user-info-body">
|
|
<div class="user-info-lf">
|
|
<div class="user-info-lf">
|
|
@@ -12,18 +11,18 @@
|
|
/>
|
|
/>
|
|
<div class="user-info">
|
|
<div class="user-info">
|
|
<div class="user-info-name" @click="showWallet = true">
|
|
<div class="user-info-name" @click="showWallet = true">
|
|
- <div>Wallet</div>
|
|
|
|
|
|
+ <div>{{walletStore.username}}</div>
|
|
<svg-icon style="width: 16px; height: 16px;margin-left: 3px;" name="down" />
|
|
<svg-icon style="width: 16px; height: 16px;margin-left: 3px;" name="down" />
|
|
</div>
|
|
</div>
|
|
<div class="user-info-key-body">
|
|
<div class="user-info-key-body">
|
|
- <span class="user-info-key-body-text">0xF3fefE…EcaB</span>
|
|
|
|
|
|
+ <span class="user-info-key-body-text">{{ formatAddress(walletStore.account) }}</span>
|
|
<svg-icon style="width: 16px; height: 16px;" name="copy" />
|
|
<svg-icon style="width: 16px; height: 16px;" name="copy" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="network">
|
|
<div class="network">
|
|
- <svg-icon style="width: 20px; height: 20px;" name="acc" />
|
|
|
|
- <div class="network-name">ACC</div>
|
|
|
|
|
|
+ <van-image width="20px" height="20px" round :src="walletStore.accountIcon"/>
|
|
|
|
+ <div class="network-name">{{walletStore.accountName}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="amount">
|
|
<div class="amount">
|
|
@@ -32,7 +31,7 @@
|
|
<div class="amount-item">
|
|
<div class="amount-item">
|
|
<div class="item-text">
|
|
<div class="item-text">
|
|
<svg-icon class="my" style="width: 28px; height: 28px;" name="my" />
|
|
<svg-icon class="my" style="width: 28px; height: 28px;" name="my" />
|
|
- <div>{{isShow?'2,536.00':'****'}}</div>
|
|
|
|
|
|
+ <div>{{isShow?totalMoney:'****'}}</div>
|
|
</div>
|
|
</div>
|
|
<svg-icon style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
|
|
<svg-icon style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
|
|
</div>
|
|
</div>
|
|
@@ -67,14 +66,14 @@
|
|
<svg-icon style="width: 24px; height: 24px;" name="add" @click="changePop(1)"/>
|
|
<svg-icon style="width: 24px; height: 24px;" name="add" @click="changePop(1)"/>
|
|
</div>
|
|
</div>
|
|
<div class="list-ul">
|
|
<div class="list-ul">
|
|
- <div class="list-li" v-for="item in 10" @click="changePop(2)">
|
|
|
|
|
|
+ <div class="list-li" v-for="item in hotTokensList" @click="changePop(2)">
|
|
<div class="list-li-lf">
|
|
<div class="list-li-lf">
|
|
- <svg-icon style="width: 30px; height: 30px;margin-right: 8px;" name="acc" />
|
|
|
|
- <div>ACC</div>
|
|
|
|
|
|
+ <van-image width="30px" height="30px" round :src="item.logo"/>
|
|
|
|
+ <div style="margin-left: 8px;">{{item.name}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-li-ri">
|
|
<div class="list-li-ri">
|
|
- <div>6.6476474848</div>
|
|
|
|
- <div class="list-li-ri-num">$6.6476474848</div>
|
|
|
|
|
|
+ <div>{{item.balance}}</div>
|
|
|
|
+ <div class="list-li-ri-num">${{item.money}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -87,12 +86,12 @@
|
|
</div>
|
|
</div>
|
|
<div class="tree">
|
|
<div class="tree">
|
|
<div class="tree-lf">
|
|
<div class="tree-lf">
|
|
- <div class="tree-lf-icon" v-for="(item,i) in networkList" :class="i == 0?'active-bg':''">
|
|
|
|
|
|
+ <div class="tree-lf-icon" v-for="(item,i) in networkList" :class="netWorkIndex == i?'active-bg':''" @click="changeNetwork(i)">
|
|
<van-image lazy-load class="network-item-icon" :src="item.icon" />
|
|
<van-image lazy-load class="network-item-icon" :src="item.icon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tree-ri">
|
|
<div class="tree-ri">
|
|
- <div class="tree-ri-title">ACC</div>
|
|
|
|
|
|
+ <div class="tree-ri-title">{{networkList[netWorkIndex].name}}</div>
|
|
<div class="tree-ul">
|
|
<div class="tree-ul">
|
|
<div class="tree-li" v-for="(item,i) in 10" :class="i == 0?'tree-active':''">
|
|
<div class="tree-li" v-for="(item,i) in 10" :class="i == 0?'tree-active':''">
|
|
<van-image
|
|
<van-image
|
|
@@ -127,15 +126,20 @@
|
|
</div>
|
|
</div>
|
|
<!-- 1 -->
|
|
<!-- 1 -->
|
|
<div class="pop-ul" v-if="type == 1">
|
|
<div class="pop-ul" v-if="type == 1">
|
|
- <div class="pop-li" v-for="(item,i) in 3">
|
|
|
|
|
|
+ <div class="pop-li" v-for="(item,i) in hotTokensList">
|
|
<div class="pop-li-lf">
|
|
<div class="pop-li-lf">
|
|
- <svg-icon style="width: 32px; height: 32px;margin-right: 6px;" name="acc" />
|
|
|
|
- <div>
|
|
|
|
- <div>STT</div>
|
|
|
|
- <div class="pop-address">0x712f...7b27</div>
|
|
|
|
|
|
+ <van-image
|
|
|
|
+ width="32px"
|
|
|
|
+ height="32px"
|
|
|
|
+ round
|
|
|
|
+ :src="item.logo"
|
|
|
|
+ />
|
|
|
|
+ <div style="margin-left: 6px;">
|
|
|
|
+ <div>{{item.name}}</div>
|
|
|
|
+ <div class="pop-address">{{ formatAddress(item.address) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <svg-icon style="width: 20px; height: 20px;" :name="i == 0?'add-icon':'del-icon'" />
|
|
|
|
|
|
+ <svg-icon style="width: 20px; height: 20px;" :name="item.hide?'add-icon':'del-icon'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 2 -->
|
|
<!-- 2 -->
|
|
@@ -177,7 +181,7 @@
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
import { useRouter } from 'vue-router'
|
|
- import { getNetwork } from '@/api/path/login.api'
|
|
|
|
|
|
+ import { getNetwork,hotTokens } from '@/api/path/login.api'
|
|
import { useWalletStore } from "@/stores/modules/walletStore";
|
|
import { useWalletStore } from "@/stores/modules/walletStore";
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
const walletStore = useWalletStore();
|
|
const walletStore = useWalletStore();
|
|
@@ -187,6 +191,9 @@
|
|
const showWallet = ref(false);
|
|
const showWallet = ref(false);
|
|
const showHistory = ref(false);
|
|
const showHistory = ref(false);
|
|
const networkList = ref([]);
|
|
const networkList = ref([]);
|
|
|
|
+ const hotTokensList = ref([]);
|
|
|
|
+ const netWorkIndex = ref(0);
|
|
|
|
+ const totalMoney = ref(0);//总数
|
|
const type = ref('');
|
|
const type = ref('');
|
|
const goToPage = (url) => {
|
|
const goToPage = (url) => {
|
|
router.push(url)
|
|
router.push(url)
|
|
@@ -197,6 +204,9 @@
|
|
}
|
|
}
|
|
// 添加钱包
|
|
// 添加钱包
|
|
const addWallet = () => {
|
|
const addWallet = () => {
|
|
|
|
+ walletStore.accountName = networkList.value[netWorkIndex.value].name
|
|
|
|
+ walletStore.accountIcon = networkList.value[netWorkIndex.value].icon
|
|
|
|
+ walletStore.rpcUrl = networkList.value[netWorkIndex.value].url
|
|
router.push({
|
|
router.push({
|
|
path: '/login',
|
|
path: '/login',
|
|
query:{
|
|
query:{
|
|
@@ -204,14 +214,28 @@
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+ // 网络数据
|
|
const initNetwork = async () => {
|
|
const initNetwork = async () => {
|
|
const { data } = await getNetwork({})
|
|
const { data } = await getNetwork({})
|
|
networkList.value = data
|
|
networkList.value = data
|
|
}
|
|
}
|
|
|
|
+ // 切换网络
|
|
|
|
+ const changeNetwork = (i) => {
|
|
|
|
+ netWorkIndex.value = i;
|
|
|
|
+ }
|
|
|
|
+ // 代币数据
|
|
|
|
+ const gethotTokens = async () => {
|
|
|
|
+ const {data} = await hotTokens({chain: walletStore.accountName,address:walletStore.account});
|
|
|
|
+ hotTokensList.value = data;
|
|
|
|
+ totalMoney.value = data.reduce((sum, item) => sum + Number(item.money || 0), 0).toFixed(8);
|
|
|
|
+ }
|
|
|
|
+ const formatAddress = (address) => {
|
|
|
|
+ if (!address) return '';
|
|
|
|
+ return address.slice(0, 8) + '...' + address.slice(-6);
|
|
|
|
+ };
|
|
onMounted(async ()=>{
|
|
onMounted(async ()=>{
|
|
initNetwork();
|
|
initNetwork();
|
|
- const aa = await walletStore.getBalance();
|
|
|
|
- console.log("---",aa)
|
|
|
|
|
|
+ gethotTokens();
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|