<template>
|
<div id="financialOrder" class="miner-order-detail">
|
<assets-head :title="title" :back-func="backFunc"></assets-head>
|
|
<div class="detail-body pb-160">
|
<div class="amount-hero">
|
<div class="amount-label">{{ $t('锁仓金额') }}（USDT）</div>
|
<div class="amount-value">{{ dataObj.amount }}</div>
|
<div class="amount-sub">
|
<span>{{ $t('已获收益') }}</span>
|
<span class="profit-value" :class="Number(dataObj.profit) >= 0 ? 'text-green' : 'text-red'">
|
{{ dataObj.profit || '0' }}
|
</span>
|
</div>
|
</div>
|
|
<div class="info-card">
|
<div class="card-title">{{ $t('订单信息') }}</div>
|
<div class="info-row">
|
<span class="info-label">{{ isTestMiner ? $t('锁仓时间') : $t('可解锁周期') }}</span>
|
<span class="info-value">{{ cycleText }}</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">{{ isTestMiner ? $t('剩余天数') : $t('剩余分钟') }}</span>
|
<span class="info-value">{{ remainText }}</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">{{ $t('日收益率') }}</span>
|
<span class="info-value">{{ dataObj.daily_rate }}%</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">{{ $t('当日收益') }}</span>
|
<span class="info-value">{{ dailyProfitText }}</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">30{{ $t('天') }}{{ $t('预期收益') }}</span>
|
<span class="info-value">{{ profitMayText }}</span>
|
</div>
|
</div>
|
|
<div class="info-card">
|
<div class="card-title">{{ $t('时间信息') }}</div>
|
<div class="info-row">
|
<span class="info-label">{{ $t('起息时间') }}</span>
|
<span class="info-value">{{ dataObj.earn_timeStr || '--' }}</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">{{ $t('到期时间') }}</span>
|
<span class="info-value">{{ dataObj.stop_timeStr || '--' }}</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">{{ $t('订单时间') }}</span>
|
<span class="info-value">{{ dataObj.create_timeStr || '--' }}</span>
|
</div>
|
</div>
|
|
<div class="info-card">
|
<div class="card-title">{{ $t('订单编号') }}</div>
|
<div class="order-no">{{ dataObj.order_no || '--' }}</div>
|
</div>
|
</div>
|
|
<button
|
v-if="showBtn"
|
class="redeem-btn"
|
:disabled="!dataObj.can_close"
|
:class="{ disabled: !dataObj.can_close }"
|
@click="ransom"
|
>
|
{{ $t('我要赎回') }}
|
</button>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from '@/components/Transform/assets-head/index.vue'
|
import { ransomMachineProduct, getMinerorder } from '@/service/financialManagement.api.js'
|
import { showToast } from 'vant'
|
import { isMinerTest } from '@/utils/index.js'
|
|
export default {
|
name: 'MiningMachineOrder',
|
components: {
|
assetsHead
|
},
|
computed: {
|
isTestMiner() {
|
return isMinerTest(this.dataObj.test)
|
},
|
cycleText() {
|
if (this.dataObj.cycle == 0) return this.$t('无限期')
|
const unit = this.isTestMiner ? this.$t('天') : this.$t('分钟')
|
return `${this.dataObj.cycle}${unit}`
|
},
|
remainText() {
|
const unit = this.isTestMiner ? this.$t('天') : this.$t('分钟')
|
return `${this.dataObj.days ?? '--'}${unit}`
|
},
|
outputCurrency() {
|
return this.dataObj.outputCurrency ? this.dataObj.outputCurrency.toUpperCase() : 'USDT'
|
},
|
dailyProfitText() {
|
const val = this.dataObj.profit_may ? (this.dataObj.profit_may / 30) : '--'
|
return `${val} ${this.outputCurrency}`
|
},
|
profitMayText() {
|
return `${this.dataObj.profit_may ?? '--'} ${this.outputCurrency}`
|
}
|
},
|
data() {
|
return {
|
type: '',
|
order_no: '',
|
showBtn: false,
|
title: '',
|
dataObj: {
|
amount: 0,
|
cycle: '',
|
profit: '',
|
days: '',
|
daily_rate: '',
|
profit_may: '',
|
earn_timeStr: '',
|
stop_timeStr: '',
|
order_no: '',
|
create_timeStr: '',
|
can_close: false,
|
test: false
|
}
|
}
|
},
|
mounted() {
|
this.type = this.$route.query.type
|
this.order_no = this.$route.query.order_no
|
this.showBtn = this.$route.query.showBtn
|
this.getOrderDetail()
|
},
|
methods: {
|
backFunc() {
|
this.$router.push({
|
path: '/cryptos/funds',
|
query: { tab: 3, index: 1 }
|
})
|
},
|
ransom() {
|
ransomMachineProduct({ order_no: this.order_no }).then(() => {
|
showToast(this.$t('赎回成功'))
|
setTimeout(() => this.backFunc(), 1000)
|
})
|
},
|
getOrderDetail() {
|
getMinerorder({ order_no: this.order_no }).then(res => {
|
this.dataObj = res
|
const name = this.$i18n.locale === 'en' ? res.miner_name_en : (res.miner_name_cn || res.miner_name)
|
this.title = `${name} ${this.$t('详情')}`
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/init.scss';
|
|
.miner-order-detail {
|
min-height: 100vh;
|
box-sizing: border-box;
|
}
|
|
.detail-body {
|
padding: 24px 32px 0;
|
}
|
|
.amount-hero {
|
padding: 40px 36px;
|
border-radius: 24px;
|
margin-bottom: 28px;
|
text-align: center;
|
background: linear-gradient(135deg, #1a6dff 0%, #004aee 55%, #0035b8 100%);
|
color: #fff;
|
box-shadow: 0 16px 40px rgba(0, 74, 238, 0.28);
|
}
|
|
.amount-label {
|
font-size: 32px;
|
opacity: 0.9;
|
}
|
|
.amount-value {
|
margin-top: 20px;
|
font-size: 72px;
|
font-weight: 700;
|
line-height: 1.1;
|
}
|
|
.amount-sub {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 16px;
|
margin-top: 28px;
|
padding-top: 24px;
|
border-top: 1px solid rgba(255, 255, 255, 0.22);
|
font-size: 30px;
|
opacity: 0.92;
|
}
|
|
.profit-value {
|
font-size: 36px;
|
font-weight: 600;
|
}
|
|
.info-card {
|
margin-bottom: 24px;
|
padding: 32px 28px;
|
border-radius: 20px;
|
@include themify() {
|
background: themed('cont_background');
|
}
|
}
|
|
.card-title {
|
margin-bottom: 20px;
|
font-size: 34px;
|
font-weight: 600;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.info-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
gap: 24px;
|
padding: 22px 0;
|
font-size: 32px;
|
line-height: 1.45;
|
|
& + & {
|
@include themify() {
|
border-top: 1px solid themed('line_color');
|
}
|
}
|
}
|
|
.info-label {
|
flex-shrink: 0;
|
max-width: 45%;
|
@include themify() {
|
color: themed('text_color1');
|
}
|
}
|
|
.info-value {
|
text-align: right;
|
word-break: break-all;
|
font-weight: 500;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.order-no {
|
font-size: 30px;
|
line-height: 1.5;
|
word-break: break-all;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.redeem-btn {
|
position: fixed;
|
left: 32px;
|
right: 32px;
|
bottom: 44px;
|
height: 96px;
|
border: none;
|
border-radius: 16px;
|
font-size: 34px;
|
font-weight: 600;
|
color: #fff;
|
background: linear-gradient(135deg, #1a6dff 0%, #004aee 100%);
|
|
&.disabled {
|
@include themify() {
|
color: themed('text_color1');
|
background: themed('cont_background');
|
}
|
}
|
}
|
|
.pb-160 {
|
padding-bottom: 160px;
|
}
|
</style>
|
