<template>
|
<section class="my-index">
|
<!-- 顶部：资产 + 设置图标，浅蓝灰渐变 -->
|
<assets-head :title="$t('资产')" :show-left="false">
|
<template #default>
|
<van-icon name="setting-o" size="22" class="my-header-icon" @click="onRoute('/safety')" />
|
</template>
|
</assets-head>
|
|
<div class="my-content">
|
<!-- 用户/账号信息区 -->
|
<div class="my-card my-user-row" @click="!(userStore.userInfo && userStore.userInfo.token) && onRoute('/login')">
|
<div class="my-user-left">
|
<div class="my-avatar">
|
<van-icon name="user-o" size="28" class="my-avatar-icon" />
|
</div>
|
<div class="my-user-text">
|
<div class="my-user-name">
|
{{ (userStore.userInfo && userStore.userInfo.token) ? (userStore.userInfo.username || '') : $t('请登录') }}
|
<span v-if="!(userStore.userInfo && userStore.userInfo.token)" class="my-user-red-bar"></span>
|
</div>
|
<div class="my-user-ref">
|
{{ $t('推荐码') }}: {{ (userStore.userInfo && userStore.userInfo.usercode) || '91872511' }}
|
<van-icon name="records-o" size="14" class="my-copy-icon" @click.stop="copyRefCode" />
|
</div>
|
</div>
|
</div>
|
<van-icon name="arrow" class="my-arrow" />
|
</div>
|
|
<!-- 总资产估值 -->
|
<div class="my-card my-asset-row" @click="(userStore.userInfo && userStore.userInfo.token) && onRoute('/my/assets')">
|
<div class="my-asset-left">
|
<div class="my-asset-label">{{ $t('总资产估值') }} {{ $t('美元') }}</div>
|
<div class="my-asset-value">{{ totalAsset }}</div>
|
</div>
|
<van-icon name="arrow" class="my-arrow" />
|
</div>
|
|
<!-- 订金 / 提取 / 划转：浅紫底容器，本地图标 index-function1 / quick-function2 / quick-function3 -->
|
<div class="my-actions-card">
|
<div style="padding: 10px 14px;display: flex;width: 100%;
|
background-color: rgb(236, 230, 255);
|
border-radius: 16px;">
|
<div class="my-action-btn" @click="onRoute('/cryptos/recharge/rechargeList')">
|
<div class="my-action-circle">
|
<img :src="actionIcon1" alt="" class="my-action-img" />
|
</div>
|
<span class="my-action-label">{{ $t('订金') }}</span>
|
</div>
|
<div class="my-action-btn" @click="onRoute('/cryptos/Withdraw/withdrawPage')">
|
<div class="my-action-circle">
|
<img :src="actionIcon2" alt="" class="my-action-img" />
|
</div>
|
<span class="my-action-label">{{ $t('提取') }}</span>
|
</div>
|
<div class="my-action-btn" @click="onRoute('/my/transfer')">
|
<div class="my-action-circle">
|
<img :src="actionIcon3" alt="" class="my-action-img" />
|
</div>
|
<span class="my-action-label">{{ $t('划转') }}</span>
|
</div>
|
</div>
|
|
</div>
|
|
<!-- 列表块1：资金明细 -->
|
<div class="my-list-card">
|
<!-- <div class="my-list-item" @click="onRoute('/my/aiDetail')">
|
<van-icon name="cluster-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('人工智能交易') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div> -->
|
<div class="my-list-item" @click="onRoute('/cryptos/accountChange')">
|
<van-icon name="chart-trending-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('资金明细') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
<!-- <div class="my-list-item" @click="onRoute('/my/airdrop')">
|
<van-icon name="gift-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('空投') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div> -->
|
</div>
|
|
<!-- 列表块2：加密货币交易、申请成为交易员、期货订单、现货订单 -->
|
<div class="my-list-card">
|
<div class="my-list-item" @click="onRoute('/cryptos/trade/btcusdt')">
|
<van-icon name="friends-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('加密货币交易') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
<div class="my-list-item my-list-item--na">
|
<van-icon name="chat-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('申请成为交易员') }}</span>
|
<span class="my-list-na">{{ $t('不适用') }}</span>
|
</div>
|
<div class="my-list-item" @click="onRoute('/trade/index')">
|
<van-icon name="completed" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('期货订单') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
<div class="my-list-item" @click="onRoute('/cryptos/trade/btcusdt')">
|
<van-icon name="description" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('现货订单') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
</div>
|
|
<!-- 列表块3：实名认证、客服 -->
|
<div class="my-list-card">
|
<div class="my-list-item" @click="onRoute('/certificationCenter')">
|
<van-icon name="idcard" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('实名认证') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
<div class="my-list-item" @click="onRoute('/customerService')">
|
<van-icon name="service-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('客服') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
</div>
|
|
<!-- 列表块4：Privacy Of BitX、About BitX -->
|
<div class="my-list-card">
|
<div class="my-list-item" @click="onRoute('/aboutUs?serviceTerm=24')">
|
<van-icon name="shield-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('Privacy Of BitX') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
<div class="my-list-item" @click="onRoute('/aboutUs?serviceTerm=20')">
|
<van-icon name="info-o" size="20" class="my-list-icon" />
|
<span class="my-list-title">{{ $t('About BitX') }}</span>
|
<van-icon name="arrow" size="16" class="my-list-arrow" />
|
</div>
|
</div>
|
</div>
|
</section>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { _getIdentify, _getKycHighLevel, _info } from "@/service/user.api.js";
|
import { _getContractBySymbolType } from "@/service/etf.api.js";
|
import { useUserStore } from '@/store/user';
|
import { useI18n } from "vue-i18n";
|
import useClipboard from "vue-clipboard3";
|
import { showToast } from "vant";
|
import AssetsHead from '@/components/Transform/assets-head/index.vue';
|
// 订金/提取/转移 三个图标（本地图片，用 import 保证打包后地址正确）
|
import actionIcon1 from '@/assets/imgs/new/index-function1.png';
|
import actionIcon2 from '@/assets/imgs/new/quick-function2.png';
|
import actionIcon3 from '@/assets/imgs/new/quick-function3.png';
|
|
const { t } = useI18n();
|
const { toClipboard } = useClipboard();
|
const router = useRouter();
|
const userStore = useUserStore();
|
|
const status = ref(null);
|
const kycHighStatus = ref(null);
|
const userdata = ref({});
|
const moneyContract = ref(null); // assets!getContractBySymbolType.action 的 money_contract
|
|
const totalAsset = computed(() => {
|
if (!(userStore.userInfo && userStore.userInfo.token)) return '0';
|
if (moneyContract.value != null && moneyContract.value !== '') {
|
return Number(moneyContract.value).toFixed(2);
|
}
|
const balance = userStore.userInfo.balance ?? userdata.value?.money ?? 0;
|
return Number(balance).toFixed(2);
|
});
|
|
const onRoute = (path) => {
|
router.push(path);
|
};
|
|
const copyRefCode = async () => {
|
const code = (userStore.userInfo && userStore.userInfo.usercode) || '91872511';
|
try {
|
await toClipboard(code);
|
showToast(t('copySuccess'));
|
} catch (e) {
|
console.error(e);
|
}
|
};
|
|
onMounted(() => {
|
if (userStore.userInfo && userStore.userInfo.token) {
|
getIdentify();
|
getKycHighLevel();
|
getinfo();
|
getContractAsset();
|
}
|
});
|
|
const getinfo = () => {
|
_info().then((data) => {
|
userdata.value = data;
|
}).catch(() => {});
|
};
|
|
const getContractAsset = () => {
|
_getContractBySymbolType('cryptos').then((res) => {
|
moneyContract.value = res?.money_contract ?? null;
|
}).catch(() => {});
|
};
|
const getIdentify = () => {
|
_getIdentify().then(data => { status.value = data.status; });
|
};
|
const getKycHighLevel = () => {
|
_getKycHighLevel().then(data => { kycHighStatus.value = data.status; });
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/theme/index.scss';
|
|
/* 一比一还原图片：扁平、浅紫容器、紫色圆图标+下方深色文字 */
|
$my-bg: #f8f8f8;
|
$my-card-bg: #ffffff;
|
$my-text: #333333;
|
$my-text-secondary: #666666;
|
$my-text-light: #999999;
|
$my-purple: #7b3be2;
|
$my-actions-bg: #f9f5ff;
|
/* 顶部渐变：蓝透明 → 页面底，--bgoppose 可在外层定义 */
|
$my-header-bg: linear-gradient(-180deg, rgba(2, 149, 253, 0.1), var(--bgoppose, #fff));
|
|
.my-index {
|
min-height: 100vh;
|
background: $my-bg;
|
padding-bottom: 80px;
|
position: relative;
|
/* 顶部渐变向下延伸一块区域 */
|
&::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
height: 130px;
|
background: $my-header-bg;
|
z-index: 0;
|
pointer-events: none;
|
}
|
}
|
.my-content {
|
position: relative;
|
z-index: 1;
|
}
|
|
:deep(#assetsHead .van-nav-bar) {
|
background: transparent !important;
|
.van-nav-bar__content { height: 56px; }
|
.van-nav-bar__title { font-size: 22px; font-weight: 700; color: $my-text; }
|
.van-nav-bar__right { padding-right: 16px; }
|
}
|
.my-header-icon { color: $my-text; }
|
|
.my-card {
|
// background: $my-card-bg;
|
border-radius: 12px;
|
padding: 10px 20px;
|
// margin-bottom: 12px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border: none;
|
}
|
|
// .my-user-row { margin-bottom: 12px; }
|
.my-user-left {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
.my-avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background: $my-purple;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
.my-avatar-icon { color: #fff; }
|
.my-user-text { min-width: 0; }
|
.my-user-name {
|
font-size: 17px;
|
font-weight: 400;
|
color: $my-text;
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
}
|
.my-user-red-bar {
|
width: 2px;
|
height: 12px;
|
background: #ee0a24;
|
border-radius: 1px;
|
flex-shrink: 0;
|
}
|
.my-user-ref {
|
font-size: 13px;
|
color: $my-text-light;
|
margin-top: 6px;
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
}
|
.my-copy-icon { color: $my-text-light; flex-shrink: 0; }
|
.my-arrow { color: $my-text-secondary; font-size: 16px; }
|
|
.my-asset-row { background-color: #fff; }
|
.my-asset-left { min-width: 0; }
|
.my-asset-label {
|
font-size: 13px;
|
color: $my-text-light;
|
margin-bottom: 4px;
|
}
|
.my-asset-value {
|
font-size: 30px;
|
font-weight: 700;
|
color: $my-text;
|
}
|
|
/* 三按钮：浅紫底容器无边框，紫色圆+白图标，下方深色文字 */
|
.my-actions-card {
|
background-color: #fff;
|
border-radius: 14px;
|
padding: 14px 20px;
|
margin-bottom: 16px;
|
display: flex;
|
justify-content: space-between;
|
gap: 16px;
|
border: none;
|
box-shadow: none;
|
}
|
.my-action-btn {
|
flex: 1;
|
min-width: 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
gap: 10px;
|
cursor: pointer;
|
}
|
.my-action-circle {
|
width: 50px;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.van-icon { color: #fff; }
|
.my-action-img {
|
width: 45px;
|
height: 45px;
|
object-fit: contain;
|
}
|
}
|
.my-action-label {
|
font-size: 13px;
|
font-weight: 400;
|
color: $my-text;
|
}
|
|
/* 列表块：白底、无边框、细分割线、扁平 */
|
.my-list-card {
|
background: $my-card-bg;
|
border-radius: 12px;
|
margin-bottom: 12px;
|
overflow: hidden;
|
border: none;
|
box-shadow: none;
|
}
|
.my-list-item {
|
display: flex;
|
align-items: center;
|
padding: 16px 20px;
|
font-size: 15px;
|
color: $my-text;
|
}
|
.my-list-icon { color: $my-text-secondary; margin-right: 12px; flex-shrink: 0; }
|
.my-list-title { flex: 1; }
|
.my-list-arrow { color: $my-text-secondary; flex-shrink: 0; }
|
.my-list-item--na { cursor: default; }
|
.my-list-na {
|
font-size: 12px;
|
color: $my-text-secondary;
|
flex-shrink: 0;
|
}
|
</style>
|
