翻译

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>
@@ -211,20 +126,16 @@
              <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="maxItems"
              @getAmount="getAmount"
            ></amount-slider>
            <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">
@@ -251,17 +162,11 @@
              <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">
              {{
@@ -277,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>
@@ -358,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>
@@ -377,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) || "--" }}
@@ -404,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) || "--" }}
@@ -445,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>
@@ -1198,7 +1023,8 @@
            this.$store.commit("user/SET_USERINFO", {
              balance: data.money,
            });
            location.reload();
            this.initFutrue.amount = data.money;
            // location.reload();
          });
          this.$emit("ordered", emitFunc);
          if (this.selectIndex / 1 === 2) {
@@ -1340,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;
@@ -1388,11 +1214,11 @@
  }
}

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

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

@@ -1408,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;
}
@@ -1522,6 +1347,7 @@
}

.perpetual-open {

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