<template>
|
<div class="funds-financial">
|
<div class="sub-tabs">
|
<div @click="onTab(0)" :class="{ active: tapIndex === 0 }" class="sub-tab-item">{{ $t('货币理财') }}</div>
|
<div @click="onTab(1)" :class="{ active: tapIndex === 1 }" class="sub-tab-item">{{ $t('矿池理财') }}</div>
|
</div>
|
|
<div class="balance-hero">
|
<div class="balance-hero-top">
|
<div class="balance-label">
|
<span>{{ $t('总资产') }}（USDT）</span>
|
<div class="eye-btn" @click.stop="changeEyes">
|
<img :src="handleImage('../../../assets/image/assets-center/eye-open.png')" v-show="!eyetel" />
|
<img :src="handleImage('../../../assets/image/assets-center/eye-close.png')" v-show="eyetel" />
|
</div>
|
</div>
|
<div class="history-btn" @click="goHistory">
|
<img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" />
|
</div>
|
</div>
|
<div class="balance-amount" v-if="!eyetel">
|
<template v-if="tapIndex === 0">{{ funds.money_finance || '--' }}</template>
|
<template v-if="tapIndex === 1">{{ funds.money_miner || '--' }}</template>
|
</div>
|
<div class="balance-amount" v-else>********</div>
|
<div class="balance-fiat" v-if="!eyetel">
|
≈{{ currency.currency_symbol }}{{
|
tapIndex === 0
|
? (funds.money_finance ? (funds.money_finance * currency.rate).toFixed(2) : ' --')
|
: (funds.money_miner ? (funds.money_miner * currency.rate).toFixed(2) : ' --')
|
}}
|
</div>
|
<div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
|
|
<div class="stats-grid">
|
<div class="stat-block">
|
<div class="stat-block-label">{{ $t('预计日收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
|
<div class="stat-block-value" v-if="!eyetel">{{ finData.today_profit || '--' }}</div>
|
<div class="stat-block-value" v-else>********</div>
|
</div>
|
<div class="stat-block">
|
<div class="stat-block-label">{{ $t('累计收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
|
<div class="stat-block-value" v-if="!eyetel">{{ finData.aready_profit || '0.00' }}</div>
|
<div class="stat-block-value" v-else>********</div>
|
</div>
|
<div class="stat-block">
|
<div class="stat-block-label">{{ $t('托管中总订单') }}</div>
|
<div class="stat-block-value" v-if="!eyetel">{{ finData.order_sum || 0 }}</div>
|
<div class="stat-block-value" v-else>********</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="order-section">
|
<div class="section-header">
|
<span class="section-title">{{ tapIndex === 0 ? $t('所有理财') : $t('所有矿机') }}</span>
|
<span v-if="tapIndex === 0" class="section-link" @click="goRule">{{ $t('规则') }}</span>
|
</div>
|
<template v-if="tapIndex === 0">
|
<financial-list :list="finList" :type="tapIndex" :btnShow="true" />
|
</template>
|
<template v-else>
|
<financial-list :list="machineList" :type="tapIndex" :btnShow="true" />
|
</template>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Icon } from 'vant';
|
import { mapGetters } from "vuex";
|
import financialList from "./financialList.vue";
|
import { financeStatics, getMiningRevenueStatisticsList, getMachineBought, getfinacialProductsBought } from '@/service/financialManagement.api.js'
|
export default {
|
name: "financial",
|
components: {
|
[Icon.name]: Icon,
|
financialList
|
},
|
props: ['funds', 'index'],
|
data() {
|
return {
|
tapIndex: 0,
|
eyetel: false,
|
total: "",
|
finData: {},
|
finList: [],
|
machineList: []
|
// minData: {}
|
}
|
},
|
watch: {
|
index: {
|
handler: function (val) {
|
this.tapIndex = val / 1
|
},
|
immediate: true
|
}
|
},
|
computed: {
|
...mapGetters('home', ['currency'])
|
},
|
mounted() {
|
console.log(this.currency)
|
this.onTab(this.tapIndex)
|
},
|
methods: {
|
handleImage(url) {
|
return new URL(url, import.meta.url).href
|
},
|
onTab(index) {
|
this.tapIndex = index
|
if (index === 0) { // 理财
|
this.getFin()
|
getfinacialProductsBought({
|
page_no: this.page,
|
state: '1'
|
}).then(res => {
|
this.finList = res
|
console.log('已购理财', res)
|
// console.log(data)
|
})
|
} else { // 矿机
|
this.getMin()
|
getMachineBought({
|
page_no: 1,
|
state: 1
|
}).then(res => {
|
this.machineList = res
|
console.log('已购矿机产品', res)
|
})
|
}
|
},
|
getFin() {
|
financeStatics().then(data => {
|
this.finData = data
|
})
|
},
|
getMin() {
|
getMiningRevenueStatisticsList().then(data => {
|
this.finData = data
|
})
|
},
|
changeEyes() {
|
this.eyetel = !this.eyetel
|
},
|
goHistory() {
|
this.$router.push({ path: '/cryptos/financialHistory', query: { type: this.tapIndex } })
|
},
|
goRule() {
|
if (this.tapIndex === 0) {
|
this.$router.push({ path: '/cryptos/fund-rule', query: { back: 0 } })
|
} else {
|
this.$router.push({ path: '/cryptos/machine-rule', query: { back: 0 } })
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/init.scss';
|
|
.funds-financial {
|
padding-top: 16px;
|
padding-bottom: 40px;
|
}
|
|
.sub-tabs {
|
display: flex;
|
gap: 16px;
|
margin-bottom: 24px;
|
}
|
|
.sub-tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 20px 16px;
|
border-radius: 16px;
|
font-size: 28px;
|
transition: all 0.2s ease;
|
@include themify() {
|
background: themed('cont_background');
|
color: themed('text_color1');
|
}
|
|
&.active {
|
color: #fff;
|
background: linear-gradient(135deg, #1a6dff 0%, #004aee 100%);
|
font-weight: 600;
|
box-shadow: 0 6px 16px rgba(0, 74, 238, 0.28);
|
}
|
}
|
|
.balance-hero {
|
padding: 36px 32px;
|
border-radius: 24px;
|
background: linear-gradient(135deg, #1a6dff 0%, #004aee 55%, #0035b8 100%);
|
color: #fff;
|
box-shadow: 0 16px 40px rgba(0, 74, 238, 0.28);
|
margin-bottom: 28px;
|
}
|
|
.balance-hero-top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
|
.balance-label {
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
font-size: 26px;
|
opacity: 0.9;
|
}
|
|
.eye-btn img {
|
width: 36px;
|
height: 22px;
|
}
|
|
.history-btn img {
|
width: 36px;
|
height: 42px;
|
opacity: 0.85;
|
}
|
|
.balance-amount {
|
font-size: 56px;
|
font-weight: 700;
|
line-height: 1.15;
|
}
|
|
.balance-fiat {
|
margin-top: 8px;
|
font-size: 26px;
|
opacity: 0.85;
|
}
|
|
.stats-grid {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12px;
|
margin-top: 28px;
|
padding-top: 24px;
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
}
|
|
.stat-block {
|
flex: 1;
|
min-width: 40%;
|
padding: 16px;
|
border-radius: 14px;
|
background: rgba(255, 255, 255, 0.12);
|
}
|
|
.stat-block-label {
|
font-size: 22px;
|
opacity: 0.85;
|
line-height: 1.3;
|
}
|
|
.stat-block-value {
|
margin-top: 8px;
|
font-size: 28px;
|
font-weight: 600;
|
}
|
|
.order-section {
|
margin-top: 8px;
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
}
|
|
.section-title {
|
font-size: 32px;
|
font-weight: 600;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.section-link {
|
font-size: 26px;
|
color: #004aee;
|
}
|
</style>
|
