添加缓存

lxf

2025-07-16 f96f952d95930e1295051c1bfe348dd324ebf878

 src/components/Transform/perpetual-open/index.vue

@@ -1,7 +1,7 @@
<template>
  <!-- 永续合约开仓页 -->
  <div id="cryptos">
    <div class="perpetual-open">
    <div class="perpetual-open" style="width: 280px;">
      <div class="flex pt-34  ">
        <div class="w-180 h-60 lh-60 text-center rounded tabBackground textColor">{{ $t('全仓') }} </div>
        <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
@@ -21,7 +21,7 @@
      </div>
      <div class="pt-30 pb-20">
        <div class="flex">
          <div class="w-440 flex flex-col">
          <div class=" flex flex-col">
            <template v-if="selectIndex == 1">
              <div class="flex items-center h-66 rounded-lg text-grey">
                <p class="font-28 flex-1 flex items-center justify-center h-66 "
@@ -34,36 +34,38 @@
                </p>
              </div>
              <div class="mt-22 mb-30" style="position:relative;">
                <div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor" @click="selectBtn">
                <div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor"
                  @click="selectBtn">
                  <img src="../../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 ml-20" />
                  <div class="text-center" style="width:80%;">{{ title }}</div>
                  <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
                </div>
                <div class="option-box" v-show="isShow">
                  <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title
                  }}</div>
                  <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{
                    item.title
                    }}</div>
                </div>
              </div>
            </template>
            <contract-futrue v-if="selectIndex == 2" class="mb-20"
              :initFutrue="initFutrue" @paraId="onParaId" />
            <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
            <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
              <input placeholder="" class="greyBg w-full pl-20  h-76 border-none text-left rounded-lg"
                :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
              <span class="ml-20">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
            </div>

            <div class="w-440 flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;" v-if="initFutrue" >
              <div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
            <div class=" flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;"
              v-if="initFutrue">
              <!-- <div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
                class="w-80 flex items-center justify-center" style="height:100%;" @click="onReduce">
                <img src="../../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
              </div>
              <input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none greyBg text-center textColor"
                style="width: 156px;" v-model="form.amount" type="number" @input="onInput" />
              </div> -->
              <!-- <input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none greyBg text-center textColor"
                style="width: 156px;" v-model="form.amount" type="number" @input="onInput" /> -->
              <input v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'"
                :placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
                class="border-none greyBg text-center textColor" style="width: 156px;background-color:#f5f5f5;" v-model="form.amount" type="number"
                @input="onInput" />
                class="border-none greyBg text-center textColor" style="width: 226px;background-color:#f5f5f5;"
                v-model="form.amount" type="number" @input="onInput" />
              <div class="w-80 flex items-center justify-center" style="height:100%;background-color:#f5f5f5;">
                <template v-if="selectIndex == 1">
                  <img @click="onAdd" src="../../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
@@ -74,13 +76,13 @@
              </div>
            </div>
            <template v-if="selectIndex == 1">
              <div class="mt-40 mb-30 w-full flex justify-between items-center">
              <!-- <div class="mt-40 mb-30 w-full flex justify-between items-center">
                <span class="font-22 font-400 text-grey">{{ $t("可开张数") }}</span>
                <span class="font-22 font-400 textColor">
                  {{ initData.volume }}
                  {{ initData.volume || 0}}
                  {{ $t("张") }}
                </span>
              </div>
              </div> -->
              <!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
              <!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true"  width="90%"
              :railStyle="{ background: '#404040', height: '4px' }"
@@ -88,14 +90,14 @@
              <template v-slot:step="{ active }">
                <div :class="['custom-step', { active }]"></div>
              </template>
            </vue-slider>
            <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
              <span class="flex-1 text-left">0%</span>
              <span class="flex-1 text-left">25%</span>
              <span class="flex-1 text-center">50%</span>
              <span class="flex-1 text-right">75%</span>
              <span class="flex-1 text-right">100%</span>
            </div> -->
</vue-slider>
<div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
  <span class="flex-1 text-left">0%</span>
  <span class="flex-1 text-left">25%</span>
  <span class="flex-1 text-center">50%</span>
  <span class="flex-1 text-right">75%</span>
  <span class="flex-1 text-right">100%</span>
</div> -->
              <!-- 张数输入 -->
              <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
            </template>
@@ -116,7 +118,7 @@
                <div class="text-grey">{{ $t("建仓手续费") }}</div>
                <div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee *
                  (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate }} {{ queryType === 'cryptos' ?
    'USDT' : 'USD' }}</div>
                  'USDT' : 'USD' }}</div>
              </div>
            </template>

@@ -124,31 +126,32 @@
              <div>{{ $t("可用USDT") }}</div>
              <div class="textColor">{{ initFutrue.amount }} {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</div>
            </div>
            <div class="flex font-24 text-grey justify-between mt-20"
            <!-- {{JSON.stringify(initFutrue.para) != '[]'}} {{JSON.stringify(initFutrue.para)}} -->
            <!-- <div class="flex font-24 text-grey justify-between mt-20"
              v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
              <div>{{ $t("手续费") }}</div>
              <div class="textColor">
                {{
                  (
                    form.amount *
                    (initFutrue && initFutrue.para
                    (initFutrue?.para.length>0
                      ? initData.para[paraIndex].unit_fee
                      : "")
                  ).toFixed(2)
                }}
                {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
              </div>
            </div>
            </div> -->

            <template v-if="userInfo.token">
              <template v-if="selectIndex == 1">
                <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-70" v-if="currentType == 'long'"
                  @click="order('long')">
                  <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                    {{ $t('开多') }}
                    <span class="right-word font-22 text-center">{{
                    {{ $t('买入') }}
                    <!-- <span class="right-word font-22 text-center">{{
                      $t("看涨")
                    }}</span>
                    }}</span> -->
                  </div>
                  <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
                    {{ $t('做多买入') }}
@@ -157,10 +160,10 @@
                <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-70" v-if="currentType == 'short'"
                  @click="order('short')">
                  <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                    {{ $t('开空') }}
                    <span class="right-word font-22 text-center">{{
                    {{ $t('卖出') }}
                    <!-- <span class="right-word font-22 text-center">{{
                      $t("看跌")
                    }}</span>
                    }}</span> -->
                  </div>
                  <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
                    {{ $t('做空买入') }}
@@ -171,19 +174,19 @@
                <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-10 " @click="order('open')"
                  v-if="userInfo.token">
                  <div class="font-34 relative text-center" style="flex-grow: 1">
                    {{ $t("开多") }}
                    <span class="right-word font-22 text-center">{{
                    {{ $t("买入") }}
                    <!-- <span class="right-word font-22 text-center">{{
                      $t("看涨")
                    }}</span>
                    }}</span> -->
                  </div>
                </div>
                <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative;"
                  :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
                  <div class="relative font-34 text-center" style="flex-grow: 1">
                    {{ $t("开空") }}
                    <span class="right-word font-22 text-center">{{
                    {{ $t("卖出") }}
                    <!-- <span class="right-word font-22 text-center">{{
                      $t("看跌")
                    }}</span>
                    }}</span> -->
                  </div>
                </div>
              </template>
@@ -194,10 +197,11 @@
                <p class="pt-8">{{ $t('登陆后继续') }}</p>
              </div>
              <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
                @click="$router.push('/login')">{{ $t('logIn') }}</div>
                @click="$router.push('/login')">
                {{ $t('logIn') }}</div>
            </div>
          </div>
          <div class="ml-30">
          <!-- <div class="ml-30">
            <div class="w-290 flex justify-between text-grey font-22">
              <div>
                <div>{{ $t("价格") }}</div>
@@ -266,7 +270,6 @@
            <div class="flex k-select-box">
              <div class="mt-22 mb-22 select-box" style="position: relative">
                <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
                  <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                  <div class="pl-16 font-28 textColor" style="width: 80%">
                    {{ dataArrTitle }}
                  </div>
@@ -282,12 +285,12 @@
                <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
              </div>
            </div>
          </div>
          </div> -->
        </div>
      </div>
      <van-popup v-model:show="show" class="rounded-2xl">
        <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
          @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
        <popup-delivery style="padding: 10px;" showBtns :detailData="detailData" :key="detailData.order_no"
          @close="onClose" @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
      </van-popup>
      <van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
        close-on-click-action @cancel="onCancel">
@@ -436,27 +439,32 @@
    '$route'(val) {
      this.getHomeList(val.params.symbol);
    },
    initData(val) {
      if (val.lever.length > 0) {
        val.lever = val.lever.sort(this.orderListAsc('lever_rate'))
      }
    // initData(val) {
    //   if (val && val.lever && val.lever.length > 0) {
    //     val.lever = val.lever.sort(this.orderListAsc('lever_rate'))
    //   }

    }
    // }
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
    ...mapGetters('home', ['currency']),
    initData() {
      let obj = null
      if (this.selectIndex / 1 === 1) {

        obj = this.initOpen
        if (!obj.lever || !obj.lever.length) { // 倍数
          obj.lever = [{ id: 1, lever_rate: 1 }]
        const obj = this.initOpen ? { ...this.initOpen } : { lever: [{ id: 1, lever_rate: 1 }] };
        if (!obj.lever || !Array.isArray(obj.lever) || !obj.lever.length) {
          obj.lever = [{ id: 1, lever_rate: 1 }];
        } else {
          obj.lever = [...obj.lever].sort(this.orderListAsc('lever_rate'));
        }
        return obj
        return obj;
      }
      return this.initFutrue
      // 交割合约
      if (this.initFutrue && Array.isArray(this.initFutrue.para) && this.initFutrue.para.length > 0) {
        return this.initFutrue;
      }
      // 返回一个默认对象，避免模板报错
      return {};
    },
    coudBuyVolume() { // 可买数量
      return Math.floor((this.initOpen.volume / 1) / this.form.lever_rate)
@@ -633,9 +641,10 @@
    },
    continueTobuy(detailData) {
      this.show = false
      setTimeout(() => {
        this.$router.push(`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`)
      }, 300);
      // this.order()
      // setTimeout(() => {
      //   this.$router.push(`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`)
      // }, 300);
    },
    onQuickPrice(price) { // 点击金额变化
      if (this.type === '2') {
@@ -834,7 +843,7 @@
      })
    },
    //数字排序
    orderListAsc(filed, type = "asc"){
    orderListAsc(filed, type = "asc") {
      return (a, b) => {
        if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
        return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
@@ -1057,12 +1066,16 @@
    margin-right: 20px;
  }
}
.diviLine{

.diviLine {
  background-color: #f5f5f5;
}
.textColor2, .textColor{

.textColor2,
.textColor {
  color: #fff;
}

.deep-div {
  min-height: 370px;
}