1

李

2026-05-26 0dbc7465447164fef24327b5d494870832d798dd

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

@@ -3,7 +3,7 @@
  <div id="cryptos">
    <div class="perpetual-open">
      <div class="flex pt-8">
        <div class="w-40 h-16 text-center rounded tabBackground textColor">{{ $t('全仓') }}</div>
        <div class="w-40 h-16 flex items-center justify-center rounded tabBackground textColor">{{ $t('全仓') }}</div>
        <div class="w-36 h-16 ml-8 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
          <div @click="showOptions = !showOptions" style="height:100%; box-sizing: border-box"
               class="relative word-30 pl-7 pr-2 w-36 h-16 tabBackground select-wrap flex justify-between items-center">
@@ -48,7 +48,7 @@
                </div>
              </div>
            </template>
            <contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-5"
            <contract-futrue v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length" class="mb-5"
              :initFutrue="initFutrue" @paraId="onParaId" />
            <div class="h-18 greyBg mb-8 flex pr-5 justify-center rounded-lg textColor items-center"
              v-if="selectIndex == 1">
@@ -66,8 +66,8 @@
              <input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none greyBg text-center textColor"
                :class="['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(queryType) ? 'full-input' : 'half-input'"
                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 : '')"
              <input v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length"
                :placeholder="($t('最少') + (initFutrue && Array.isArray(initFutrue.para) && initFutrue.para[paraIndex] ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : ''))"
                class="border-none greyBg text-center textColor"
                :class="['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(queryType) ? 'full-input' : 'half-input'"
                v-model="form.amount" type="number" @input="onInput" />
@@ -106,7 +106,7 @@
              <!-- 张数输入 -->
              <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
            </template>
            <template v-if="selectIndex == 1 && userInfo.token">
            <template v-if="selectIndex == 1 && userInfo && userInfo.token">
              <div class="flex justify-between mt-8">
                <div class="text-grey">{{ $t('合约金额') }}</div>
                <div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }}
@@ -133,8 +133,8 @@
              <div>{{ $t("可用") }}</div>
              <div class="textColor">{{ initFutrue.amount }} {{ getCurrentUnit() }}</div>
            </div>
            <div class="flex text-24 text-grey justify-between mt-5"
              v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
              <div class="flex text-24 text-grey justify-between mt-5"
              v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length">
              <div>{{ $t("手续费") }}</div>
              <div class="textColor">
                {{
@@ -149,7 +149,7 @@
              </div>
            </div>

            <template v-if="userInfo.token">
            <template v-if="userInfo && userInfo.token">
              <template v-if="selectIndex == 1">
                <div class="w-full h-20 bg-green flex text-white rounded-md mt-16 justify-center items-center"
                  v-if="currentType == 'long'" @click="throttleFn('long')">
@@ -178,7 +178,7 @@
              </template>
              <template v-if="selectIndex == 2">
                <div class="w-full h-20 bg-green flex text-white rounded-md mt-2 justify-center items-center"
                  @click="throttleFn('open')" v-if="userInfo.token">
                  @click="throttleFn('open')" v-if="userInfo && userInfo.token">
                  <div class="text-34 relative text-center" style="flex-grow: 1">
                    {{ $t("开多") }}
                    <span class="right-word text-22 text-center">{{
@@ -188,7 +188,7 @@
                </div>
                <div class="w-full h-20 bg-red flex text-white rounded-md mt-5 mb-2 justify-center items-center"
                  style="position: relative;" :class="{ 'mt-22': selectIndex == 2 }" @click="throttleFn('close')"
                  v-if="userInfo.token">
                  v-if="userInfo && userInfo.token">
                  <div class="relative text-34 text-center" style="flex-grow: 1">
                    {{ $t("开空") }}
                    <span class="right-word text-22 text-center">{{
@@ -224,26 +224,28 @@
              </div>
            </div>
            <div class="deep-div">
              <div v-if="showType == 0 || showType == 2" class="w-72 flex justify-between pt-1 text-26"
                v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
                  background:
                    `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
                    } 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) || "--" }}
              <template v-if="showType == 0 || showType == 2">
                <div class="w-72 flex justify-between pt-1 text-26" v-for="(item, index) in redData"
                  :key="item + index" @click="onQuickPrice(item.price)" :style="{
                    background:
                      `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
                      } 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="text-right textColor" v-else>
                  {{ item.amount || "--" }}
                </div>
              </div>
              </template>
            </div>
            <div class="w-72 text-red pt-1 text-34 font-bold text-center">
              {{ price || '--' }}
@@ -256,28 +258,28 @@
              }}
            </div>
            <div class="deep-div">


              <div v-if="showType == 0 || showType == 1" class="w-72 flex justify-between pt-1 text-26"
                v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
                  background:
                    `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
                    } 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) || "--" }}
              <template v-if="showType == 0 || showType == 1">
                <div class="w-72 flex justify-between pt-1 text-26" v-for="(item, index) in greenData" :key="index"
                  @click="onQuickPrice(item.price)" :style="{
                    background:
                      `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
                      } 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 class="text-right textColor" v-else>
                  {{ item.amount || "--" }}
                </div>
              </div>
              </template>
            </div>
            <div class="flex k-select-box">
              <div class="mt-2 mb-2 select-box" style="position: relative">
@@ -341,6 +343,11 @@
    [Popup.name]: Popup,
  },
  props: {
    // 非路由场景（例如嵌入到其它页面）用于指定品种类型
    queryTypeProp: {
      type: String,
      default: ''
    },
    greenData: { // 买单
      type: Array,
      default() {
@@ -452,10 +459,14 @@
      }
    },
    symbol(val) {
      // this.getHomeList(val);
      if (val) {
        this.getHomeList(val);
      }
    },
    '$route'(val) {
      this.getHomeList(val.params.symbol);
      if (val && val.params && val.params.symbol) {
        this.getHomeList(val.params.symbol);
      }
    },
    initData(val) {
      if (this.selectIndex / 1 === 1) {
@@ -538,7 +549,10 @@
    }
  },
  created() {
    if (this.$route.query.type) {
    // 优先使用外部传入的 type，其次才从路由读取
    if (this.queryTypeProp) {
      this.queryType = this.queryTypeProp
    } else if (this.$route && this.$route.query && this.$route.query.type) {
      this.queryType = this.$route.query.type
    }
  },
@@ -550,7 +564,8 @@
    this.title = this.$t('市价');
  },
  mounted() {
    this.getHomeList(this.$route.params.symbol);
    // trade/options 等页面没有 params.symbol，优先使用 props.symbol
    this.getHomeList(this.symbol || (this.$route && this.$route.params && this.$route.params.symbol));
    this.form.price = this.price
  },
  beforeUnmount() {
@@ -597,7 +612,9 @@
      this.arryIsShow = !this.arryIsShow;
    },
    getHomeList(symbol) {
      if (!symbol) return
      _getHomeList(symbol).then((res) => {
        if (!res || !res[0] || res[0].close == null) return
        let numberText = res[0].close.toString();
        let numberLength = numberText.substring(numberText.indexOf(".") + 1, numberText.length).length;
        let arry = [];
@@ -780,7 +797,7 @@
      this.order(type)
    }, 500),
    order(type) {
      if (!this.userInfo.token) {
      if (!this.userInfo || !this.userInfo.token) {
        this.$router.push('/login')
        return false;
      }
@@ -801,7 +818,7 @@


      // this.form.direction = type
      this.form.symbol = this.$route.params.symbol
      this.form.symbol = this.symbol || (this.$route && this.$route.params && this.$route.params.symbol) || ''
      // this.form.direction = type === 'open' ? 'buy' : 'sell'
      if (type == 'long' || type == 'open') {
        this.form.direction = 'buy'