From 349c48e168b9f2580334422228acde7d1b21bede Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 05 Jun 2026 11:19:15 +0800
Subject: [PATCH] 1
---
src/views/cryptos/financialManagement/machineBuy.vue | 434 +++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 350 insertions(+), 84 deletions(-)
diff --git a/src/views/cryptos/financialManagement/machineBuy.vue b/src/views/cryptos/financialManagement/machineBuy.vue
index 710c3ce..50fa24c 100644
--- a/src/views/cryptos/financialManagement/machineBuy.vue
+++ b/src/views/cryptos/financialManagement/machineBuy.vue
@@ -1,77 +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) }} {{ 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 { showToast } from "vant";
+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
},
@@ -80,29 +108,63 @@
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) {
+ 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) {
@@ -112,49 +174,253 @@
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>
--
Gitblit v1.9.3