<template>
|
<div id="cryptos" class="fund-orders-page">
|
<assets-head :title="$t('我的投资')" :back-func="backFunc" />
|
|
<!-- 上半部分：数据展示卡片（参照 financial.vue 数据） -->
|
<div class="data-card">
|
<div class="data-row">
|
<span class="data-label">{{ $t('总投入') }}</span>
|
<span class="data-value">{{ formatAmount(statiscis.amount_sum) }} USD</span>
|
</div>
|
<div class="data-row">
|
<span class="data-label">{{ $t('累计收入') }}</span>
|
<span class="data-value">{{ formatAmount(statiscis.aready_profit) }} USD</span>
|
</div>
|
<div class="data-row">
|
<span class="data-label">{{ $t('每日收益') }}</span>
|
<span class="data-value">{{ formatAmount(statiscis.today_profit) }} USD</span>
|
</div>
|
</div>
|
|
<!-- 下半部分：Tab + 列表（参照 FinancialHistory） -->
|
<div class="tabs-wrap">
|
<div class="tabs-bar">
|
<div
|
v-for="(tab, idx) in tabList"
|
:key="idx"
|
class="tab-item"
|
:class="{ active: activeTab === idx }"
|
@click="onTab(idx)"
|
>
|
{{ tab }}
|
</div>
|
</div>
|
<div class="list-wrap">
|
<van-pull-refresh
|
v-model="isLoading"
|
:pulling-text="$t('下拉即可刷新')"
|
:loosing-text="$t('释放即可刷新')"
|
:loading-text="$t('加载中')"
|
@refresh="onRefresh"
|
>
|
<van-list
|
v-model:loading="loading"
|
:finished="finished"
|
:finished-text="$t('没有更多了')"
|
@load="onLoad"
|
>
|
<template v-if="list.length">
|
<financial-list
|
:list="list"
|
:type="0"
|
:btnShow="activeTab === 0"
|
:goBack="true"
|
/>
|
</template>
|
<div v-else class="empty-state">
|
<img src="@/assets/image/kong.png" alt="" class="empty-icon" />
|
<div class="empty-text">{{ $t('暂无数据') }}</div>
|
</div>
|
</van-list>
|
</van-pull-refresh>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from '@/components/Transform/assets-head/index.vue'
|
import financialList from '@/components/Transform/assetsCenter/financialList.vue'
|
import { financeStatics, getfinacialProductsBought } from '@/service/financialManagement.api.js'
|
import { _fundRecord } from '@/service/fund.api'
|
import { List, PullRefresh } from 'vant'
|
|
export default {
|
name: 'FundOrders',
|
components: {
|
assetsHead,
|
financialList,
|
[List.name]: List,
|
[PullRefresh.name]: PullRefresh
|
},
|
data() {
|
return {
|
statiscis: {},
|
activeTab: 0,
|
tabList: [this.$t('购买'), this.$t('赎回'), this.$t('利息')],
|
list: [],
|
page: 1,
|
loading: false,
|
finished: false,
|
isLoading: false
|
}
|
},
|
methods: {
|
formatAmount(v) {
|
if (v == null || v === '') return '0.0000'
|
const n = Number(v)
|
return isNaN(n) ? '0.0000' : n.toFixed(4)
|
},
|
backFunc() {
|
this.$router.push('/cryptos/fund')
|
},
|
onTab(idx) {
|
this.activeTab = idx
|
this.init()
|
},
|
onRefresh() {
|
this.init()
|
},
|
onLoad() {
|
// 防止与 init() 触发的首次加载重复
|
if (this.loading) return
|
this.fetchList()
|
},
|
init() {
|
this.page = 1
|
this.list = []
|
this.finished = false
|
this.fetchStatiscis()
|
this.loading = true
|
this.fetchList()
|
},
|
fetchStatiscis() {
|
financeStatics().then((res) => {
|
this.statiscis = res || {}
|
}).catch(() => {
|
this.statiscis = {}
|
})
|
},
|
fetchList() {
|
// 与 FinancialHistory 一致：0=购买(state 1)，1=赎回(state 2)，2=利息
|
if (this.activeTab === 0) {
|
getfinacialProductsBought({ page_no: this.page, state: '1' }).then((res) => {
|
this.handleListData(res)
|
}).catch(() => {
|
this.isLoading = false
|
this.loading = false
|
this.finished = true
|
})
|
} else if (this.activeTab === 1) {
|
getfinacialProductsBought({ page_no: this.page, state: '2' }).then((res) => {
|
this.handleListData(res)
|
}).catch(() => {
|
this.isLoading = false
|
this.loading = false
|
this.finished = true
|
})
|
} else {
|
_fundRecord('finance', this.page, 'finance_profit').then((res) => {
|
this.handleListData(res)
|
}).catch(() => {
|
this.isLoading = false
|
this.loading = false
|
this.finished = true
|
})
|
}
|
},
|
handleListData(data) {
|
this.isLoading = false
|
const list = Array.isArray(data) ? data : []
|
this.list = this.list.concat(list)
|
this.loading = false
|
if (list.length < 10) this.finished = true
|
this.page++
|
}
|
},
|
created() {
|
this.tabList = [this.$t('购买'), this.$t('赎回'), this.$t('利息')]
|
if (this.$route.query.tab != null) {
|
this.activeTab = Number(this.$route.query.tab) || 0
|
}
|
},
|
mounted() {
|
this.fetchStatiscis()
|
this.init()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/css/variable.scss';
|
|
.fund-orders-page {
|
min-height: 100vh;
|
background: $main_background;
|
padding-bottom: 6rem;
|
box-sizing: border-box;
|
}
|
|
/* 上半数据卡片：按图片样式 */
|
.data-card {
|
margin: 2rem 2.4rem;
|
padding: 2.4rem 2rem;
|
background: #fff;
|
border-radius: 1.2rem;
|
box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
|
border: 0.1rem solid #f0f0f0;
|
|
.data-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 1.2rem 0;
|
font-size: 2.8rem;
|
border-bottom: 0.1rem solid #f5f5f5;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.data-label {
|
color: $text_color1;
|
}
|
|
.data-value {
|
font-weight: 600;
|
color: $text_color;
|
font-size: 3rem;
|
}
|
}
|
}
|
|
/* 下半 Tab 栏：按图片样式 */
|
.tabs-wrap {
|
margin: 0 2.4rem;
|
background: #fff;
|
border-radius: 1.2rem;
|
overflow: hidden;
|
box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
|
}
|
|
.tabs-bar {
|
display: flex;
|
padding: 0.6rem;
|
gap: 0.6rem;
|
background: #fff;
|
border-bottom: 0.1rem solid #f0f0f0;
|
|
.tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 1.2rem 0.8rem;
|
font-size: 2.6rem;
|
color: $text_color1;
|
border-radius: 0.8rem;
|
transition: all 0.2s ease;
|
cursor: pointer;
|
|
&.active {
|
background: #e8e8e8;
|
color: $text_color;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.list-wrap {
|
min-height: 20rem;
|
padding: 1rem 0;
|
}
|
|
.empty-state {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 4rem 2rem;
|
|
.empty-icon {
|
margin-bottom: 1.6rem;
|
opacity: 0.5;
|
width: 8rem;
|
}
|
|
.empty-text {
|
font-size: 2.8rem;
|
color: $text_color1;
|
}
|
}
|
</style>
|
