From 349c48e168b9f2580334422228acde7d1b21bede Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 05 Jun 2026 11:19:15 +0800
Subject: [PATCH] 1
---
src/views/cryptos/order/MiningMachineOrder/index.vue | 314 +++++++++++++++++++++++++++++++++++++--------------
1 files changed, 227 insertions(+), 87 deletions(-)
diff --git a/src/views/cryptos/order/MiningMachineOrder/index.vue b/src/views/cryptos/order/MiningMachineOrder/index.vue
index 88baf8a..5056f05 100644
--- a/src/views/cryptos/order/MiningMachineOrder/index.vue
+++ b/src/views/cryptos/order/MiningMachineOrder/index.vue
@@ -1,82 +1,111 @@
<template>
- <div id="financialOrder" class="financialOrder">
+ <div id="financialOrder" class="miner-order-detail">
<assets-head :title="title" :back-func="backFunc"></assets-head>
- <div class="box-border ">
- <div class="flex flex-col justify-center items-center px-33">
- <div class="font-32 font-400 my-34 textColor">{{ $t('锁仓金额') }}（USDT）</div>
- <div class="font-66 mb-65 textColor">{{ dataObj.amount }}</div>
- </div>
- <div class=" px-33 boderT12">
- <div class="flex justify-between flex-row items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('锁仓时间') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.cycle == 0 ? $t('无限期') : dataObj.cycle + $t('天') }}</div>
- </div>
- <div class="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('当日收益') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.profit_may / 30 }} {{ dataObj.outputCurrency ?
- dataObj.outputCurrency.toUpperCase() : 'USDT' }}</div>
- </div>
- <div class="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('已获收益') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.profit }}</div>
- </div>
- <div class="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('剩余天数') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.days + $t('天') }}</div>
- </div>
- </div>
- <div class="px-33 boderT12">
- <div class="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">30{{ $t('天') }}{{ $t('预期收益') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.profit_may }} {{ dataObj.outputCurrency ?
- dataObj.outputCurrency.toUpperCase() : 'USDT' }}</div>
- </div>
- <div class="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('日收益率') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.daily_rate }}%</div>
+ <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="px-33 boderT12">
- <div class="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('起息时间') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.earn_timeStr }}</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="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('到期时间') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.stop_timeStr ? dataObj.stop_timeStr : '--' }}</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="px-33 boderT12">
- <div class="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('订单编号') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.order_no }}</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="flex justify-between items-center h-98">
- <div class="font-31 font-400 text-grey">{{ $t('订单时间') }}</div>
- <div class="font-31 font-400 textColor">{{ dataObj.create_timeStr }}</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="this.showBtn" @click="ransom"
- class="text-white btnMain h-97 lh-97 w-762 rounded-lg text-center fixed wz border-none"
- :disabled="!dataObj.can_close" :class="!dataObj.can_close ? 'greyBg textColor1' : ''">{{ $t('我要赎回') }}
- </button>
+ <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 dayjs from "dayjs";
+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: "index",
+ 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 {
@@ -87,14 +116,16 @@
dataObj: {
amount: 0,
cycle: '',
- daily_profit: '',
profit: '',
days: '',
daily_rate: '',
- earn_time: '',
- stop_time: '',
+ profit_may: '',
+ earn_timeStr: '',
+ stop_timeStr: '',
order_no: '',
- create_time: ''
+ create_timeStr: '',
+ can_close: false,
+ test: false
}
}
},
@@ -108,29 +139,20 @@
backFunc() {
this.$router.push({
path: '/cryptos/funds',
- query: {
- tab: 3,
- index: 1 // 0: 查看理财订单 1: 矿机
- }
+ query: { tab: 3, index: 1 }
})
},
- ransom() { // 赎回
- ransomMachineProduct({
- order_no: this.order_no
- }).then(res => {
+ ransom() {
+ ransomMachineProduct({ order_no: this.order_no }).then(() => {
showToast(this.$t('赎回成功'))
- setTimeout(() => {
- this.backFunc()
- }, 1000)
+ setTimeout(() => this.backFunc(), 1000)
})
},
getOrderDetail() {
- getMinerorder({
- order_no: this.order_no
- }).then(res => {
+ getMinerorder({ order_no: this.order_no }).then(res => {
this.dataObj = res
- let title = this.$i18n.locale === 'en' ? res.miner_name_en : res.miner_name_cn
- this.title = title + ' ' + this.$t('详情')
+ const name = this.$i18n.locale === 'en' ? res.miner_name_en : (res.miner_name_cn || res.miner_name)
+ this.title = `${name} ${this.$t('详情')}`
})
}
}
@@ -138,20 +160,138 @@
</script>
<style lang="scss" scoped>
-.financialOrder {
- width: 100%;
+@import '@/assets/init.scss';
+
+.miner-order-detail {
+ min-height: 100vh;
box-sizing: border-box;
}
-.wz {
- bottom: 44px;
- left: 32px;
- right: 32px;
+.detail-body {
+ padding: 24px 32px 0;
}
-.boderT12 {
- // @include themify() {
- // border-top: 1px solid themed("cont_background");
- // }
+.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>
--
Gitblit v1.9.3