1

李

7 days ago 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d

 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;
  }