1

李凌

5 days ago 349c48e168b9f2580334422228acde7d1b21bede

 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 }}&nbsp;{{ 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 }}&nbsp;{{ 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>