1

李凌

5 days ago 349c48e168b9f2580334422228acde7d1b21bede

 src/views/cryptos/financialManagement/machineConfirm.vue

@@ -1,77 +1,99 @@
<template>
  <div id="cryptos">
    <div id="financialOrder" class="financialOrder">
    <div class="machine-confirm-page">
      <assets-head :title="$t('确认订单')"></assets-head>
      <div class="box-border  ">
        <div class="w-full h-1 bgDark"></div>
        <div class="mt-48 font-36 font-600 px-33 mb-22 textColor">{{ $i18n.locale === 'CN' || $i18n.locale === 'zh-CN' ?
          data.miner_name_cn : data.miner_name_en
        }}</div>
        <div class=" px-33">
          <div class="flex justify-between flex-row items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('矿机金额') }}</div>
            <div class="font-31 font-400 textColor">{{ data.amount }} {{ data.buyCurrenc ?
              data.buyCurrenc.toUpperCase() : '' }}</div>

      <div class="page-body">
        <div class="hero-card">
          <div class="hero-badge">{{ $t('确认订单') }}</div>
          <div class="hero-name">{{ minerName }}</div>
          <div class="hero-amount">
            <span class="amount-num">{{ data.amount }}</span>
            <span class="amount-unit">{{ buyCurrency }}</span>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('30天预期收益') }}</div>
            <div class="font-31 font-400 textColor">{{ data.profit_may }} {{ data.outputCurrency ?
              data.outputCurrency.toUpperCase() : '' }}</div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('周期') }}</div>
            <div class="font-31 font-400 textColor">{{ data.cycle == 0 ? $t('无限期') : data.cycle + $t('天') }}</div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('日收益') }}</div>
            <div class="font-31 font-400 textColor">{{ data.daily_rate }}%</div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('起息日') }}</div>
            <div class="font-31 font-400 textColor">{{ data.earn_time }}</div>
          </div>
          <!-- <div class="flex justify-between items-center h-72">
          <div class="font-31 font-400 text-grey">{{$t('计息结束日')}}</div>
          <div class="font-31 font-400 textColor">{{'--'}}</div>
        </div> -->
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('订单编号') }}</div>
            <div class="font-31 font-400 textColor">{{ data.order_no }}</div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $t('订单时间') }}</div>
            <div class="font-31 font-400 textColor">{{ data.create_time }}</div>
        </div>

        <div class="section-card">
          <div class="section-title">{{ $t('订单信息') }}</div>
          <div class="info-grid">
            <div class="info-row">
              <span class="info-label">{{ $t('矿机金额') }}</span>
              <span class="info-value highlight">{{ data.amount }} {{ buyCurrency }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('30天预期收益') }}</span>
              <span class="info-value accent" :class="{ negative: Number(data.daily_rate) < 0 }">{{ data.profit_may }} {{ outputCurrency }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('周期') }}</span>
              <span class="info-value">{{ cycleText }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('日收益') }}</span>
              <span class="info-value" :class="{ negative: Number(data.daily_rate) < 0 }">{{ data.daily_rate }}%</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('起息日') }}</span>
              <span class="info-value">{{ data.earn_time || '--' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('订单编号') }}</span>
              <span class="info-value">{{ data.order_no || '--' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('订单时间') }}</span>
              <span class="info-value">{{ data.create_time || '--' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex  justify-center items-center mt-120">
        <div class="contBackground rounded-lg font-32 w-360 h-80 lh-80 mr-36 text-center textColor"
          @click="$router.go(-1)">{{ $t('取消') }}
        </div>
        <div class="rounded-lg font-32 w-360 h-80 lh-80 text-center text-white btnMain" @click="confirm">{{ $t('确认') }}
        </div>

      <div class="submit-bar">
        <button class="cancel-btn" @click="$router.go(-1)">{{ $t('取消') }}</button>
        <button class="submit-btn" @click="confirm">{{ $t('确认') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from '@/components/Transform/assets-head/index.vue';
import { confirmMichineOrder, machineMakeOrder } from "@/service/financialManagement.api.js";
import assetsHead from '@/components/Transform/assets-head/index.vue'
import { confirmMichineOrder, machineMakeOrder } from '@/service/financialManagement.api.js'
import { isMinerTest } from '@/utils/index.js'

export default {
  name: "machineConfirm",
  name: 'machineConfirm',
  components: {
    assetsHead
  },
  data() {
    return {
      data: {},
      data: {}
    }
  },
  computed: {
    minerName() {
      const locale = this.$i18n.locale
      if (locale === 'CN' || locale === 'zh-CN') {
        return this.data.miner_name_cn || this.$t('矿机')
      }
      return this.data.miner_name_en || this.$t('矿机')
    },
    buyCurrency() {
      return this.data.buyCurrenc ? this.data.buyCurrenc.toUpperCase() : 'USDT'
    },
    outputCurrency() {
      return this.data.outputCurrency ? this.data.outputCurrency.toUpperCase() : 'USDT'
    },
    cycleText() {
      if (this.data.cycle == 0) return this.$t('无限期')
      const unit = isMinerTest(this.data.test) ? this.$t('天') : this.$t('分钟')
      return `${this.data.cycle}${unit}`
    }
  },
  methods: {
    machineMakeOrderFn() {
      machineMakeOrder(this.$route.query).then(res => {
        //console.log('矿机认购', res)
        this.data = res
      })
    },
@@ -80,38 +102,184 @@
        session_token: this.data.session_token,
        minerId: this.data.minerId,
        amount: this.data.amount
      }).then((res) => {
        //console.log('订单确认成功', res)
      }).then(() => {
        this.$router.push({
          path: '/cryptos/order-success',
          query: {
            type: '1', // 结束后查看矿机订单
          }
          query: { type: '1' }
        })
      }).catch((res) => {
      }).catch(() => {
        this.machineMakeOrderFn()
      })
    }
  },
  created() {
    this.machineMakeOrderFn()
  },
  }
}
</script>

<style lang="scss">
@import "@/assets/init.scss";
<style scoped lang="scss">
@import '@/assets/init.scss';

#cryptos {
  .financialOrder {
    width: 100%;
  .machine-confirm-page {
    min-height: 100vh;
    padding-bottom: 160px;
    box-sizing: border-box;
  }

  .wz {
    bottom: 44px;
    left: 32px;
    right: 32px;
  .page-body {
    padding: 24px 32px 0;
  }

  .hero-card {
    padding: 40px 36px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1a6dff 0%, #004aee 55%, #0035b8 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 74, 238, 0.28);
    margin-bottom: 28px;
    text-align: center;
  }

  .hero-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 24px;
    margin-bottom: 20px;
  }

  .hero-name {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 24px;
    opacity: 0.95;
  }

  .hero-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
  }

  .amount-num {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
  }

  .amount-unit {
    font-size: 30px;
    font-weight: 600;
  }

  .section-card {
    padding: 32px 28px;
    border-radius: 20px;
    @include themify() {
      background: themed('cont_background');
    }
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  }

  .section-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 28px;
    @include themify() {
      color: themed('text_color');
    }
  }

  .info-grid {
    display: flex;
    flex-direction: column;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(134, 142, 155, 0.15);

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    &:first-child {
      padding-top: 0;
    }
  }

  .info-label {
    font-size: 28px;
    color: #868e9b;
    flex-shrink: 0;
  }

  .info-value {
    font-size: 28px;
    font-weight: 600;
    text-align: right;
    max-width: 58%;
    word-break: break-all;
    @include themify() {
      color: themed('text_color');
    }

    &.highlight {
      color: #004aee;
    }

    &.accent {
      color: #e35461;
    }

    &.negative {
      color: #f6465d;
    }
  }

  .submit-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 24px;
    padding: 24px 32px calc(24px + env(safe-area-inset-bottom));
    @include themify() {
      background: themed('footer_background');
    }
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    z-index: 20;
  }

  .cancel-btn,
  .submit-btn {
    flex: 1;
    height: 96px;
    border: none;
    border-radius: 16px;
    font-size: 32px;
    font-weight: 600;
  }

  .cancel-btn {
    @include themify() {
      background: themed('tab_background');
      color: themed('text_color');
    }
  }

  .submit-btn {
    background: linear-gradient(90deg, #1a6dff, #004aee);
    color: #fff;
  }
}
</style>