From 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Wed, 15 Oct 2025 10:29:30 +0800
Subject: [PATCH] 其他人改的版本
---
src/components/Transform/perpetual-open/index.vue | 565 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 356 insertions(+), 209 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index 3604a08..7875660 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/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>
@@ -36,58 +36,176 @@
</div>
<div class="pt-30 pb-20">
<div class="flex justify-between">
- <div class="w-440 flex flex-col">
+ <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 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 greyBg textColor" @click="selectBtn">
- <img src="../../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 ml-20" />
+ <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" />
+ :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 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>
@@ -122,9 +240,34 @@
<!-- 张数输入 -->
<!-- <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 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">
@@ -145,8 +288,10 @@
</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>
@@ -157,15 +302,15 @@
<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 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 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 mt-10 " @click="order('open')"
- v-if="userInfo.token">
+ v-if="userInfo.token">
<div class="font-34 relative text-center" style="flex-grow: 1">
{{ $t("开多") }}
<!-- <span class="right-word font-22 text-center">{{
@@ -210,7 +355,7 @@
</div>
</div>
<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">
+ :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">{{
@@ -226,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>
- <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="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>
@@ -357,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: {
@@ -472,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";
});
}
}
@@ -513,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
}
@@ -538,14 +574,21 @@
},
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' }
+ {name: '0'},
+ {name: '25'},
+ {name: '50'},
+ {name: '75'},
+ {name: '100'}
],
currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
timeout2: null,
@@ -560,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: '', // 币种
@@ -580,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,
@@ -593,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('全仓'),
@@ -608,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()
@@ -622,10 +666,71 @@
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)
+ bfbclick(e) {
+ this.progressRate = e
const rate = e / 100; //如0.25
this.form.amount = this.maxUSDT * rate
var a = this.form.amount
@@ -657,9 +762,9 @@
// 获取总资产估值
getAsset() {
_getContractBySymbolType()
- .then(res => {
- this.assetObj = res
- })
+ .then(res => {
+ this.assetObj = res
+ })
},
//价格类型下拉框切换
selectBtn() {
@@ -684,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);
});
@@ -907,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);
}
@@ -925,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) { // 交割合约需要弹出详情框
@@ -955,6 +1062,41 @@
<style lang="scss">
@import "@/assets/init.scss";
+
+.progress-i {
+ flex: 1;
+ position: relative;
+ color: #aaa;
+ font-size: 0.8em;
+}
+
+.progress-in {
+ height: 2px;
+ position: relative;
+ border-radius: 90px;
+ background: #111;
+ width: 0%;
+ //transition: width 0.3s linear;
+}
+
+.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%;
@@ -1068,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;
@@ -1111,12 +1253,12 @@
}
}
- .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);
}
@@ -1149,9 +1291,12 @@
// background-color: $green;
// background: url(@/assets/image/public/open-bg.png) no-repeat right center;
// background-size: 100% 100%;
- color: white;
-
- background: #06CDA5;
+ color: white !important;
+ border-radius: 6px !important;
+ background: #24c18d !important;
+ font-size: 14px;
+ font-size: 22px !important;
+ height: 60px;
// border-radius: 5rem;
}
@@ -1159,9 +1304,11 @@
// background-color: $green;
// background: url(@/assets/image/public/close-bg.png) no-repeat left center;
// background-size: 100% 100%;
- color: white;
-
- background: #F43368;
+ color: white !important;
+ border-radius: 6px !important;
+ background: #f14b3f !important;
+ font-size: 22px !important;
+ height: 60px;
// border-radius: 5rem;
}
@@ -1201,6 +1348,6 @@
}
.deep-div {
- min-height: 370px;
+ min-height: 200px;
}
</style>
--
Gitblit v1.9.3