其他人改的版本

李凌

2025-10-15 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65

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

@@ -6,13 +6,13 @@

        <div class="w-180 h-60 lh-60 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
          <div @click="locationShow = !locationShow" style="height:100%; box-sizing: border-box"
            class="relative word-30 pl-28 pr-10 w-180 h-60 tabBackground select-wrap flex justify-between items-center">
               class="relative word-30 pl-28 pr-10 w-180 h-60 tabBackground select-wrap flex justify-between items-center">
            {{ locationTitle }}
            <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
            <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11"/>
            <div v-if="locationShow" class="options tabBackground w-180 absolute top-97 left-0 z-10">
              <div class="w-full" @click.stop="locationSelect(item)"
                :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
                v-for="item in locationList" :key="item.type">
                   :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
                   v-for="item in locationList" :key="item.type">
                {{ item.title }}
              </div>
            </div>
@@ -21,13 +21,13 @@

        <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 tabBackground select-wrap flex justify-between items-center">
               class="relative word-30 pl-28 pr-10 w-140 h-60 tabBackground 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" />
                                        class="w-22 h-11"/>
            <div v-if="showOptions" class="options tabBackground 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">
                   :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>
@@ -35,60 +35,177 @@
        </div>
      </div>
      <div class="pt-30 pb-20">
        <div class="flex">
          <div class="w-440 flex flex-col">
        <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 style="margin-left: 20px" 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')">
                   :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')">
                   :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
                  {{ $t("开空") }}
                </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">
                  <img src="../../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 ml-20" />
                <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" />
                  <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20"/>
                </div>
                <div class="option-box" v-show="isShow">
                  <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{
                    item.title
                  }}</div>
                      item.title
                    }}
                  </div>
                </div>
              </div>
            </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">
                             :initFutrue="initFutrue" @paraId="onParaId"/>
            <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" />
                     :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" />
                   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 v-if="selectIndex == 1" placeholder="USDT" class="border-none greyBg text-center textColor"
                style="width: 17rem;border-radius: 5rem;" v-model="form.amount" type="number" @input="onInput" />
                     style="width: 17rem;border-radius: 5rem;" 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 : '')"
                class="border-none greyBg text-center textColor" style="width: 17rem;border-radius: 5rem;"
                v-model="form.amount" type="number" @input="onInput" />
                     :placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
                     class="border-none greyBg text-center textColor" style="width: 17rem;border-radius: 5rem;"
                     v-model="form.amount" type="number" @input="onInput"/>

              <div v-else class="flex-1"></div>

              <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">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
@@ -123,9 +240,35 @@
              <!-- 张数输入 -->
              <!-- <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>-->
              <div style="margin: 0 10px">
                <div @click="handleClick"
                     @touchstart="handleTouchStart"
                     @touchmove="handleTouchMove"
                     @touchend="handleTouchEnd"   style="width: 100%;height:20px;position: relative" class="flex-centerY progress-bar">
                  <div
                      style="position: absolute;left: 0;width: 100%;height:2px;margin-top: 1px;border-radius: 90px;background: #f1f1f1">
                    <div class="progress-in flex flex-position-end-to-start" :style="{width:progressRate+'%'}" >
                      <div class="progress-icon"></div>
                    </div>
                  </div>
                  <div v-for="(item, index) in bfblist" class="progress-i flex"
                       :style="{flex:index==bfblist.length-1?0:1}"
                       :class="{'flex-position-end-to-start':index==bfblist.length-1}">
                    <div class="progress-icon1" @click.stop="bfbclick(parseInt(item.name))" ></div>
                  </div>
                </div>
                <div style="width: 100%;position: relative;margin-top: 10px" class="flex-centerY">
                  <div v-for="(item, index) in bfblist" @click="bfbclick(parseInt(item.name))" class="progress-i flex"
                       :style="{flex:index==bfblist.length-1?0:1}"
                       :class="{'flex-position-end-to-start':index==bfblist.length-1}">
                    {{ item.name }}%
                  </div>
                </div>
              </div>
            </template>
            <template v-if="selectIndex == 1 && userInfo.token">
              <div class="flex justify-between mt-30">
@@ -145,27 +288,29 @@
              </div> -->
              <div class="flex justify-between mt-30">
                <div class="text-grey">{{ $t("建仓手续费") }}</div>
                <div class="textColor">{{ reserve(userInfo.perpetual_contracts_status === '1' ?
                  initData.fee * (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate, 6) }}
                <div class="textColor">{{
                    reserve(userInfo.perpetual_contracts_status === '1' ?
                        initData.fee * (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate, 6)
                  }}
                  {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
                </div>
              </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>
            <div class="flex font-24 text-grey justify-between mt-20"
              v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
                 v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
              <div>{{ $t("手续费") }}</div>
              <div class="textColor">
                {{
                  (
                    form.amount *
                    (initFutrue && initFutrue.para
                      ? initData.para[paraIndex].unit_fee
                      : "")
                      form.amount *
                      (initFutrue && initFutrue.para
                          ? initData.para[paraIndex].unit_fee
                          : "")
                  ).toFixed(2)
                }}
                {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
@@ -174,34 +319,34 @@

            <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'"
                  @click="order('long')">
                  <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                <div class=" flex-center text-white " style="margin-top: 10px" v-if="currentType == 'long'"
                     @click="order('long')">
                  <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'"
                  @click="order('short')">
                  <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                <div class="flex-center text-white " v-if="currentType == 'short'"
                     @click="order('short')">
                  <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')"
                  v-if="userInfo.token">
                <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("开多") }}
                    <!-- <span class="right-word font-22 text-center">{{
@@ -209,9 +354,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">{{
@@ -227,130 +371,20 @@
                <p class="pt-8">{{ $t('登陆后继续') }}</p>
              </div>
              <div class="h-80 lh-80 btnBackground flex text-white rounded-ban justify-center mt-50"
                @click="$router.push('/login')">
                {{ $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" />
                   @click="$router.push('/login')">
                {{ $t('logIn') }}
              </div>
            </div>
          </div>

        </div>
      </div>
      <van-popup v-model:show="show" class="rounded-2xl">
        <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
          @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
                        @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price"/>
      </van-popup>
      <van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
        close-on-click-action @cancel="onCancel">
                        close-on-click-action @cancel="onCancel">
      </van-action-sheet>
    </div>
  </div>
@@ -358,20 +392,21 @@

<script>
import config from "@/config";
import { Popup, showToast } from 'vant';
import { mapGetters } from 'vuex'
import {Popup, showToast} from 'vant';
import {mapGetters} from 'vuex'
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.js'
import 'vue-slider-component/theme/default.css'
import { _orderOpen, _futrueOrder, _futrueOrderDetail, _getBalance, _futrueOrderInit } from '@/service/trade.api'
import {_orderOpen, _futrueOrder, _futrueOrderDetail, _getBalance, _futrueOrderInit} from '@/service/trade.api'
import ContractFutrue from '@/components/Transform/contract-futrue/index.vue'
import PopupDelivery from "@/components/Transform/popup-delivery/index.vue";
import { fixDate } from "@/utils/index.js";
import { THEME } from '@/config/theme'
import {fixDate} from "@/utils/index.js";
import {THEME} from '@/config/theme'
import AmountSlider from "./amountSlider.vue";
import "vue-slider-component/theme/default.css";
import { _getHomeList } from "@/service/home.api";
import { _getContractBySymbolType } from "@/service/etf.api";
import { reserve } from "@/utils/utis";
import {_getHomeList} from "@/service/home.api";
import {_getContractBySymbolType} from "@/service/etf.api";
import {reserve} from "@/utils/utis";

export default {
  name: "perpetualPosition",
  components: {
@@ -473,21 +508,21 @@
        if (this.dataArrValue == -2) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
                item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
                item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
        }
        if (this.dataArrValue == -3) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
                item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
                item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
        }
      }
@@ -514,7 +549,7 @@

        obj = this.initOpen
        if (!obj.lever || !obj.lever.length) { // 倍数
          obj.lever = [{ id: 1, lever_rate: 1 }]
          obj.lever = [{id: 1, lever_rate: 1}]
        }
        return obj
      }
@@ -539,15 +574,22 @@
  },
  data() {
    return {
      progressRate:0,
      progress: 30, // 初始进度
      isDragging: false, // 是否正在拖动
      barWidth: 0, // 进度条宽度
      startX: 0, // 触摸开始的X坐标
      startProgress: 0, // 触摸开始时的进度
      THEME,
      fixDate,
     bfbindex:null,
     bfblist:[
        {name:'25'},
        {name:'50'},
        {name:'75'},
        {name:'100'}
     ],
      bfbindex: null,
      bfblist: [
        {name: '0'},
        {name: '25'},
        {name: '50'},
        {name: '75'},
        {name: '100'}
      ],
      currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
      timeout2: null,
      timeout: null,
@@ -561,8 +603,8 @@
      title: this.$t('市价'),
      paraIndex: 0,
      selectData: [
        { title: this.$t('市价'), type: '1' },
        { title: this.$t('限价'), type: '2' },
        {title: this.$t('市价'), type: '1'},
        {title: this.$t('限价'), type: '2'},
      ],
      form: {
        symbol: '', // 币种
@@ -581,9 +623,9 @@
      selectDataArry: [],
      isSelectShow: false,
      actions: [
        { name: this.$t("默认"), value: 0, className: 'actions-active' },
        { name: this.$t("展示买单"), value: 1, className: '' },
        { name: this.$t("展示卖单"), value: 2, className: '' },
        {name: this.$t("默认"), value: 0, className: 'actions-active'},
        {name: this.$t("展示买单"), value: 1, className: ''},
        {name: this.$t("展示卖单"), value: 2, className: ''},
      ],
      showType: 0,
      dataArrTitle: 0,
@@ -594,8 +636,8 @@
      queryType: 'cryptos',
      assetObj: {}, // 总资产估值数据对象
      locationList: [
        { title: this.$t('逐仓'), type: 0 },
        { title: this.$t('全仓'), type: 1 },
        {title: this.$t('逐仓'), type: 0},
        {title: this.$t('全仓'), type: 1},
      ],
      locationShow: false,
      locationTitle: this.$t('全仓'),
@@ -609,12 +651,13 @@
  },
  activated() {
    this.selectData = [
      { title: this.$t('市价'), type: '1' },
      { title: this.$t('限价'), type: '2' },
      {title: this.$t('市价'), type: '1'},
      {title: this.$t('限价'), type: '2'},
    ]
    this.title = this.$t('市价');
  },
  mounted() {
    this.barWidth = document.querySelector('.progress-bar').offsetWidth;
    this.getHomeList(this.$route.params.symbol);
    this.form.price = this.price
    this.getAsset()
@@ -623,15 +666,76 @@
    this.clearTimeout()
  },
  methods: {
    mousedown(event){
      // this.bfbclick(event.touches[0].)
      const x1=event.touches[0].pageX
      const x2=event.touches[0].clientX
      console.log(event.touches[0])
    } ,
    mousemove(event){
      console.log(event.touches[0])
    },
    // 处理点击事件
    handleClick(e) {
      if (this.isDragging) return;

      // 获取进度条的位置信息
      const barRect = document.querySelector('.progress-bar').getBoundingClientRect();
      // 计算点击位置相对于进度条的百分比
      const clickPosition = e.clientX - barRect.left;
      const newProgress = (clickPosition / barRect.width) * 100;

      // 更新进度，限制在0-100之间
      this.updateProgress(newProgress);
    },

    // 处理触摸开始事件
    handleTouchStart(e) {
      this.isDragging = true;
      const barRect = document.querySelector('.progress-bar').getBoundingClientRect();
      this.barWidth = barRect.width;
      this.startX = e.touches[0].clientX;
      this.startProgress = this.progressRate;
    },

    // 处理触摸移动事件
    handleTouchMove(e) {
      if (!this.isDragging) return;

      // 计算移动的距离
      const currentX = e.touches[0].clientX;
      const diffX = currentX - this.startX;

      // 根据移动距离计算新进度
      const percentageChange = (diffX / this.barWidth) * 100;
      const newProgress = this.startProgress + percentageChange;

      // 更新进度，限制在0-100之间
      this.updateProgress(newProgress);
    },

    // 处理触摸结束事件
    handleTouchEnd(e) {
      this.isDragging = false;
    },

    // 更新进度的通用方法
    updateProgress(value) {
      // 限制进度在0-100之间
      const clampedValue = Math.max(0, Math.min(100, value));
      this.bfbclick(clampedValue)

      // 可以在这里添加进度变化的回调逻辑
      // this.$emit('progress-change', this.progress);
    },
    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) {
      this.progressRate = e
      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) {
@@ -658,9 +762,9 @@
    // 获取总资产估值
    getAsset() {
      _getContractBySymbolType()
        .then(res => {
          this.assetObj = res
        })
          .then(res => {
            this.assetObj = res
          })
    },
    //价格类型下拉框切换
    selectBtn() {
@@ -685,7 +789,7 @@
          let obj = {
            name: item + "1",
            value:
              item.substring(item.indexOf(".") + 1, item.length).length + 1,
                item.substring(item.indexOf(".") + 1, item.length).length + 1,
          };
          newArry.push(obj);
        });
@@ -908,11 +1012,13 @@
            this.form.session_token = data.session_token;
            this.openOrder(_order, emitFunc);
          }).catch((err) => {
            if (err.code == 'ECONNABORTED') { showToast(this.$t('网络超时！')); }
            else if (err.msg != undefined) { showToast(this.$t(err.msg)); }
            if (err.code == 'ECONNABORTED') {
              showToast(this.$t('网络超时！'));
            } else if (err.msg != undefined) {
              showToast(this.$t(err.msg));
            }
          });
        }
        else {
        } else {
          this.form.session_token = this.initFutrue.session_token;
          this.openOrder(_order, emitFunc);
        }
@@ -926,7 +1032,7 @@
        }
        this.$emit('ordered', emitFunc)
        _getBalance().then(data => { // 刷新余额
          this.$store.commit('user/SET_USERINFO', { balance: data.money })
          this.$store.commit('user/SET_USERINFO', {balance: data.money})
        })

        if (this.selectIndex / 1 === 2) { // 交割合约需要弹出详情框
@@ -956,24 +1062,63 @@

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

.progress-i {
  flex: 1;
  position: relative;
  color: #aaa;
  font-size: 0.8em;
}
.btns_box_box{
   width: 23%;
   border: 1px solid #cbcbcb;
   text-align: center;
   border-radius: 10px;

.progress-in {
  height: 2px;
  position: relative;
  border-radius: 90px;
  background: #111;
  width: 0%;
  //transition: width 0.3s linear;
}
.btns_box{
   display: flex;
   justify-content: space-between;
   align-items: center;

.progress-icon {
  width: 34px;
  height: 35px;
  border-radius: 90px;
  position: absolute;
  background: white;
  right:-18px;
  z-index: 99;
  top:-16px;
  border: #111 6px solid;
}

.progress-icon1 {
  width: 14px;
  height: 15px;
  border-radius: 90px;
  background: #111;
}

.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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cryptos {
  .perpetual-open {
    font-size: 26px;
@@ -1065,16 +1210,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;
@@ -1094,21 +1239,26 @@
    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 {
  .option-box > div {
    padding: 10px 0;

  }

  .option-box>div:hover {
  .option-box > div:hover {
    background-color: rgba($color: $bg_yellow, $alpha: 0.6);
  }

@@ -1138,17 +1288,28 @@
  }

  .long {
    background-color: $green;
    background: url(@/assets/image/public/open-bg.png) no-repeat right center;
    background-size: 100% 100%;
    color: white;
    // background-color: $green;
    // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
    // background-size: 100% 100%;
    color: white !important;
    border-radius: 6px !important;
    background: #24c18d !important;
    font-size: 14px;
    font-size: 22px !important;
    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%;
    color: white;
    // background-color: $green;
    // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
    // background-size: 100% 100%;
    color: white !important;
    border-radius: 6px !important;
    background: #f14b3f !important;
    font-size: 22px !important;
    height: 60px;
    // border-radius: 5rem;
  }

  .van-action-sheet__content {
@@ -1176,14 +1337,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>