1

admin

2026-01-07 cc9e88924fd45b2893d2fb4213ca980e026611a4

 src/components/trade/us-stock-ex-nav/index.vue

@@ -1,16 +1,40 @@
<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 +51,9 @@
    }
  },
  components: {

    [Popup.name]: Popup,
    [Field.name]: Field,
    [Button.name]: Button,
  },
  watch: {
    initObjData(val) {
@@ -45,7 +71,7 @@
        {
          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` 
          path: `/cryptos/perpetualContract/${val.symbol}?type=US-stocks&selectIndex=2`
        },
        {
          name: this.$t('账变记录'),
@@ -57,24 +83,51 @@
          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: this.$t('新股库存'),
          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}`
          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 +135,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 +183,14 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  color: $text_color;
  flex-shrink: 0;
  width: 25%;

  // 第5个及之后的按钮，每行5个
  // &:nth-child(n+5) {
  //   width: 20%;
  // }

  &:last-child {
    margin-right: 0px;
@@ -129,4 +215,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>