1

李凌

9 days ago 349c48e168b9f2580334422228acde7d1b21bede

 src/views/cryptos/financialManagement/machineBuy.vue

@@ -1,76 +1,105 @@
<template>
  <div id="cryptos">
    <div id="financialOrder" class="financialOrder">
      <assets-head :title="$i18n.locale === 'CN' || $i18n.locale === 'zh-CN' ? data.name_cn : data.name_en"></assets-head>
      <div class="box-border  ">
        <div class="w-full h-1 bgDark"></div>
        <div class="mt-48 font-36 font-600 px-33 textColor">{{ $t('购买金额') }}</div>
        <div class="flex justify-center mt-17">
          <div class="flex">
            <input :placeholder="$t('输入金额')" v-model="form.amount" type="number"
              class="h-98 pl-30 w-580 border-none text-grey inputBackground textColor" @input="changeMount">
            <div class="h-98 lh-98 w-180 flex inputBackground textColor" @click="form.amount = bal">
              {{ data.buyCurrency ? data.buyCurrency.toUpperCase() : '' }} <span class="colorMain pl-10">{{ $t('全部')
              }}</span></div>
    <div class="machine-buy-page">
      <assets-head :title="minerName"></assets-head>

      <div class="page-body">
        <!-- 产品概览 -->
        <div class="hero-card">
          <div class="hero-top">
            <span class="hero-badge">{{ isTestMiner ? $t('体验矿机') : $t('智能矿池') }}</span>
            <span class="hero-cycle">{{ cycleText }}</span>
          </div>
          <div class="hero-stats">
            <div class="hero-stat">
              <span class="stat-label">{{ $t('日收益率') }}</span>
              <span class="stat-value" :class="{ negative: Number(data.daily_rate) < 0 }">{{ data.daily_rate }}{{ isTestMiner ? '' : '%' }}</span>
            </div>
            <div class="hero-stat">
              <span class="stat-label">{{ $t('预计日收益') }}</span>
              <span class="stat-value accent" :class="{ negative: Number(data.daily_rate) < 0 }">{{ expectedDailyProfit }}</span>
            </div>
          </div>
        </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">{{ bal.toFixed(5) }}
              {{ data.buyCurrency ? data.buyCurrency.toUpperCase() : '' }}</div>
        <!-- 购买金额 -->
        <div class="section-card">
          <div class="section-title">{{ $t('购买金额') }}</div>
          <div class="amount-input-wrap">
            <input
              v-model="form.amount"
              type="number"
              class="amount-input"
              :placeholder="$t('输入金额')"
              @input="changeMount"
            />
            <div class="amount-suffix" @click="form.amount = bal">
              <span>{{ currency }}</span>
              <span class="all-btn">{{ $t('全部') }}</span>
            </div>
          </div>
          <div class="flex justify-between items-center h-72">
            <div class="font-31 font-400 text-grey">{{ $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.investment_min }}
              {{ data.buyCurrency ? data.buyCurrency.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.investment_max }}
              {{ data.buyCurrency ? data.buyCurrency.toUpperCase() : '' }}</div>
          <div class="balance-tip">
            <span>{{ $t('可用余额') }}</span>
            <span class="balance-num">{{ bal.toFixed(5) }} {{ currency }}</span>
          </div>
        </div>
        <div class=" h-28 px-33 mt-83 mb-22 textColor">{{ $t('概览') }}</div>
        <div class="px-33">
          <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">{{ dateBuy }}</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">{{ earn_time ? earn_time : '--' }}</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">{{ $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">{{ (data.investment_min * (data.daily_rate / 100)).toFixed(2) }} - {{
              (data.investment_max * (data.daily_rate / 100)).toFixed(2) }}&nbsp;{{ data.outputCurrency ?
    data.outputCurrency.toUpperCase() : '' }}</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">{{ data.investment_min }} {{ currency }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('最大可投') }}</span>
              <span class="info-value">{{ data.investment_max }} {{ currency }}</span>
            </div>
          </div>
        </div>
      </div>
      <div @click="handleBuy" class="text-white btnMain h-97 lh-97 w-762 rounded-lg text-center fixed wz ">{{ $t('购买') }}

        <!-- 概览 -->
        <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">{{ dateBuy }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('起息日') }}</span>
              <span class="info-value">{{ earn_time || '--' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('派息时间') }}</span>
              <span class="info-value">{{ $t('每天') }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">{{ $t('预计今日收益') }}</span>
              <span class="info-value highlight">{{ profitRange }} {{ outputCurrency }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="submit-bar">
        <button class="submit-btn" @click="handleBuy">{{ $t('购买') }}</button>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "MachineBuy",
  name: 'MachineBuy',
  components: {
    assetsHead
  },
@@ -79,81 +108,319 @@
      bal: 0,
      earn_time: '--',
      dateBuy: dayjs().format('YYYY-MM-DD'),
      data: {
      },
      data: {},
      form: {
        minerId: '',
        amount: '',
      },
        amount: ''
      }
    }
  },
  computed: {
    isTestMiner() {
      return isMinerTest(this.data.test)
    },
    minerName() {
      const locale = this.$i18n.locale
      if (locale === 'CN' || locale === 'zh-CN') {
        return this.data.name_cn || this.data.name || this.$t('矿机')
      }
      return this.data.name_en || this.$t('矿机')
    },
    currency() {
      return this.data.buyCurrency ? this.data.buyCurrency.toUpperCase() : 'USDT'
    },
    outputCurrency() {
      return this.data.outputCurrency ? this.data.outputCurrency.toUpperCase() : 'USDT'
    },
    cycleText() {
      if (this.data.cycle == 0) return this.$t('无限期')
      const unit = this.isTestMiner ? this.$t('天') : this.$t('分钟')
      return `${this.data.cycle}${unit}`
    },
    profitRange() {
      const minVal = this.data.investment_min * (this.data.daily_rate / 100)
      const maxVal = this.data.investment_max * (this.data.daily_rate / 100)
      const low = Math.min(minVal, maxVal).toFixed(2)
      const high = Math.max(minVal, maxVal).toFixed(2)
      return `${low} - ${high}`
    },
    expectedDailyProfit() {
      const amount = Number(this.form.amount)
      if (!amount || amount <= 0) {
        return this.profitRange + ' ' + this.outputCurrency
      }
      const profit = (amount * (this.data.daily_rate / 100)).toFixed(2)
      return `${profit} ${this.outputCurrency}`
    }
  },
  methods: {
    changeMount() {
      if (this.form.amount == '') {
        return
      }
      if (this.form.amount === '') return
      machineMakeOrder(this.form).then(res => {
        this.earn_time = res.earn_time
        console.log(res.earn_time)
      })
    },
    handleBuy() {
      if (!this.data.test && !this.form.amount) {
        this.$toast(this.$t('请输入金额'))
      if (!this.isTestMiner && !this.form.amount) {
        showToast(this.$t('请输入金额'))
        return
      } else if (this.data.test && this.form.amount == '') {
      } else if (this.isTestMiner && this.form.amount === '') {
        this.form.amount = 0
      }
      if (this.form.amount * 1 < this.data.investment_min) {
        this.$toast(this.$t('最低金额') + ':' + this.data.investment_min)
        showToast(this.$t('最低金额') + ':' + this.data.investment_min)
        return
      } else if (this.form.amount * 1 > this.data.investment_max) {
        this.$toast(this.$t('最大数量') + ':' + this.data.investment_max)
        showToast(this.$t('最大数量') + ':' + this.data.investment_max)
        return
      }

      this.$router.push({ path: '/cryptos/machine-confirm', query: { ...this.form } })

    },
    //获取钱包余额
    getAvailable(symbol) {
      _getBalance().then((res) => {
        let walletList = res.extends;
        let initObj = walletList.find(item => {
          return item.symbol.toLowerCase() == symbol.toLowerCase()
        })
        this.bal = initObj.usable
      });
    },
        const walletList = res.extends || []
        const initObj = walletList.find(item => item.symbol.toLowerCase() === symbol.toLowerCase())
        this.bal = initObj ? initObj.usable : 0
      })
    }
  },
  created() {
    this.data = JSON.parse(this.$route.query.obj)
    this.getAvailable(this.data.buyCurrency || 'usdt')
    this.form.minerId = this.data.id
    if (this.data.test) {
    if (this.isTestMiner) {
      this.form.amount = 0
      machineMakeOrder(this.form).then(res => {
        this.earn_time = res.earn_time
        console.log(res.earn_time)
      })
    }
  }
}
</script>

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

#cryptos {
  .financialOrder {
    width: 100%;
  .machine-buy-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: 36px 32px;
    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;
  }

  .hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
  }

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

  .hero-cycle {
    font-size: 26px;
    opacity: 0.9;
  }

  .hero-stats {
    display: flex;
    gap: 48px;
  }

  .hero-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .stat-label {
    font-size: 24px;
    opacity: 0.85;
  }

  .stat-value {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;

    &.accent {
      font-size: 32px;
    }

    &.negative {
      color: #ffb4b4;
    }
  }

  .section-card {
    padding: 32px 28px;
    border-radius: 20px;
    margin-bottom: 24px;
    @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');
    }
  }

  .amount-input-wrap {
    display: flex;
    align-items: stretch;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(0, 74, 238, 0.2);
    @include themify() {
      background: themed('tab_background');
    }
  }

  .amount-input {
    flex: 1;
    min-width: 0;
    height: 96px;
    padding: 0 28px;
    border: none;
    outline: none;
    font-size: 36px;
    font-weight: 600;
    @include themify() {
      background: transparent;
      color: themed('text_color');
    }

    &::placeholder {
      font-size: 28px;
      font-weight: 400;
      color: #868e9b;
    }
  }

  .amount-suffix {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px;
    font-size: 28px;
    font-weight: 600;
    white-space: nowrap;
    @include themify() {
      color: themed('text_color');
      background: themed('cont_background');
    }
    border-left: 1px solid rgba(134, 142, 155, 0.2);
  }

  .all-btn {
    color: #004aee;
    font-size: 26px;
  }

  .balance-tip {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 26px;
    color: #868e9b;

    .balance-num {
      font-weight: 600;
      @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;
  }

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

  .submit-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    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;
  }

  .submit-btn {
    width: 100%;
    height: 96px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(90deg, #1a6dff, #004aee);
    color: #fff;
    font-size: 32px;
    font-weight: 600;
  }
}
</style>