|
@@ -1,133 +1,133 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <van-pull-refresh v-model="loading" @refresh="onRefresh" style="height:100%">
|
|
|
<svg-icon name="wallet-bg" class="bg-img" />
|
|
|
- <div class="user-info-body">
|
|
|
- <div class="user-info-lf">
|
|
|
- <van-image width="28px" height="28px" round :src="walletStore.avatar" />
|
|
|
- <div class="user-info">
|
|
|
- <div class="user-info-name" @click="showWallet = true">
|
|
|
- <div>{{ walletStore.username }}</div>
|
|
|
- <svg-icon
|
|
|
- style="width: 16px; height: 16px; margin-left: 3px"
|
|
|
- name="down"
|
|
|
- />
|
|
|
+ <van-pull-refresh v-model="loading" @refresh="onRefresh" style="height:100%">
|
|
|
+ <div class="user-info-body">
|
|
|
+ <div class="user-info-lf">
|
|
|
+ <van-image width="28px" height="28px" round :src="walletStore.avatar" />
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="user-info-name" @click="showWallet = true">
|
|
|
+ <div>{{ walletStore.username }}</div>
|
|
|
+ <svg-icon
|
|
|
+ style="width: 16px; height: 16px; margin-left: 3px"
|
|
|
+ name="down"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="user-info-key-body">
|
|
|
+ <span class="user-info-key-body-text">{{
|
|
|
+ formatAddress(walletStore.account)
|
|
|
+ }}</span>
|
|
|
+ <svg-icon
|
|
|
+ class="im-copy-btn"
|
|
|
+ style="width: 16px; height: 16px"
|
|
|
+ name="copy"
|
|
|
+ :data-clipboard-text="walletStore.account"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="user-info-key-body">
|
|
|
- <span class="user-info-key-body-text">{{
|
|
|
- formatAddress(walletStore.account)
|
|
|
- }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="network">
|
|
|
+ <van-image
|
|
|
+ width="20px"
|
|
|
+ height="20px"
|
|
|
+ round
|
|
|
+ :src="walletStore.accountIcon"
|
|
|
+ />
|
|
|
+ <div class="network-name">{{ walletStore.accountName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="amount">
|
|
|
+ <div class="amount-item-box">
|
|
|
+ <div>Total assets</div>
|
|
|
+ <div class="amount-item">
|
|
|
+ <div class="item-text">
|
|
|
+ <svg-icon class="my" style="width: 28px; height: 28px" name="my" />
|
|
|
+ <div>{{ isShow ? totalMoney : "****" }}</div>
|
|
|
+ </div>
|
|
|
<svg-icon
|
|
|
- class="im-copy-btn"
|
|
|
style="width: 16px; height: 16px"
|
|
|
- name="copy"
|
|
|
- :data-clipboard-text="walletStore.account"
|
|
|
+ :name="isShow ? 'eyes' : 'seyes'"
|
|
|
+ @click="isShow = !isShow"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="network">
|
|
|
- <van-image
|
|
|
- width="20px"
|
|
|
- height="20px"
|
|
|
- round
|
|
|
- :src="walletStore.accountIcon"
|
|
|
+ <svg-icon
|
|
|
+ style="width: 24px; height: 24px; margin-right: 27px"
|
|
|
+ name="right"
|
|
|
+ @click="goToPageDetail"
|
|
|
/>
|
|
|
- <div class="network-name">{{ walletStore.accountName }}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="amount">
|
|
|
- <div class="amount-item-box">
|
|
|
- <div>Total assets</div>
|
|
|
- <div class="amount-item">
|
|
|
- <div class="item-text">
|
|
|
- <svg-icon class="my" style="width: 28px; height: 28px" name="my" />
|
|
|
- <div>{{ isShow ? totalMoney : "****" }}</div>
|
|
|
- </div>
|
|
|
+ <div class="card-box">
|
|
|
+ <div class="box-cont" @click="goToPage('exchange')">
|
|
|
<svg-icon
|
|
|
- style="width: 16px; height: 16px"
|
|
|
- :name="isShow ? 'eyes' : 'seyes'"
|
|
|
- @click="isShow = !isShow"
|
|
|
+ class="box-cont-icon"
|
|
|
+ style="width: 30px; height: 30px"
|
|
|
+ name="1"
|
|
|
/>
|
|
|
+ <div>{{ $t("wallet.GoldCoinExchange") }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont" @click="goToPage('proceeds')">
|
|
|
+ <svg-icon
|
|
|
+ class="box-cont-icon"
|
|
|
+ style="width: 30px; height: 30px"
|
|
|
+ name="2"
|
|
|
+ />
|
|
|
+ <div>{{ $t("wallet.Collection") }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont" @click="goToPage('transferDetail')">
|
|
|
+ <svg-icon
|
|
|
+ class="box-cont-icon"
|
|
|
+ style="width: 30px; height: 30px"
|
|
|
+ name="3"
|
|
|
+ />
|
|
|
+ <div>{{ $t("wallet.Transfer") }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont" @click="goToDapp(1)">
|
|
|
+ <svg-icon
|
|
|
+ class="box-cont-icon"
|
|
|
+ style="width: 30px; height: 30px"
|
|
|
+ name="4"
|
|
|
+ />
|
|
|
+ <div>{{ $t("wallet.Competition") }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont" @click="goToDapp(2)">
|
|
|
+ <svg-icon
|
|
|
+ class="box-cont-icon"
|
|
|
+ style="width: 30px; height: 30px"
|
|
|
+ name="5"
|
|
|
+ />
|
|
|
+ <div>{{ $t("wallet.BlockBrowser") }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <svg-icon
|
|
|
- style="width: 24px; height: 24px; margin-right: 27px"
|
|
|
- name="right"
|
|
|
- @click="goToPageDetail"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="card-box">
|
|
|
- <div class="box-cont" @click="goToPage('exchange')">
|
|
|
- <svg-icon
|
|
|
- class="box-cont-icon"
|
|
|
- style="width: 30px; height: 30px"
|
|
|
- name="1"
|
|
|
- />
|
|
|
- <div>{{ $t("wallet.GoldCoinExchange") }}</div>
|
|
|
- </div>
|
|
|
- <div class="box-cont" @click="goToPage('proceeds')">
|
|
|
- <svg-icon
|
|
|
- class="box-cont-icon"
|
|
|
- style="width: 30px; height: 30px"
|
|
|
- name="2"
|
|
|
- />
|
|
|
- <div>{{ $t("wallet.Collection") }}</div>
|
|
|
- </div>
|
|
|
- <div class="box-cont" @click="goToPage('transferDetail')">
|
|
|
- <svg-icon
|
|
|
- class="box-cont-icon"
|
|
|
- style="width: 30px; height: 30px"
|
|
|
- name="3"
|
|
|
- />
|
|
|
- <div>{{ $t("wallet.Transfer") }}</div>
|
|
|
- </div>
|
|
|
- <div class="box-cont" @click="goToDapp(1)">
|
|
|
- <svg-icon
|
|
|
- class="box-cont-icon"
|
|
|
- style="width: 30px; height: 30px"
|
|
|
- name="4"
|
|
|
- />
|
|
|
- <div>{{ $t("wallet.Competition") }}</div>
|
|
|
- </div>
|
|
|
- <div class="box-cont" @click="goToDapp(2)">
|
|
|
- <svg-icon
|
|
|
- class="box-cont-icon"
|
|
|
- style="width: 30px; height: 30px"
|
|
|
- name="5"
|
|
|
- />
|
|
|
- <div>{{ $t("wallet.BlockBrowser") }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-box">
|
|
|
- <div class="list-title">
|
|
|
- <div>{{ $t("wallet.Token") }}</div>
|
|
|
- <svg-icon
|
|
|
- style="width: 24px; height: 24px"
|
|
|
- name="add"
|
|
|
- @click="changePop(1)"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="list-ul">
|
|
|
- <template v-for="(item, i) in walletStore.tokenList" :key="i">
|
|
|
- <div
|
|
|
- class="list-li"
|
|
|
- v-if="item.name == 'ACC' || !item.show"
|
|
|
- @click="changePop(2, item)"
|
|
|
- >
|
|
|
- <div class="list-li-lf">
|
|
|
- <van-image width="30px" height="30px" round :src="item.logo" />
|
|
|
- <div style="margin-left: 8px">{{ item.name }}</div>
|
|
|
- </div>
|
|
|
- <div class="list-li-ri">
|
|
|
- <div>{{ item.balance }}</div>
|
|
|
- <div class="list-li-ri-num">${{ item.money }}</div>
|
|
|
+ <div class="list-box">
|
|
|
+ <div class="list-title">
|
|
|
+ <div>{{ $t("wallet.Token") }}</div>
|
|
|
+ <svg-icon
|
|
|
+ style="width: 24px; height: 24px"
|
|
|
+ name="add"
|
|
|
+ @click="changePop(1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="list-ul">
|
|
|
+ <template v-for="(item, i) in walletStore.tokenList" :key="i">
|
|
|
+ <div
|
|
|
+ class="list-li"
|
|
|
+ v-if="item.name == 'ACC' || !item.show"
|
|
|
+ @click="changePop(2, item)"
|
|
|
+ >
|
|
|
+ <div class="list-li-lf">
|
|
|
+ <van-image width="30px" height="30px" round :src="item.logo" />
|
|
|
+ <div style="margin-left: 8px">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list-li-ri">
|
|
|
+ <div>{{ item.balance }}</div>
|
|
|
+ <div class="list-li-ri-num">${{ item.money }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </van-pull-refresh>
|
|
|
+ </van-pull-refresh>
|
|
|
<van-popup v-model:show="showWallet" position="bottom" round>
|
|
|
<div class="pop-content">
|
|
|
<div class="pop-title">
|
|
@@ -494,6 +494,12 @@ onMounted(async () => {
|
|
|
left: 0;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
+ :deep(.van-pull-refresh__text){
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ :deep(.van-loading__text){
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
.user-info-body {
|
|
|
padding: 60px 17px 25px;
|
|
|
display: flex;
|