<template>
|
<div class="order-list">
|
<div
|
class="order-card contBackground"
|
v-for="(item, index) in list"
|
:key="index"
|
@click="handleGoOrderDetail(item)"
|
>
|
<div class="order-card-main">
|
<img
|
v-if="type == 0"
|
:src="item.img ? item.img : '../../page/financialManagement/images/fund5.png'"
|
alt=""
|
class="order-thumb"
|
/>
|
<img
|
v-else
|
:src="item.img ? item.img : '../../page/financialManagement/images/machine_fpga.png'"
|
alt=""
|
class="order-thumb"
|
/>
|
<div class="order-info">
|
<div class="order-name textColor" v-if="type == 0">
|
{{ $i18n.locale === 'CN' ? item.financeName_cn : ($i18n.locale === 'zh-CN' ? item.financeName : item.financeName_en) }}
|
</div>
|
<div class="order-name textColor" v-else>
|
{{ $i18n.locale === 'CN' ? item.miner_name_cn : ($i18n.locale === 'zh-CN' ? item.miner_name : item.miner_name_en) }}
|
</div>
|
<div class="order-meta textColor1">
|
{{ $t('数量') }}
|
<span class="textColor">{{ item.amount }}</span>
|
{{ item.buyCurrency ? item.buyCurrency.toUpperCase() : 'USDT' }}
|
</div>
|
<div class="order-meta textColor1">
|
{{ type == 0 ? $t('周期') : (isMinerTest(item.test) ? $t('周期') : $t('可解锁周期')) }}
|
<span class="textColor">
|
{{ item.cycle == 0 ? $t('无限期') : item.cycle + (type == 0 || isMinerTest(item.test) ? $t('天') : $t('分钟')) }}
|
</span>
|
</div>
|
</div>
|
</div>
|
<div class="order-profit">
|
<div class="profit-num" :class="item.profit / 1 >= 0 ? 'text-green' : 'text-red'">
|
{{ (item.profit / 1).toFixed(2) }}
|
</div>
|
<div class="profit-label textColor">
|
{{ $t('累计收益') }}({{ item.outputCurrency ? item.outputCurrency.toUpperCase() : 'USDT' }})
|
</div>
|
<van-icon class="order-arrow textColor" name="arrow" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Icon } from 'vant'
|
import { isMinerTest } from '@/utils/index.js'
|
|
export default {
|
name: 'financialList',
|
props: ['list', 'btnShow', 'goBack', 'type'],
|
components: {
|
[Icon.name]: Icon
|
},
|
methods: {
|
isMinerTest,
|
handleGoOrderDetail(item) {
|
if (this.type === 0) {
|
this.$router.push({
|
path: '/cryptos/financialOrder',
|
query: {
|
order_no: item.order_no,
|
showBtn: this.btnShow,
|
id: item.id,
|
goBack: true
|
}
|
})
|
} else {
|
this.$router.push({
|
path: '/cryptos/miningMachineOrder',
|
query: {
|
order_no: item.order_no,
|
showBtn: this.btnShow,
|
goBack: true
|
}
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.order-list {
|
padding: 0 32px 24px;
|
}
|
|
.order-card {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: 20px;
|
margin-top: 24px;
|
padding: 28px 24px;
|
border-radius: 20px;
|
}
|
|
.order-card-main {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
min-width: 0;
|
}
|
|
.order-thumb {
|
width: 120px;
|
height: 120px;
|
margin-right: 24px;
|
flex-shrink: 0;
|
object-fit: contain;
|
}
|
|
.order-info {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.order-name {
|
font-size: 34px;
|
font-weight: 600;
|
line-height: 1.35;
|
word-break: break-word;
|
}
|
|
.order-meta {
|
margin-top: 16px;
|
font-size: 30px;
|
line-height: 1.4;
|
}
|
|
.order-profit {
|
position: relative;
|
flex-shrink: 0;
|
padding-right: 36px;
|
text-align: center;
|
}
|
|
.profit-num {
|
font-size: 44px;
|
font-weight: 700;
|
line-height: 1.2;
|
}
|
|
.profit-label {
|
margin-top: 12px;
|
font-size: 26px;
|
line-height: 1.3;
|
max-width: 180px;
|
}
|
|
.order-arrow {
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 32px;
|
}
|
</style>
|
