二三给的

李凌

2025-10-09 631dc512b226b346fefaebbedf1ddd79c06cab71

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

@@ -35,10 +35,122 @@
        </div>
      </div>
      <div class="pt-30 pb-20">
        <div class="flex">
        <div class="flex justify-between">
          <div>
            <div class="w-290 flex justify-between text-grey font-22">
              <div>
                <div>{{ $t("价格") }}</div>
                <div class="mt-4">{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
              </div>
              <div class="text-right items-end justify-end">
                <div class="">{{ $t("数量") }}</div>
                <div class="mt-4">{{ queryType === 'cryptos' ?
                    `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
              </div>
            </div>
            <div class="deep-div">
              <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1  font-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 v-show="(showType == 0 || showType == 2)" class="w-290 flex justify-between pt-1 font-26"
                   v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
                  background:
                    `linear-gradient(to right,${$store.state.vant.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>
            <div class="w-290 text-red pt-5 font-34 font-700 text-center">
              {{ price || '--' }}
            </div>
            <div class="pb-5 font-20 text-center">
              ≈ {{ ((price *
                currency.rate).toFixed(price.toString().split('.')[1] ?
                price.toString().split('.')[1].length : 2)) || '--' }}
            </div>
            <div class="deep-div">
              <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-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 v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
                   v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
                  background:
                    `linear-gradient(to right,${$store.state.vant.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_data == 'shib'">
                  {{ fixDate(item.amount, $i18n) || "--" }}
                </div>
                <div class="text-right textColor" v-else>
                  {{ item.amount || "--" }}
                </div>

              </div>
            </div>
            <div class="flex k-select-box">
              <div class=" mb-22 select-box pl-5 pr-5" 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>
                  <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
                </div>
                <div class="option-box" v-show="arryIsShow">
                  <div class="font-28" 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 ml-10" />
              </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">
              <div class="flex items-center h-66 greyBg textColor">
                <p class="font-28 flex-1 flex items-center justify-center h-66 "
                  :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
                  {{ $t("开多") }}
@@ -49,8 +161,7 @@
                </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 greyBg 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" />
@@ -64,14 +175,14 @@
            </template>
            <contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" 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">
            <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center greyBg 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 h-76" v-if="selectIndex == 2"></div>
            <div class="w-440 flex items-center greyBg h-76 lh-76 pr-5 pl-5 rounded-lg" v-if="initFutrue">
            <div class="w-440 flex items-center greyBg h-76 lh-76 pr-5 pl-5 greyBg" 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" />
@@ -123,9 +234,10 @@
              <!-- 张数输入 -->
              <!-- <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
                :propsAmount="form.amount"></amount-slider> -->
            <div class="btns_box" >
               <div :class="bfbindex==index?'btns_box_boxs':'btns_box_box'" @click="bfbclick(item,index)" v-for="(item,index) in bfblist" :key="index">{{item.name}}%</div>
            </div>
              <div class="btns_box">
                <div :class="bfbindex == index ? 'btns_box_boxs' : 'btns_box_box'" @click="bfbclick(item, index)"
                  v-for="(item, index) in bfblist" :key="index">{{ item.name }}%</div>
              </div>
            </template>
            <template v-if="selectIndex == 1 && userInfo.token">
              <div class="flex justify-between mt-30">
@@ -152,7 +264,7 @@
              </div>
            </template>

            <div class="flex font-24 text-grey justify-between mt-32" >
            <div class="flex font-24 text-grey justify-between mt-32">
              <div>{{ $t("可用USDT") }}</div>
              <div class="textColor">{{ initFutrue.amount }} USDT</div>
            </div>
@@ -174,33 +286,33 @@

            <template v-if="userInfo.token">
              <template v-if="selectIndex == 1">
                <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-70" v-if="currentType == 'long'"
                <div class=" flex-center text-white " style="margin-top: 10px" v-if="currentType == 'long'"
                  @click="order('long')">
                  <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  <div class="long flex-center" style="flex-grow:1;padding: 20px" v-if="selectIndex == 1">
                    {{ $t('开多') }}
                    <!-- <span class="right-word font-22 text-center">{{
                      $t("看涨")
                      }}</span> -->
                  </div>
                  <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
                  <div  class="long flex-center" style="flex-grow:1;padding: 20px"  v-else>
                    {{ $t('做多买入') }}
                  </div>
                </div>
                <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-70" v-if="currentType == 'short'"
                <div class="flex-center text-white " v-if="currentType == 'short'"
                  @click="order('short')">
                  <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  <div class="short flex-center" style="flex-grow:1;padding: 20px"  v-if="selectIndex == 1">
                    {{ $t('开空') }}
                    <!-- <span class="right-word font-22 text-center">{{
                      $t("看跌")
                      }}</span> -->
                  </div>
                  <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
                  <div class="short flex-center" style="flex-grow:1;padding: 20px"  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-ban mt-10 " @click="order('open')"
                <div class="w-full h-80 lh-80 bg-green flex text-white mt-10 " @click="order('open')"
                  v-if="userInfo.token">
                  <div class="font-34 relative text-center" style="flex-grow: 1">
                    {{ $t("开多") }}
@@ -209,9 +321,8 @@
                      }}</span> -->
                  </div>
                </div>
                <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban 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 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">{{
@@ -231,118 +342,7 @@
                {{ $t('logIn') }}</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">{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
              </div>
              <div class="text-right items-end justify-end">
                <div class="">{{ $t("数量") }}</div>
                <div class="mt-4">{{ queryType === 'cryptos' ?
                  `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
              </div>
            </div>
            <div class="deep-div">
              <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1  font-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 v-show="(showType == 0 || showType == 2) " class="w-290 flex justify-between pt-1 font-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>
            <div class="w-290 text-red pt-5 font-34 font-700 text-center">
              {{ price || '--' }}
            </div>
            <div class="pb-5 font-20 text-center">
              ≈ {{ ((price *
                currency.rate).toFixed(price.toString().split('.')[1] ?
                  price.toString().split('.')[1].length : 2)) || '--' }}
            </div>
            <div class="deep-div">
              <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-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 v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-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_data == 'shib'">
                  {{ fixDate(item.amount, $i18n) || "--" }}
                </div>
                <div class="text-right textColor" v-else>
                  {{ item.amount || "--" }}
                </div>

              </div>
            </div>
            <div class="flex k-select-box">
              <div class="mt-22 mb-22 select-box pl-5 pr-5" 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>
                  <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
                </div>
                <div class="option-box" v-show="arryIsShow">
                  <div class="font-28" 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 ml-10" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model:show="show" class="rounded-2xl">
@@ -541,13 +541,13 @@
    return {
      THEME,
      fixDate,
     bfbindex:null,
     bfblist:[
        {name:'25'},
        {name:'50'},
        {name:'75'},
        {name:'100'}
     ],
      bfbindex: null,
      bfblist: [
        { name: '25' },
        { name: '50' },
        { name: '75' },
        { name: '100' }
      ],
      currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
      timeout2: null,
      timeout: null,
@@ -624,14 +624,14 @@
  },
  methods: {
    reserve,
   bfbclick(e,i){
      this.bfbindex = i
      e = parseInt(e.name)
      const rate = e / 100; //如0.25
      this.form.amount = this.maxUSDT * rate
      var a = this.form.amount
      this.form.amount = Math.floor(a*100)/100
   },
    bfbclick(e, i) {
      this.bfbindex = i
      e = parseInt(e.name)
      const rate = e / 100; //如0.25
      this.form.amount = this.maxUSDT * rate
      var a = this.form.amount
      this.form.amount = Math.floor(a * 100) / 100
    },
    //获取张数
    getAmount(val) {
      if (!val) {
@@ -956,24 +956,28 @@

<style lang="scss">
@import "@/assets/init.scss";
.btns_box_boxs{
   width: 23%;
   border: 1px solid #F7B600;
   text-align: center;
   border-radius: 10px;
   color: #F7B600;

.btns_box_boxs {
  width: 23%;
  border: 1px solid #F7B600;
  text-align: center;
  border-radius: 10px;
  color: #F7B600;
}
.btns_box_box{
   width: 23%;
   border: 1px solid #cbcbcb;
   text-align: center;
   border-radius: 10px;

.btns_box_box {
  width: 23%;
  border: 1px solid #cbcbcb;
  text-align: center;
  border-radius: 10px;
}
.btns_box{
   display: flex;
   justify-content: space-between;
   align-items: center;

.btns_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cryptos {
  .perpetual-open {
    font-size: 26px;
@@ -1094,13 +1098,18 @@
    right: 0;
    top: 90px;
    width: 100%;
    background-color: $grey_bg;
    // background-color: $grey_bg;
    text-align: center;
    box-shadow: 0px 0px 3px 3px $grey_bg;
    // box-shadow: 0px 0px 3px 3px $grey_bg;
    border-radius: 4px;
    color: $text-color;
    // color: $text-color;
    z-index: 10;

    @include themify() {
      background: themed("input_background");
      color: themed("text_color");
      box-shadow: 0px 0px 3px 3px themed("input_background");
    }
  }

  .option-box>div {
@@ -1138,17 +1147,28 @@
  }

  .long {
    background-color: $green;
    background: url(@/assets/image/public/open-bg.png) no-repeat right center;
    background-size: 100% 100%;
    // background-color: $green;
    // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
    // background-size: 100% 100%;
    color: white;
    border-radius: 6px;
    background: #24c18d;
    font-size: 14px;
    font-size: 19px;
    height: 60px;
    // border-radius: 5rem;
  }

  .short {
    background-color: $green;
    background: url(@/assets/image/public/close-bg.png) no-repeat left center;
    background-size: 100% 100%;
    // background-color: $green;
    // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
    // background-size: 100% 100%;
    color: white;
    border-radius: 6px;
    background: #f14b3f;
    font-size: 19px;
    height: 60px;
    // border-radius: 5rem;
  }

  .van-action-sheet__content {
@@ -1176,14 +1196,17 @@

  .select-box {
    width: 220px;
    border-radius: 2.5rem;
    background: #1E1E1E;

    // border-radius: 2.5rem;
    // background: #1E1E1E;
    margin-right: 20px;

    @include themify() {
      background: themed("input_background");
    }
  }
}

.deep-div {
  min-height: 370px;
  min-height: 200px;
}
</style>