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/machineConfirm.vue | 298 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 233 insertions(+), 65 deletions(-)
diff --git a/src/views/cryptos/financialManagement/machineConfirm.vue b/src/views/cryptos/financialManagement/machineConfirm.vue
index 0360a46..4e6217d 100644
--- a/src/views/cryptos/financialManagement/machineConfirm.vue
+++ b/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>
--
Gitblit v1.9.3