From 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Wed, 03 Jun 2026 16:10:01 +0800
Subject: [PATCH] 1
---
src/views/cryptos/PerpetualContract/orderDetail.vue | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 54 insertions(+), 2 deletions(-)
diff --git a/src/views/cryptos/PerpetualContract/orderDetail.vue b/src/views/cryptos/PerpetualContract/orderDetail.vue
index c0e9c3e..05c80e7 100644
--- a/src/views/cryptos/PerpetualContract/orderDetail.vue
+++ b/src/views/cryptos/PerpetualContract/orderDetail.vue
@@ -27,6 +27,16 @@
<div class="text-grey">{{ $t('可平金额') }}</div>
<div class="textColor">{{ detail.amount }}</div>
</div>
+ <div class="flex justify-between cell-item cell-item--funding">
+ <div class="text-grey">
+ <div>{{ $t('资金费') }}</div>
+ <div class="text-22 mt-2 funding-countdown-hint">{{ $t('距下次结算') }}</div>
+ </div>
+ <div class="textColor text-right">
+ <div>{{ detail.funding_fee }}</div>
+ <div class="text-26 mt-2 funding-countdown">{{ fundingCountdownDisplay }}</div>
+ </div>
+ </div>
<div class="flex justify-between cell-item">
<div class="text-grey">{{ $t('保证金') }}</div>
<div class="textColor">{{ detail.deposit }}</div>
@@ -77,7 +87,11 @@
detail: {
},
- timer: null
+ timer: null,
+ /** 资金费周期倒计时刷新（与订单轮询分离） */
+ fundingCountdownTimer: null,
+ /** 到下一 4 小时整点（UTC 日内第 2–6 阶段起点）剩余时间 HH:mm:ss */
+ fundingCountdownDisplay: '04:00:00',
}
},
components: {
@@ -89,9 +103,34 @@
this.timer = setInterval(() => {
this.fetchDetail(order_no);
}, 1000);
+ this.tickFundingCountdown();
+ this.fundingCountdownTimer = setInterval(() => this.tickFundingCountdown(), 1000);
},
methods: {
+ /**
+ * 一天按 UTC 分为 6 个阶段（每阶段 4h），每到整点阶段边界倒计时重新从 4:00:00 计起。
+ */
+ tickFundingCountdown() {
+ const PHASE_MS = 4 * 60 * 60 * 1000;
+ const now = Date.now();
+ const d = new Date(now);
+ const utcMidnight = Date.UTC(
+ d.getUTCFullYear(),
+ d.getUTCMonth(),
+ d.getUTCDate(),
+ 0, 0, 0, 0
+ );
+ const elapsed = now - utcMidnight;
+ const remainder = PHASE_MS - (elapsed % PHASE_MS);
+ const totalSec = Math.floor(remainder / 1000);
+ const h = Math.floor(totalSec / 3600);
+ const m = Math.floor((totalSec % 3600) / 60);
+ const s = totalSec % 60;
+ this.fundingCountdownDisplay = [h, m, s]
+ .map((n) => String(n).padStart(2, '0'))
+ .join(':');
+ },
dayjs,
handleText(state) {
let str = '';
@@ -139,7 +178,11 @@
},
},
beforeUnmount() {
- this.clearTimer()
+ this.clearTimer();
+ if (this.fundingCountdownTimer) {
+ clearInterval(this.fundingCountdownTimer);
+ this.fundingCountdownTimer = null;
+ }
}
}
</script>
@@ -160,6 +203,15 @@
padding: 0 30px 30px 30px;
}
+ .funding-countdown {
+ font-variant-numeric: tabular-nums;
+ letter-spacing: 0.02em;
+ }
+
+ .funding-countdown-hint {
+ opacity: 0.85;
+ }
+
.mt-30 {
margin-top: 30px;
}
--
Gitblit v1.9.3