first

zzzz

2024-04-19 35f3f260f3d3c51ac2256899ade3b9a144b46b28

 src/components/perpetual-open/index.vue

@@ -1,6 +1,7 @@
<template>
  <!-- 永续合约开仓页 -->
  <div class="perpetual-open">
    <!-- 隐藏杠杠   全仓     k 线图入口 -->
    <div class="flex header-open">
      <div class="flex flex-1 pt-34">
        <div
@@ -8,7 +9,6 @@
        >
          {{ $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"
@@ -55,18 +55,130 @@
    </div>
    <div class="pt-30 pb-20">
      <div class="flex">
        <div class="mr-30">
          <div class="w-290 flex justify-between newcolor1 font-22">
            <div>
              <div class="">{{ $t("价格") }}</div>
              <div class="mt-4">(USDT)</div>
            </div>
            <div class="text-right items-end justify-end">
              <div class="">{{ $t("数量") }}</div>
              <div class="mt-4">({{ symbol.toUpperCase() || "--" }})</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="{
              background:
                `linear-gradient(to right,${
                  theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                '%,rgba(94,186,137,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  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) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ item.amount || "--" }}
            </div>
          </div>
          <div
            v-if="showType == 0 || showType == 1 || showType == 2"
            class="w-290 mt-38 mb-38 text-red pt-12 font-34 font-700"
          >
            {{ approximately || "--" }}
          </div>
          <!-- <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="{
              background:
                `linear-gradient(to right,${
                  theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                '%,rgba(246,70,93,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  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) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ item.amount || "--" }}
            </div>
          </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="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"
                />
              </div>
              <div class="option-box" v-show="arryIsShow">
                <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"
              />
            </div>
          </div> -->
        </div>
        <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="font-28 flex-1 flex items-center justify-center h-66 long"
                :class="currentType == 'long' ? 'long' : ''"
                @click="changeTab('long')"
              >
                {{ $t("开多") }}
              </p>
              <p
                class="font-28 flex-1 flex items-center justify-center h-66"
                class="font-28 flex-1 ml-20 flex items-center justify-center h-66 short"
                :class="currentType == 'short' ? 'short' : ''"
                @click="changeTab('short')"
              >
@@ -75,7 +187,7 @@
            </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"
                class="box-show flex justify-between items-center w-full h-76 rounded-lg textColor"
                @click="selectBtn"
              >
                <img
@@ -109,19 +221,19 @@
            @paraId="onParaId"
          />
          <div
            class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            class="h-76 lh-76 mb-30 flex pr-20 justify-center rounded-lg newcolor1 box-show"
            v-if="selectIndex == 1"
          >
            <input
              placeholder=""
              class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
              class="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
          <!-- <div
            class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1"
          >
@@ -131,8 +243,8 @@
              v-model="form.stop_price_profit"
            />
            <span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>
          </div>
          <div
          </div> -->
          <!-- <div
            class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1"
          >
@@ -142,10 +254,8 @@
              v-model="form.stop_price_loss"
            />
            <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> -->
          <div class="w-440 flex items-center box-show h-76 lh-76 rounded-lg">
            <div
              v-if="selectIndex == 1"
              class="w-80 flex items-center justify-center"
@@ -158,6 +268,7 @@
                class="w-30 h-6"
              />
            </div>

            <input
              :placeholder="
                selectIndex == 1
@@ -166,7 +277,7 @@
                  ? $t('最小金额') + initFutrue.para[paraIndex].buy_min
                  : ''
              "
              class="border-none inputBackground text-center textColor"
              class="border-none text-center newcolor1"
              style="width: 156px"
              v-model="form.amount"
              type="number"
@@ -190,11 +301,11 @@
            </div>
          </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">{{
            <div class="mt-50 w-full flex justify-between items-center">
              <span class="font-22 font-400 newcolor1">{{
                $t("可开张数")
              }}</span>
              <span class="font-22 font-400 textColor">
              <span class="font-22 font-400 newcolor1">
                {{ initData.volume }}
                {{ $t("张") }}
              </span>
@@ -223,19 +334,19 @@
          </template>
          <template v-if="selectIndex == 1 && userInfo.token">
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("合约金额") }}</div>
              <div class="newcolor1">{{ $t("合约金额") }}</div>
              <div class="textColor">
                {{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT
              </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("保证金") }}</div>
              <div class="newcolor1">{{ $t("保证金") }}</div>
              <div class="textColor">
                {{ (initData.amount * (form.amount / 1)) | nan }} USDT
              </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("建仓手续费") }}</div>
              <div class="newcolor1">{{ $t("建仓手续费") }}</div>
              <div class="textColor">
                {{
                  userInfo.perpetual_contracts_status === "1"
@@ -283,9 +394,9 @@
                  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"
@@ -306,9 +417,9 @@
                  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"
@@ -360,102 +471,6 @@
              {{ $t("登录后进行交易") }}
            </div>
          </div>
        </div>
        <div class="ml-30">
          <div class="w-290 flex justify-between text-grey font-22">
            <div>
              <div>{{ $t("价格") }}</div>
              <div class="mt-4">(USDT)</div>
            </div>
            <div class="text-right items-end justify-end">
              <div class="">{{ $t("数量") }}</div>
              <div class="mt-4">({{ symbol.toUpperCase() || "--" }})</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="{
              background:
                `linear-gradient(to right,${
                  theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                '%,rgba(94,186,137,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  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) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ 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"
          >
            {{ approximately || "--" }}
          </div>
          <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="{
              background:
                `linear-gradient(to right,${
                  theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  100 +
                '%,rgba(246,70,93,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                  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) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ item.amount || "--" }}
            </div>
          </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="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" />
              </div>
              <div class="option-box" v-show="arryIsShow">
                <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" />
            </div>
          </div> -->
        </div>
      </div>
    </div>
@@ -1072,6 +1087,9 @@
</script>

<style lang="scss" scoped>
input:disabled {
  background: transparent;
}
.perpetual-open {
  font-size: 26px;
}