You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
452 lines
12 KiB
452 lines
12 KiB
<template>
|
|
<view class="dashboard-wrapper">
|
|
<!-- 1. 顶部用户信息 -->
|
|
<view class="user-profile">
|
|
<img :src="userimg" width="32" />
|
|
<view class="user-info">
|
|
<view class="username">{{ user.account }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 2. 总资产卡片 -->
|
|
<view class="total-asset-card">
|
|
<view class="card-header">
|
|
<view class="heroGlow"></view>
|
|
<span>{{ $t("base.d6") }}</span>
|
|
<!-- 点击眼睛切换 isVisible 状态 -->
|
|
<!-- <i class="el-icon-view eye-icon" :class="{ 'is-hidden': !isVisible }"></i> -->
|
|
<view @click="toggleVisibility">
|
|
<image src="@/assets/img/view.png" class="eye-icon" v-if="isVisible==false"></image>
|
|
<image src="@/assets/img/hide.png" class="eye-icon" v-else></image>
|
|
</view>
|
|
</view>
|
|
<view class="total-amount">
|
|
<!-- 动态显示金额或星号 -->
|
|
<span class="number">{{ formatMoney(account.total_assets_usd,false) }}</span>
|
|
<span class="currency">{{coin_name}}</span>
|
|
</view>
|
|
<view style="color: #ffffff;">≈ {{ formatMoney(account.total_assets_btc,true) }} BTC</view>
|
|
</view>
|
|
|
|
<!-- 3. 四宫格：子账户资产 -->
|
|
<view class="sub-assets-grid">
|
|
<!-- 资金账户 -->
|
|
<view class="sub-card">
|
|
<view class="sub-title text-yellow"><span style="font-size: 18px;height: 18px;line-height: 18px;margin-right: 18rpx;">$</span> {{ $t("homeNewText.hh20") }}</view>
|
|
<view class="sub-amount">{{ formatMoney(account.funds_account_usd,false) }}</view>
|
|
<view class="sub-currency">{{coin_name}}</view>
|
|
</view>
|
|
<!-- 现货账户 -->
|
|
<view class="sub-card">
|
|
<view class="sub-title text-green"><img src="@/assets/img/home/home28.png" style="width: 18px;margin-right: 18rpx;" /> {{ $t("homeNewText.hh21") }}</view>
|
|
<view class="sub-amount">{{ formatMoney(account.total_assets_btc,true) }}</view>
|
|
<view class="sub-currency">BTC</view>
|
|
</view>
|
|
<!-- 合约资产 -->
|
|
<view class="sub-card">
|
|
<view class="sub-title text-blue"><i class="el-icon-document" style="font-size: 18px;margin-right: 18rpx;"></i> {{ $t("homeNewText.hh22") }}</view>
|
|
<view class="sub-amount">{{ formatMoney(account.contract_account_usd) }}</view>
|
|
<view class="sub-currency">{{coin_name}}</view>
|
|
</view>
|
|
<!-- 信用额度 -->
|
|
<view class="sub-card">
|
|
<view class="sub-title text-lightblue"><i class="el-icon-bank-card" style="font-size: 18px;margin-right: 18rpx;"></i> {{ $t("homeNewText.hh4") }}</view>
|
|
<view class="sub-amount">{{ formatMoney(assets.credit) }}</view>
|
|
<view class="sub-currency">{{coin_name}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 4. 快捷操作区 (使用 v-for 循环渲染) -->
|
|
<view class="action-panel">
|
|
<view class="action-grid">
|
|
|
|
<view class="action-item">
|
|
<v-link class="tolink" tag="view" :to="ProfileDetail.primary_status!=1?'/pages/auth/index':'/pages/assets/recharge'">
|
|
<view class="icon-box">
|
|
<img v-if="theme == 'light'" src="../../assets/img/home/home34.png" width="22" />
|
|
<img v-else src="../../assets/img/home/home35.png" width="22" />
|
|
</view>
|
|
<view class="action-name">{{ $t("homeNewText.hh0") }}</view>
|
|
</v-link>
|
|
</view>
|
|
<view class="action-item">
|
|
<v-link class="tolink" tag="view" :to="ProfileDetail.status==1?'/pages/auth/index':(ProfileDetail.status==2?'/pages/assets/draw':'/pages/auth/senior')">
|
|
<view class="icon-box">
|
|
<img v-if="theme == 'light'" src="../../assets/img/home/home29.png" width="22" />
|
|
<img v-else src="../../assets/img/home/home36.png" width="22" />
|
|
</view>
|
|
<view class="action-name">{{ $t("homeNewText.hh1") }}</view>
|
|
</v-link>
|
|
</view>
|
|
<view class="action-item">
|
|
<v-link class="tolink" tag="view" to="/pages/transfer/index">
|
|
<view class="icon-box">
|
|
<img v-if="theme == 'light'" src="../../assets/img/home/home30.png" width="22" />
|
|
<img v-else src="../../assets/img/home/home37.png" width="22" />
|
|
</view>
|
|
<view class="action-name">{{ $t("base.d8") }}</view>
|
|
</v-link>
|
|
</view>
|
|
<view class="action-item">
|
|
<v-link class="tolink" tag="view" to="/pages/mineview/billview">
|
|
<view class="icon-box">
|
|
<img v-if="theme == 'light'" src="../../assets/img/home/home31.png" width="22" />
|
|
<img v-else src="../../assets/img/home/home38.png" width="22" />
|
|
</view>
|
|
<view class="action-name">{{ $t("homeNewText.hh23") }}</view>
|
|
</v-link>
|
|
</view>
|
|
<view class="action-item">
|
|
<v-link class="tolink" tag="view" to="/pages/exchange/exchangeHis">
|
|
<view class="icon-box">
|
|
<img v-if="theme == 'light'" src="../../assets/img/home/home32.png" width="22" />
|
|
<img v-else src="../../assets/img/home/home39.png" width="22" />
|
|
</view>
|
|
<view class="action-name">{{ $t("homeNewText.hh24") }}</view>
|
|
</v-link>
|
|
</view>
|
|
<view class="action-item">
|
|
<v-link class="tolink" tag="view" to="/pages/mineview/flashswap">
|
|
<view class="icon-box">
|
|
<img v-if="theme == 'light'" src="../../assets/img/home/home33.png" width="30" />
|
|
<img v-else src="../../assets/img/home/home40.png" width="30" />
|
|
</view>
|
|
<view class="action-name">{{ $t("homeNewText.hh25") }}</view>
|
|
</v-link>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 5. 底部信息卡片 -->
|
|
<view class="footer-card">
|
|
<view class="footer-title">Want to be part of it? Let's talk.</view>
|
|
<a href="mailto:support@bondsmaxinst.com" class="footer-email">support@bondsmaxinst.com</a>
|
|
<view class="footer-desc">
|
|
<p>© 2024 bonds.com, LLC. All rights reserved</p>
|
|
<p>Securities offered through bonds.com, LLC. Member: FINRA/SIPC.</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
import Wallet from "@/api/wallet";
|
|
import math from "@/utils/class/math.js";
|
|
import Profile from "@/api/profile";
|
|
import Contract from "@/api/contract.js";
|
|
|
|
export default {
|
|
name: 'AssetDashboard',
|
|
data() {
|
|
return {
|
|
// 核心控制变量：是否显示金额明文
|
|
isVisible: false,
|
|
coin_name:"USDT",
|
|
// 资产数据源 (保持原始数据结构不变，只在渲染时进行格式化)
|
|
assets: {
|
|
total: '1,000,794.92',
|
|
funding: '1,000,001.00',
|
|
spot: '332.06',
|
|
contract: '356.22',
|
|
credit: '0.00'
|
|
},
|
|
user: {},
|
|
avatarList: [
|
|
require('@/assets/img/home/home24.png'),
|
|
require('@/assets/img/home/home25.png'),
|
|
require('@/assets/img/home/home26.png'),
|
|
require('@/assets/img/home/home27.png')
|
|
],
|
|
userimg:'',
|
|
account: {},
|
|
ProfileDetail: {},
|
|
user_auth_level: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
theme: "theme",
|
|
}),
|
|
},
|
|
props: {
|
|
isShow: {
|
|
default: true,
|
|
type: Boolean,
|
|
required: false,
|
|
}
|
|
},
|
|
watch: {
|
|
isShow(n, o) {
|
|
if (n) {
|
|
this.personalAssets();
|
|
this.getAuthInfo();
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.user = JSON.parse(localStorage.getItem('user'))
|
|
if(this.user){
|
|
const randomIndex = Math.floor(Math.random() * this.avatarList.length); //Math.random() 生成一个 0 到 1 之间的随机数
|
|
this.userimg = this.avatarList[randomIndex];
|
|
}
|
|
this.personalAssets();
|
|
this.getAuthInfo();
|
|
},
|
|
methods: {
|
|
omitTo: math.omitTo,
|
|
// 切换眼睛的可见状态
|
|
toggleVisibility() {
|
|
this.isVisible = !this.isVisible;
|
|
},
|
|
|
|
// 金额格式化函数（核心逻辑在此）
|
|
formatMoney(value,type) {
|
|
if (this.isVisible) return "******";
|
|
let num = this.omitTo(value, type ? 8 : 2);
|
|
if (isNaN(num) || num === null || num === '') return '0.00';
|
|
|
|
let parts = num.toString().split('.');
|
|
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
return parts.join('.');
|
|
},
|
|
personalAssets() {
|
|
Wallet.personalAssets().then((res) => {
|
|
this.account = res.data;
|
|
});
|
|
},
|
|
getAuthInfo() {
|
|
Profile.getAuthInfo().then(res => {
|
|
this.ProfileDetail = res.data;
|
|
this.user_auth_level = res.data.primary_status
|
|
// console.log(this.ProfileDetail, 11111);
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-wrapper {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
color: var(--light);
|
|
background: var(--col10); /* 确保背景纯白 */
|
|
}
|
|
|
|
/* ================= 1. 用户信息 ================= */
|
|
.user-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
.user-info .username {
|
|
width: 520rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: var(--text-col);
|
|
}
|
|
.user-info .uid {
|
|
font-size: 26rpx;
|
|
color: #6b7280;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
/* ================= 2. 总资产卡片 ================= */
|
|
.total-asset-card {
|
|
background: var(--col6);
|
|
border-radius: 24rpx;
|
|
padding: 40rpx;
|
|
margin-bottom: 24rpx;
|
|
overflow: hidden;
|
|
}
|
|
.total-asset-card .card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #6b7280;
|
|
font-size: 28rpx;
|
|
margin-bottom: 24rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.heroGlow{
|
|
width: 140px;
|
|
height: 140px;
|
|
right: -50px;
|
|
top: -50px;
|
|
position: absolute;
|
|
background: radial-gradient(circle, rgba(251, 191, 36, .22) 0%, rgba(251, 191, 36, 0) 72%);
|
|
}
|
|
|
|
/* 眼睛图标样式和交互 (移动端使用 active 代替 hover) */
|
|
.eye-icon {
|
|
top: -5px;
|
|
z-index: 2;
|
|
right: -5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 5px;
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
align-items: center;
|
|
transition: all 0.3s;
|
|
background: #ffffff1f;
|
|
justify-content: center;
|
|
}
|
|
.eye-icon:active {
|
|
color: #ffffff;
|
|
opacity: 0.8;
|
|
}
|
|
/* .eye-icon.is-hidden { opacity: 0.5; } */
|
|
|
|
.total-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 16rpx;
|
|
}
|
|
.total-amount .number {
|
|
font-size: 56rpx;
|
|
font-weight: 700;
|
|
/* color: #111827; */
|
|
color: #ffffff;
|
|
}
|
|
.total-amount .currency {
|
|
font-size: 28rpx;
|
|
/* color: #6b7280; */
|
|
color: #ffffff;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* ================= 3. 子资产四宫格 ================= */
|
|
.sub-assets-grid {
|
|
padding: 32rpx;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
background-color: var(--col11);
|
|
border-radius: 24rpx;
|
|
border: 1px solid rgba(148, 163, 184, .14);
|
|
box-shadow: 0 .373333rem .853333rem rgba(15, 23, 42, .06);
|
|
}
|
|
.sub-card {
|
|
background-color: var(--col12);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
}
|
|
.sub-title {
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
/* gap: 12rpx; */
|
|
}
|
|
.sub-amount {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #111827;
|
|
margin-bottom: 8rpx;
|
|
min-height: 50rpx;
|
|
}
|
|
.sub-currency {
|
|
font-size: 24rpx;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* 颜色变量保持不变 */
|
|
.text-yellow { color: #f59e0b; }
|
|
.text-green { color: #10b981; }
|
|
.text-blue { color: #3b82f6; }
|
|
.text-lightblue { color: #0ea5e9; }
|
|
|
|
/* ================= 4. 操作区面板 ================= */
|
|
.action-panel {
|
|
/* background-color: #f3f4f6; */
|
|
/* background-color: var(--col7); */
|
|
background-color: var(--col11);
|
|
border: 1px solid rgba(148, 163, 184, .14);
|
|
box-shadow: 0 .373333rem .853333rem rgba(15, 23, 42, .06);
|
|
border-radius: 24rpx;
|
|
padding: 48rpx 32rpx;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
.action-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 40rpx 20rpx;
|
|
}
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 60px;
|
|
/* gap: 16rpx; */
|
|
}
|
|
.tolink{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.icon-box {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
background-color: var(--col13);
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 40rpx;
|
|
color: #374151;
|
|
text-align: center;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
transition: transform 0.2s;
|
|
}
|
|
/* 移动端点击反馈 */
|
|
.action-item:active .icon-box {
|
|
transform: scale(0.95);
|
|
/* background-color: #fafafa; */
|
|
}
|
|
.navigator-hover{
|
|
background-color: transparent;
|
|
}
|
|
.action-name {
|
|
font-size: 24rpx;
|
|
color: var(--col9);
|
|
text-align: center;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
/* ================= 5. 底部卡片 ================= */
|
|
.footer-card {
|
|
background-color: #f6efe3;
|
|
border-radius: 24rpx;
|
|
padding: 40rpx;
|
|
}
|
|
.footer-title {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #1f2937;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.footer-email {
|
|
color: #d97706;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
.footer-desc {
|
|
font-size: 24rpx;
|
|
color: #6b7280;
|
|
line-height: 1.6; /* 行高比例无需转换 */
|
|
}
|
|
</style>
|