<template>
|
<div id="cryptos" class="mt-10">
|
<div class="nav">
|
<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 {
|
props: {
|
initObjData: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
stockActive: {
|
type: Number,
|
default: 0
|
}
|
},
|
components: {
|
[Popup.name]: Popup,
|
[Field.name]: Field,
|
[Button.name]: Button,
|
},
|
watch: {
|
initObjData(val) {
|
this.navList = [
|
{
|
name: this.$t('USstocktrading'),
|
icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon1-1.png`, import.meta.url),
|
path: '/quotes/openTrade?tabActive=0&symbol=AAPL&type=US-stocks'
|
},
|
{
|
name: this.$t('永续合约'),
|
icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon2-2.png`, import.meta.url),
|
path: `/cryptos/perpetualContract/${val.symbol}?type=US-stocks&selectIndex=1`
|
},
|
{
|
name: this.$t('期货交易'),
|
icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon3-3.png`, import.meta.url),
|
path: `/cryptos/perpetualContract/${val.symbol}?type=US-stocks&selectIndex=2`
|
},
|
{
|
name: this.$t('账变记录'),
|
icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon4-4.png`, import.meta.url),
|
path: '/cryptos/accountChange?type=US-stocks'
|
},
|
{
|
name: this.$t('新股认购'),
|
icon: new URL(`../../../assets/theme/${thStore.theme}/image/etfNav/icon5-5.png`, import.meta.url),
|
path: `/ipo?stock=US-stocks&stockActive=${this.$props.stockActive}`
|
},
|
{
|
name: this.$t('新股库存'),
|
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: [],
|
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) {
|
return
|
} 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)
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.nav {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
flex-wrap: wrap;
|
font-size: 26px;
|
color: #21262F;
|
}
|
|
.list {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
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;
|
}
|
|
.title {
|
font-family: 'PingFang HK';
|
font-style: normal;
|
font-size: 12px;
|
line-height: 17px;
|
text-align: center;
|
height: 40px;
|
}
|
}
|
|
.imgBox {
|
width: 48px;
|
height: 48px;
|
|
img {
|
width: 100%;
|
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>
|
