翻译

lxf

2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75

 src/components/perpetual-open/index.vue

@@ -3,41 +3,19 @@
  <div class="perpetual-open">
    <div class="flex header-open">
      <div class="flex flex-1 pt-34">
        <div
          class="w-180 h-60 lh-60 text-center rounded inputBackground textColor"
        >
        <div class="w-180 h-60 lh-60 text-center rounded inputBackground textColor">
          {{ $t("全仓") }}
        </div>
        <!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</div> -->
        <div
          class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor"
          v-if="selectIndex / 1 === 1"
        >
          <div
            @click="showOptions = !showOptions"
            style="height: 100%; box-sizing: border-box"
            class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center"
          >
        <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
          <div @click="showOptions = !showOptions" style="height: 100%; box-sizing: border-box"
            class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center">
            {{ form.lever_rate }}x
            <img
              src="../../assets/image/public/grey-select.png"
              alt="select-icon"
              class="w-22 h-11"
            />
            <div
              v-if="showOptions"
              class="options w-140 absolute top-97 left-0 z-10"
            >
              <div
                class="w-full"
                @click.stop="handleChoose(item)"
                :class="{
                  'option-active': form.lever_rate === item.lever_rate,
                }"
                :value="item.lever_rate"
                v-for="item in initData.lever"
                :key="item.id"
              >
            <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
            <div v-if="showOptions" class="options w-140 absolute top-97 left-0 z-10">
              <div class="w-full" @click.stop="handleChoose(item)" :class="{
                'option-active': form.lever_rate === item.lever_rate,
              }" :value="item.lever_rate" v-for="item in initData.lever" :key="item.id">
                {{ item.lever_rate }}x
              </div>
            </div>
@@ -45,12 +23,7 @@
        </div>
      </div>
      <div>
        <img
          src="../../assets/image/public/k-line.png"
          alt="line-img"
          class="w-38 h-35"
          @click="jump"
        />
        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
      </div>
    </div>
    <div class="pt-30 pb-20">
@@ -58,67 +31,34 @@
        <div class="w-440 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"
                :class="currentType == 'long' ? 'long' : ''"
                @click="changeTab('long')"
              >
              <p class="font-28 flex-1 flex items-center justify-center h-66"
                :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
                {{ $t("开多") }}
              </p>
              <p
                class="font-28 flex-1 flex items-center justify-center h-66"
                :class="currentType == 'short' ? 'short' : ''"
                @click="changeTab('short')"
              >
              <p class="font-28 flex-1 flex items-center justify-center h-66"
                :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
                {{ $t("开空") }}
              </p>
            </div>
            <div class="mt-30 mb-30" style="position: relative">
              <div
                class="inputBackground 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 pl-20"
                />
              <div class="inputBackground 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 pl-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 pr-20"
                />
                <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="isShow">
                <div
                  class="font-30"
                  v-for="item in selectData"
                  :key="item.type"
                  @click="selectItem(item)"
                >
                <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"
          />
          <div
            class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1"
          >
            <input
              placeholder=""
              class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
              :disabled="type / 1 === 1"
              @focus="focus = true"
              v-model="form.price"
            />
          <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
          <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1">
            <input placeholder="" class="inputBackground 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">USDT</span>
          </div>
          <!-- <div
@@ -143,46 +83,21 @@
            />
            <span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
          </div> -->
          <div
            class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg"
          >
            <div
              v-if="selectIndex == 1"
              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 class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg">
            <div v-if="selectIndex == 1" 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
              :placeholder="
                selectIndex == 1
                  ? $t('张数')
                  : $t('最少') + initFutrue && initFutrue.para
                  ? $t('最小金额') + initFutrue.para[paraIndex].buy_min
                  : ''
              "
              class="border-none inputBackground text-center textColor"
              style="width: 156px"
              v-model="form.amount"
              type="number"
              @input="onInput"
            />
            <div
              class="w-80 flex items-center justify-center"
              style="height: 100%"
            >
            <input :placeholder="selectIndex == 1
              ? $t('手数')
              : $t('最少') + initFutrue && initFutrue.para
                ? $t('最小金额') + initFutrue.para[paraIndex].buy_min
                : ''
              " class="border-none inputBackground text-center textColor" style="width: 156px" v-model="form.amount"
              type="number" @input="onInput" />
            <div class="w-80 flex items-center justify-center" style="height: 100%">
              <template v-if="selectIndex == 1">
                <img
                  @click="onAdd"
                  src="../../assets/image/public/add.png"
                  alt="reduce"
                  class="w-30 h-30"
                />
                <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
              </template>
              <template v-else>
                <span class="textColor">USDT</span>
@@ -191,57 +106,17 @@
          </div>
          <template v-if="selectIndex == 1">
            <div class="mt-40 mb-30 w-full flex justify-between items-center">
              <span class="font-22 font-400 text-grey">{{
                $t("可开张数")
              }}</span
              >{{ form.lever_rate }}
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 25"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.0375) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              <span class="font-22 font-400 text-grey">
                <!-- {{ $t("可开") }}{{ $t("手数") }} -->
                {{ $t("可用余额") }}
                <!-- {{initFutrue.amount / (initData.amount + 0.0375) * form.lever_rate }}  //  -->
              </span>
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 50"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.075) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              </span>
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 100"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.15) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              </span>
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 200"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.3) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              <!-- {{ form.lever_rate }} -->
              <span class="font-22 font-400 textColor">
                <!-- 余额 -->
                {{ initFutrue.amount }} USDT
                <!-- {{ maxItems }} -->
                <!-- {{ $t("手数") }} -->
              </span>
            </div>
            <!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
@@ -251,39 +126,29 @@
              <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> -->
            <!-- 张数输入 -->
            <amount-slider
              ref="sliderRef"
              :maxAmount="getVolumnByLever()"
              @getAmount="getAmount"
            ></amount-slider>
</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="maxItems" @getAmount="getAmount"></amount-slider>
          </template>
          <template v-if="selectIndex == 1 && userInfo.token">
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("合约金额") }}</div>
              <div class="textColor">
                {{
                  (
                    initData.amount *
                    (form.amount / 1) *
                    form.lever_rate
                  ).toFixed(4)
                }}
                {{ (form.amount * initData.amount).toFixed(4) }}
                USDT
              </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("保证金") }}</div>
              <div class="textColor">
                {{ ((initData.amount * (form.amount / 1)) | nan).toFixed(4) }}
                {{ margin.toFixed(4) }}
                USDT
              </div>
            </div>
@@ -294,35 +159,14 @@
               ? initData.fee * (form.amount / 1)
               : (initData.fee * (form.amount / 1) * form.lever_rate) | nan
           }} -->
              <div class="textColor" v-if="form.lever_rate == 25">
                {{ (initData.amount * (form.amount / 1) * 0.0375).toFixed(4) }}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate == 50">
                {{ (initData.amount * (form.amount / 1) * 0.075).toFixed(4) }}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate == 100">
                {{ (initData.amount * (form.amount / 1) * 0.15).toFixed(4) }}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate == 200">
                {{ (initData.amount * (form.amount / 1) * 0.3).toFixed(4) }}
                USDT
              </div>
              <div class="textColor">{{ fee.toFixed(4) }} USDT</div>
            </div>
          </template>
          <div
            class="flex font-24 text-grey justify-between mt-32"
            v-if="selectIndex == 2"
          >
          <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
            <div>{{ $t("可用USDT") }}</div>
            <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
          </div>
          <div
            class="flex font-24 text-grey justify-between mt-20"
            v-if="selectIndex == 2"
          >
          <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
            <div>{{ $t("手续费") }}</div>
            <div class="textColor">
              {{
@@ -338,78 +182,48 @@
          </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-50"
                v-if="currentType == 'long'"
                @click="order('long')"
              >
                <div
                  class="font-34 relative text-center"
                  style="flex-grow: 1"
                  v-if="selectIndex == 1"
                >
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" 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">{{
                  <!-- <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
                >
                <div class="font-34 relative text-center" style="flex-grow: 1" v-else>
                  {{ $t("做多买入") }}
                </div>
              </div>
              <div
                class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50"
                v-if="currentType == 'short'"
                @click="order('short')"
              >
                <div
                  class="relative font-34 text-center"
                  style="flex-grow: 1"
                  v-if="selectIndex == 1"
                >
              <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" 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">{{
                  <!-- <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
                >
                <div class="relative font-34 text-center" style="flex-grow: 1" v-else>
                  {{ $t("做空买入") }}
                </div>
              </div>
            </template>
            <template v-if="selectIndex == 2">
              <div
                class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30"
                @click="order('open')"
                v-if="userInfo.token"
              >
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30" @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">{{
                  <!-- <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="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">{{
                  <!-- <span class="right-word font-22 text-center">{{
                    $t("看跌")
                  }}</span>
                    }}</span> -->
                </div>
              </div>
            </template>
@@ -419,10 +233,8 @@
              <p>{{ $t("套期保值，风险对冲") }}</p>
              <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')"
            >
            <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
              @click="$router.push('/login')">
              {{ $t("登录后进行交易") }}
            </div>
          </div>
@@ -438,25 +250,18 @@
              <div class="mt-5">({{ symbolname || "--" }})</div>
            </div>
          </div>
          <div
            v-if="showType == 0 || showType == 1"
            class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in greenData"
            :key="index"
            @click="onQuickPrice(item.price)"
            :style="{
          <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
              background:
                `linear-gradient(to right,${
                  theme == 'dark' ? '#121212' : '#ffffff'
                `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                100 +
                '%,rgba(94,186,137,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                100 +
                '%,rgba(94,186,137,.1) 100%)',
            }"
          >
            }">
            <div class="text-green">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib'">
              {{ fixDate(item.amount, $i18n) || "--" }}
@@ -465,37 +270,26 @@
              {{ item.amount || "--" }}
            </div>
          </div>
          <div
            v-if="showType == 0 || showType == 1 || showType == 2"
            class="w-290 text-red pt-12 font-34 font-700 text-center"
          >
          <div v-if="showType == 0 || showType == 1 || showType == 2"
            class="w-290 text-red pt-12 font-34 font-700 text-center">
            {{ approximately || "--" }}
          </div>
          <div
            v-if="showType == 0 || showType == 1 || showType == 2"
            class="approximately-text pb-12 font-20 text-center"
          >
          <div v-if="showType == 0 || showType == 1 || showType == 2"
            class="approximately-text pb-12 font-20 text-center">
            ≈ {{ price || "--" }}
          </div>
          <div
            v-if="showType == 0 || showType == 2"
            class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in redData"
            :key="item + index"
            @click="onQuickPrice(item.price)"
            :style="{
          <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
              background:
                `linear-gradient(to right,${
                  theme == 'dark' ? '#121212' : '#ffffff'
                `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                100 +
                '%,rgba(246,70,93,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                100 +
                '%,rgba(246,70,93,.1) 100%)',
            }"
          >
            }">
            <div class="text-red">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib'">
              {{ fixDate(item.amount, $i18n) || "--" }}
@@ -506,62 +300,32 @@
          </div>
          <div class="flex k-select-box">
            <div class="mt-30 mb-30 select-box" style="position: relative">
              <div
                class="flex justify-between items-center w-full h-70"
                @click="selectArryBtn"
              >
              <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 textColor" style="width: 80%">
                  {{ dataArrTitle }}
                </div>
                <img
                  src="@/assets/image/public/grey-select.png"
                  alt="select-icon"
                  class="w-22 h-11 pr-20"
                />
                <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="arryIsShow">
                <div
                  class="font-30"
                  v-for="(item, index) in selectDataArry"
                  :key="index"
                  @click="selectItemArry(item)"
                >
                <div class="font-30" v-for="(item, index) in selectDataArry" :key="index" @click="selectItemArry(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div @click="isSelectShow = true">
              <img
                src="@/assets/image/selectIcon.png"
                alt="warn-icon"
                class="w-36 h-30"
              />
              <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" class="rounded-2xl">
      <popup-delivery
        showBtns
        :detailData="detailData"
        :key="detailData.order_no"
        @close="onClose"
        @continueToBuy="continueTobuy"
        @timeEnd="handleTimeEnd"
        :price="price"
        :symbol="symbol"
      />
      <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
        @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" :symbol="symbol" />
    </van-popup>
    <van-action-sheet
      v-model="isSelectShow"
      @select="onSelect"
      :actions="actions"
      :cancel-text="$t('取消')"
      close-on-click-action
      @cancel="onCancel"
    >
    <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
      close-on-click-action @cancel="onCancel">
    </van-action-sheet>
  </div>
</template>
@@ -750,6 +514,18 @@
          // 倍数
          obj.lever = [
            {
              id: 25,
              lever_rate: 25,
            },
            {
              id: 50,
              lever_rate: 50,
            },
            {
              id: 100,
              lever_rate: 100,
            },
            {
              id: 200,
              lever_rate: 200,
            },
@@ -762,6 +538,66 @@
    coudBuyVolume() {
      // 可买数量
      return Math.floor(this.initOpen.volume / 1 / this.form.lever_rate);
    },
    // 每份保证金
    perItemMargin() {
      console.log(
        this.initData,
        ": 每份保证金",
        this.initData.amount / this.form.lever_rate
      );
      return this.initData.amount / this.form.lever_rate;
    },
    // 每份手续费（基于保证金）
    perItemFee() {
      const rateMap = {
        25: 0.0375,
        50: 0.075,
        100: 0.15,
        200: 0.3,
      };
      const rate = rateMap[this.form.lever_rate];
      return this.perItemMargin * rate;
    },
    // 每份总支出
    perItemTotalCost() {
      return this.perItemMargin + this.perItemFee;
    },
    // 最大可购买整数份数
    maxItems() {
      console.log(this.initFutrue.amount, ": initFutrue.amount");
      if (this.perItemTotalCost <= 0) return 0;
      return Math.floor(this.initFutrue.amount / this.perItemTotalCost);
    },
    // 实际交易金额
    actualTradeValue() {
      return this.form.amount * this.initData.amount;
    },
    // 总保证金
    margin() {
      return this.form.amount * this.perItemMargin;
    },
    // 总手续费
    fee() {
      return this.form.amount * this.perItemFee;
    },
    // 总支出
    totalExpenditure() {
      return this.margin + this.fee;
    },
    calculatedFee() {
      const rateMap = {
        25: 0.0375,
        50: 0.075,
        100: 0.15,
        200: 0.3,
      };
      const rate = rateMap[this.form.lever_rate];
      console.log(this.initData.amount, ": initData.amount");
      return (
        (this.form.amount * this.initData.amount * rate) / this.form.lever_rate
      );
      // : this.initData.amount * (this.form.amount / 1) * rate;
    },
  },
  filters: {
@@ -803,7 +639,7 @@
        stop_price_profit: "",
        stop_price_loss: "",
        price: "",
        amount: "", // 数量
        amount: 0, // 数量
        para_id: "", // 交割周琦id
      },
      focus: false,
@@ -859,7 +695,8 @@
  methods: {
    //获取张数
    getAmount(val) {
      this.form.amount = val;
      console.log(val, "获取张数");
      this.form.amount = val || 0;
      // if(this.form.lever_rate==25){
      //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.0375))/this.initData.amount)
      // }else if(this.form.lever_rate==50){
@@ -875,25 +712,33 @@
      let vol;
      // vol = this.initOpen.volume / 1;
      if (this.form.lever_rate == 25) {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
            this.initData.amount
        );
        vol =
          Math.floor(
            // (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
            //   this.initData.amount
            this.initFutrue.amount / (this.initData.amount + 0.0375)
          ) * this.form.lever_rate;
      } else if (this.form.lever_rate == 50) {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
            this.initData.amount
        );
        vol =
          Math.floor(
            // (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
            //   this.initData.amount
            this.initFutrue.amount / (this.initData.amount + 0.075)
          ) * this.form.lever_rate;
      } else if (this.form.lever_rate == 100) {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.15) /
            this.initData.amount
        );
        vol =
          Math.floor(
            // (this.initFutrue.amount - this.initFutrue.amount * 0.15) /
            //   this.initData.amount
            this.initFutrue.amount / (this.initData.amount + 0.15)
          ) * this.form.lever_rate;
      } else {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.3) /
            this.initData.amount
        );
        vol =
          Math.floor(
            // (this.initFutrue.amount - this.initFutrue.amount * 0.3) /
            //   this.initData.amount
            this.initFutrue.amount / (this.initData.amount + 0.3)
          ) * this.form.lever_rate;
      }
      return Math.floor(vol);
    },
@@ -1172,11 +1017,14 @@
            this.$refs.sliderRef.emptyValue();
          }
          this.$toast(this.$t("操作成功"));

          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", {
              balance: data.money,
            });
            this.initFutrue.amount = data.money;
            // location.reload();
          });
          this.$emit("ordered", emitFunc);
          if (this.selectIndex / 1 === 2) {
@@ -1318,16 +1166,16 @@
  overflow: hidden;
}

.tab > * {
.tab>* {
  height: 100%;
}

.tab > img {
.tab>img {
  margin-left: -2px;
  margin-right: -2px;
}

.tab > a {
.tab>a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
@@ -1366,11 +1214,11 @@
  }
}

.option-box > div {
.option-box>div {
  padding: 30px 0;
}

.option-box > div:hover {
.option-box>div:hover {
  // background-color: #f5f5f5;
}

@@ -1386,8 +1234,7 @@
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll
    right center transparent;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}
@@ -1500,6 +1347,7 @@
}

.perpetual-open {

  ::v-deep .van-action-sheet__item,
  ::v-deep .van-action-sheet__cancel {
    @include themify() {