买卖全部

lxf

2025-07-16 f496d313048276f62823fe1b89a0b2ded346535f

 src/components/Transform/trade-order-area/index.vue

@@ -1,10 +1,10 @@
<template>
  <div class="flex flex-col flex-1 font-28">
  <div class="flex flex-col flex-1 font-28" style="width: 280px;">
    <div class="flex items-center h-66 tabBackground text-grey">
      <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
        :class="currentType === 'open' ? 'open' : ''" @click="currentType = 'open'">{{ $t('买入') }}</p>
      <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'close' ? 'close' : ''" @click="changeTab('close')">{{ $t('卖出') }}</p>
        :class="currentType === 'close' ? 'close' : ''" @click="currentType = 'close'">{{ $t('卖出') }}</p>
    </div>

    <div class="mt-22 mb-22 inputBackground" style="position:relative;">
@@ -18,34 +18,36 @@
        </div>
      </div>
    </div>
    <!-- {{ form }} -->
    <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2">
      <input placeholder="" class="targetPrice  w-full  h-70 border-none" v-model="form.price"
        :disabled="type / 1 === 1" />
      <span>USDT</span>
    </div>
    <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2">
    <!-- <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2">
      <span>{{ title }}</span>
    </div>
    </div> -->
    <div class="flex total-list">
      <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
        {{ $t('数量') }}
      </div>
      <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
      <!-- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
        {{ $t('总额') }}
      </div>
      </div> -->
    </div>
    <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
      <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
        @input="onInput" />
      <span class="textColor font-28">{{ symbol.toLocaleUpperCase() }}</span>
      <span @click="fillAllBalance" class="cursor-pointer text-blue-500 " style="padding: 0 10px;">{{ $t('全部') }}</span>
    </div>
    <div v-if="isTotal" class="h-70 lh-70 inputBackground  mb-36 flex justify-center px-16">
      <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
        @input="onInputTotal" />
      <span class="textColor font-28">{{ 'USDT' }}</span>
    </div>
    <div class="font-24 w-full flex justify-between items-center textColor1">
      <!-- <span class="flex-1 text-left">0%</span> -->
    <!-- <div class="font-24 w-full flex justify-between items-center textColor1">
      <span class="flex-1 text-left">0%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
        @click="exchangeVal(25)">25%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
@@ -54,7 +56,7 @@
        @click="exchangeVal(75)">75%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
        @click="exchangeVal(100)">100%</span>
    </div>
    </div> -->
    <div class="flex justify-between items-center mt-40">
      <div class="flex flex-col font-24">
        <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
@@ -90,10 +92,6 @@
    [Tab.name]: Tab
  },
  props: {
    symbol: {
      type: String,
      default: ''
    },
    symbol: {
      type: String,
      default: ''
@@ -166,7 +164,7 @@
        order_price_type: 'opponent', // 市价or限价
      },
      type: "1",//选中市价或限价类型
      currentType: "open", //开仓类型
      currentType: 'open', // 默认选中买入
      interval: 0.001,
      marks: (val) => val % 25 === 0,
      isTotal: false,
@@ -180,6 +178,7 @@
    ]
    this.title = this.selectData[0].title
    this.type = this.selectData[0].type
    // this.currentType = this.currentTypes
    this.form.order_price_type = 'opponent'
  },
  methods: {
@@ -188,6 +187,24 @@
      this.percentageVal = 0
      this.form.total = ''
      this.form.volume = ''
    },
    fillAllBalance() {
      if (!this.userInfo.token) {
        this.$router.push('/login');
        return;
      }
      if (this.currentType === 'open') {
        // 买入模式：可用USDT / 当前价格
        const availableUsdt = parseFloat(this.initOpen.volume) || 0;
        const price = parseFloat(this.form.price) || 0;
        if (price > 0) {
          this.form.volume = (availableUsdt / price).toFixed(6);
        }
      } else {
        // 卖出模式：直接使用可用币种数量
        this.form.volume = parseFloat(this.initClose.volume) || 0;
      }
      this.onInput();
    },
    exchangeVal(val) {
      if (!this.userInfo.token) {
@@ -198,7 +215,8 @@
      if (!this.isTotal) {
        if (this.currentType == 'open') {
          let sum = (parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price))
          this.form.volume = Math.floor(sum * 100000) / 100000
          this.form.volume = Math.floor(sum * 100000) / 100000;
          this.onInput();
        } else {
          let sum = parseFloat(this.initClose.volume)
          this.form.volume = (Math.floor(sum * (val / 100) * 100000)) / 100000
@@ -470,15 +488,17 @@
}

.open {
  background-color: $green;
  background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  // background-color: $green;
  background-color: #2EBD85;
  // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  background-size: 100% 100%;
  color: white;
}

.close {
  background-color: $green;
  background: url(@/assets/image/public/close-bg.png) no-repeat left center;
  background-color: #DE5D56;
  // background: url(@/assets/image/public/close-bg.png) no-repeat left center;

  background-size: 100% 100%;
  color: white;
}
@@ -585,4 +605,3 @@
  color: $text_color;
}
</style>