From 03043192ddf00f9a36b7454799a9152cd1b50a0b Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:13:45 +0800
Subject: [PATCH] 1
---
src/components/trade/us-stock-ex-nav/index.vue | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 164 insertions(+), 6 deletions(-)
diff --git a/src/components/trade/us-stock-ex-nav/index.vue b/src/components/trade/us-stock-ex-nav/index.vue
index f29b2c0..1d538c9 100644
--- a/src/components/trade/us-stock-ex-nav/index.vue
+++ b/src/components/trade/us-stock-ex-nav/index.vue
@@ -1,16 +1,45 @@
<template>
<div id="cryptos" class="mt-10">
<div class="nav">
- <div v-for="(item, index) in navList" :key="index" class="list" @click="goPath(item.path, item.name)">
+ <div v-for="(item, index) in navList" :key="index" class="list" @click="handleItemClick(item)">
<div class="imgBox"><img :src="handleImage(item.icon)" alt=""></div>
<div class="mt-10 text-center title">{{ item.name }}</div>
</div>
</div>
+
+ <!-- ATS 购买弹框 -->
+ <van-popup v-model:show="showAtsModal" round position="center" :style="{ width: '90%', maxWidth: '500px' }">
+ <div class="ats-modal">
+ <div class="modal-header">
+ <h3 class="modal-title">{{ $t('ATS购买') }}</h3>
+ <span @click="closeAtsModal" class="close-icon">×</span>
+ </div>
+ <div class="modal-content">
+ <div class="input-group">
+ <label class="input-label">{{ $t('购买金额') }}</label>
+ <van-field
+ v-model="atsAmount"
+ type="number"
+ :placeholder="$t('请输入购买金额')"
+ class="amount-input"
+ />
+ </div>
+ </div>
+ <div class="modal-footer">
+ <van-button class="cancel-btn" @click="closeAtsModal">{{ $t('关闭') }}</van-button>
+ <van-button type="primary" class="buy-btn" @click="handleBuy">{{ $t('购买') }}</van-button>
+ </div>
+ </div>
+ </van-popup>
</div>
</template>
<script>
import { themeStore } from '@/store/theme';
+import { Popup, Field, Button } from 'vant';
+import { showToast } from 'vant';
+import { _stockAts } from '@/service/trade.api';
+
const thStore = themeStore()
export default {
@@ -27,7 +56,9 @@
}
},
components: {
-
+ [Popup.name]: Popup,
+ [Field.name]: Field,
+ [Button.name]: Button,
},
watch: {
initObjData(val) {
@@ -62,19 +93,46 @@
icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon6-6.png`, import.meta.url),
path: `/ipo/stock?type=newStock&stock=US-stocks&stockActive=${this.$props.stockActive}`
},
+ {
+ name: 'ATS',
+ icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon6-6.png`, import.meta.url),
+ path: `/ipo/stock?type=newStock&stock=US-stocks&stockActive=${this.$props.stockActive}`,
+ isAts: true
+ },
+ {
+ name: this.$t('大宗交易'),
+ icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon3-3.png`, import.meta.url),
+ path: '/cryptos/blockTrades'
+ },
+ {
+ name: this.$t('暗池交易'),
+ icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon3-3.png`, import.meta.url),
+ path: '/cryptos/darkpoolTrading'
+ },
]
}
},
data() {
return {
- navList: [
-
- ],
+ navList: [],
+ showAtsModal: false,
+ atsAmount: ''
}
},
methods: {
handleImage(url) {
return new URL(url, import.meta.url).href
+ },
+ handleItemClick(item) {
+ if (item.isAts) {
+ // ATS 按钮点击打开弹框
+ // this.showAtsModal = true
+
+ showToast(this.$t('敬请期待'))
+ } else {
+ // 其他按钮正常跳转
+ this.goPath(item.path, item.name)
+ }
},
goPath(path, name) {
if (!path) {
@@ -82,6 +140,34 @@
} else {
this.$router.push(path)
}
+ },
+ closeAtsModal() {
+ this.showAtsModal = false
+ this.atsAmount = ''
+ },
+ handleBuy() {
+ if (!this.atsAmount || parseFloat(this.atsAmount) <= 0) {
+ showToast({
+ message: this.$t('请输入有效的购买金额'),
+ type: 'fail'
+ })
+ return
+ }
+
+ // 调用ATS购买接口
+ _stockAts({
+ price: this.atsAmount
+ }).then((res) => {
+ // 购买成功
+ showToast({
+ message: this.$t('购买成功'),
+ type: 'success'
+ })
+ this.closeAtsModal()
+ }).catch((error) => {
+ // 购买失败，错误信息已经在request拦截器中处理了
+ console.error('ATS购买失败:', error)
+ })
}
},
}
@@ -102,9 +188,18 @@
flex-direction: column;
justify-content: center;
align-items: center;
- width: 25%;
color: $text_color;
flex-shrink: 0;
+
+ // 前4个按钮，每行4个
+ &:nth-child(-n+4) {
+ width: 25%;
+ }
+
+ // 第5个及之后的按钮，每行5个
+ &:nth-child(n+5) {
+ width: 20%;
+ }
&:last-child {
margin-right: 0px;
@@ -129,4 +224,67 @@
height: 100%;
}
}
+
+.ats-modal {
+ padding: 20px;
+ background: #fff;
+ border-radius: 12px;
+}
+
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+
+ .modal-title {
+ font-size: 18px;
+ font-weight: bold;
+ color: #21262F;
+ }
+
+ .close-icon {
+ cursor: pointer;
+ color: #999;
+ font-size: 24px;
+ line-height: 1;
+ user-select: none;
+
+ &:hover {
+ color: #666;
+ }
+ }
+}
+
+.modal-content {
+ margin-bottom: 20px;
+
+ .input-group {
+ .input-label {
+ display: block;
+ font-size: 14px;
+ color: #666;
+ margin-bottom: 8px;
+ }
+
+ .amount-input {
+ width: 100%;
+ }
+ }
+}
+
+.modal-footer {
+ display: flex;
+ gap: 12px;
+
+ .cancel-btn {
+ flex: 1;
+ border: 1px solid #ddd;
+ color: #666;
+ }
+
+ .buy-btn {
+ flex: 1;
+ }
+}
</style>
--
Gitblit v1.9.3