From bbf6d337c9641c0d1bf2c57f05310e59c104990b Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 29 May 2026 15:04:43 +0800
Subject: [PATCH] 1
---
src/components/Transform/perpetual-open/index.vue | 770 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 549 insertions(+), 221 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index efa2a75..160f4f6 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -2,51 +2,160 @@
<!-- 永续合约开仓页 -->
<div id="cryptos">
<div class="perpetual-open">
- <div class="flex pt-34 ">
-
- <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">
- {{ locationTitle }}
- <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">
- {{ item.title }}
- </div>
- </div>
- </div>
+ <div class="trade-top-selectors" v-if="selectIndex / 1 === 1">
+ <div class="trade-selector trade-selector--buy relative" @click="openLeverPopup">
+ <span class="trade-selector-tag trade-selector-tag--green">{{ $t('买入') }}</span>
+ <span class="trade-selector-text">{{ leverDisplayMode }} {{ form.lever_rate }}X</span>
+ <van-icon name="arrow-down" class="trade-selector-arrow" />
</div>
-
- <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">
- {{ form.lever_rate }}x <img src="../../../assets/image/public/grey-select.png" alt="select-icon"
- 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">
- {{ item.lever_rate }}x
- </div>
- </div>
- </div>
+ <div class="trade-selector trade-selector--sell relative" @click="openLeverPopup">
+ <span class="trade-selector-tag trade-selector-tag--red">{{ $t('卖出') }}</span>
+ <span class="trade-selector-text">{{ leverDisplayMode }} {{ form.lever_rate }}X</span>
+ <van-icon name="arrow-down" class="trade-selector-arrow" />
</div>
</div>
<div class="pt-30 pb-20">
<div class="flex">
- <div class="w-440 flex flex-col">
+ <div class="mr-30">
+ <div class="w-290 flex justify-between text-grey font-22">
+ <div>
+ <div>{{ $t("价格") }}{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
+ </div>
+ <div class="text-right items-end justify-end">
+ <div class="">{{ $t("数量") }}{{ 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 p-2 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" style="padding-right: 5px;" v-else>
+ {{ item.amount || "--" }}
+ </div>
+ </div>
+ </div>
+ <div class="depth-mark-price">
+ {{ price || '--' }} {{ $t('标记价格') }}
+ </div>
+ <div class="w-290 text-red pt-5 font-34 font-700 trade-price-hidden">
+ {{ 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 p-2 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 style="padding-right: 5px;">
+ {{ 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">
+ <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 perpetual-open-form">
<template v-if="selectIndex == 1">
- <div class="flex items-center h-66 rounded-lg text-grey">
- <p class="font-28 flex-1 flex items-center justify-center h-66 "
- :class="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')">
- {{ $t("开空") }}
- </p>
+ <!-- <div class="order-area_tabs">
+ <div class="order-tabs-buttons">
+ <p class="order-tab order-tab--left font-28 flex items-center justify-center"
+ :class="currentType == 'long' ? 'order-tab--buy' : 'order-tab-buy'" @click="changeTab('long')">
+ {{ $t("开仓") }}
+ </p>
+ <p class="order-tab order-tab--right font-28 flex items-center justify-center"
+ :class="currentType == 'short' ? 'order-tab--sell' : 'order-tab-sell'" @click="changeTab('short')">
+ {{ $t("平仓") }}
+ </p>
+ </div>
+ <div class="order-tabs-bg">
+ <img src="@/assets/imgs/new/contract-slash.png" alt="" class="order-tabs-bg-img" />
+ </div>
+ </div> -->
+ <div class="trade-futures-bonus flex flex-col mt-20 mb-20">
+ <div class="flex items-center justify-between font-26 textColor">
+ <div class="flex items-center">
+ <van-icon name="success" color="#5e2bc8" size="18" class="mr-10" />
+ {{ $t('永续') }}: {{ (initFutrue.amount || 0) }} USDT
+ </div>
+ <img src="@/assets/image/asset-function3.png" alt="" class="trade-futures-transfer-icon w-60 h-60" @click="$router.push('/my/transfer')" />
+ </div>
+ <div class="flex items-center font-26 text-grey mt-12 pl-50">
+ {{ $t('Bonus') }}: {{initFutrue.capitaltAmount || 0}} USDT
+ </div>
</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"
@@ -121,41 +230,40 @@
<span class="flex-1 text-right">100%</span>
</div> -->
<!-- 张数输入 -->
- <!-- <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>
+ <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> -->
</template>
<template v-if="selectIndex == 1 && userInfo.token">
- <div class="flex justify-between mt-30">
+ <!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t('合约金额') }}</div>
<div class="textColor">
- <!-- {{ initData.amount * (form.amount / 1) * form.lever_rate }} -->
{{ form.lever_rate * form.amount }}
- <!-- <span>{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span> -->
<span>{{ 'USDT' }}</span>
</div>
- </div>
+ </div> -->
<!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("保证金") }}</div>
<div class="textColor">
{{ form.lever_rate * form.amount }} {{ 'USDT' }}
</div>
</div> -->
- <div class="flex justify-between mt-30">
+ <!-- <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) }}
{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
</div>
- </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> -->
<div class="flex font-24 text-grey justify-between mt-20"
v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
<div>{{ $t("手续费") }}</div>
@@ -174,29 +282,29 @@
<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">
- {{ $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>
- {{ $t('做多买入') }}
- </div>
+ <div class="trade-long-margin flex justify-between mt-30 font-26 text-grey">
+ <span class="textColor">{{ $t('buy') }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
</div>
- <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-70" v-if="currentType == 'short'"
+ <div class="trade-long-margin flex justify-between font-26 text-grey">
+ <span class="textColor">{{ $t("保证金") }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-20 trade-btn-buy"
+ @click="order('long')">
+ <div class="font-34 relative text-center" style="flex-grow:1;">{{ $t('开多') }}</div>
+ </div>
+ <div class="trade-long-margin flex justify-between mt-30 font-26 text-grey">
+ <span class="textColor">{{ $t('sell') }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="trade-long-margin flex justify-between font-26 text-grey">
+ <span class="textColor">{{ $t("保证金") }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-20 trade-btn-sell"
@click="order('short')">
- <div class="relative font-34 text-center" style="flex-grow:1;" 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>
- {{ $t('做空买入') }}
- </div>
+ <div class="relative font-34 text-center" style="flex-grow:1;">{{ $t('开空') }}</div>
</div>
</template>
<template v-if="selectIndex == 2">
@@ -231,118 +339,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">
@@ -352,6 +349,28 @@
<van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
close-on-click-action @cancel="onCancel">
</van-action-sheet>
+
+ <!-- 杠杆倍数弹框 Multi multiple 一比一样式 -->
+ <van-popup v-model:show="showLeverPopup" position="bottom" round class="lever-popup-wrap"
+ :style="{ overflow: 'visible' }" @closed="onLeverPopupClosed">
+ <div class="lever-popup">
+ <div class="lever-popup-header">
+ <span class="lever-popup-title">Multi multiple</span>
+ <span class="lever-popup-close" @click="showLeverPopup = false">×</span>
+ </div>
+ <div class="lever-popup-segment">
+ <div class="lever-popup-seg-item lever-popup-seg-left" :class="{ 'lever-popup-seg-active': leverPopupMargin === 1 }"
+ @click="leverPopupMargin = 1">Cross</div>
+ <div class="lever-popup-seg-item lever-popup-seg-right" :class="{ 'lever-popup-seg-active': leverPopupMargin === 0 }"
+ @click="leverPopupMargin = 0">Part</div>
+ </div>
+ <div class="lever-popup-presets">
+ <div v-for="lv in leverPresetList" :key="lv" class="lever-popup-preset-item"
+ :class="{ 'lever-popup-preset-active': leverPopupValue === lv }" @click="leverPopupValue = lv">{{ lv }}X</div>
+ </div>
+ <div class="lever-popup-confirm" @click="confirmLeverPopup">Confirm</div>
+ </div>
+ </van-popup>
</div>
</div>
</template>
@@ -513,8 +532,8 @@
if (this.selectIndex / 1 === 1) {
obj = this.initOpen
- if (!obj.lever || !obj.lever.length) { // 倍数
- obj.lever = [{ id: 1, lever_rate: 1 }]
+ if (!obj.lever || !obj.lever.length) { // 倍数，默认100倍
+ obj.lever = [{ id: 1, lever_rate: 100 }]
}
return obj
}
@@ -535,19 +554,25 @@
// console.log("dddddd", max, this.form.lever_rate, (1 / this.form.lever_rate + this.initData.fee));
return max
- }
+ },
+ maxLever() {
+ return Math.max(...this.leverPresetList)
+ },
+ leverDisplayMode() {
+ return this.locationVal === 1 ? 'Cross' : 'Part'
+ },
},
data() {
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,
@@ -569,7 +594,7 @@
session_token: '',
direction: 'buy', // 买or卖
price_type: 'opponent', // 市价or限价
- lever_rate: 1, // 杠杆
+ lever_rate: 100, // 杠杆，默认100倍
price: '',
amount: '', // 数量
para_id: '' // 交割周琦id
@@ -600,6 +625,10 @@
locationShow: false,
locationTitle: this.$t('全仓'),
locationVal: 1,
+ showLeverPopup: false,
+ leverPresetList: [30, 50, 100, 200, 300],
+ leverPopupValue: 100,
+ leverPopupMargin: 1, // 1=全仓 Cross, 0=逐仓 Part
}
},
created() {
@@ -624,14 +653,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) {
@@ -778,7 +807,7 @@
},
handleChoose(item) {
this.showOptions = !this.showOptions
- this.form.lever_rate = item.lever_rate
+ this.form.lever_rate = this.snapLeverToPreset(item.lever_rate)
console.log('handleChoose')
this.handleInitSliderOption()
},
@@ -833,6 +862,39 @@
this.locationTitle = item.title;
this.locationVal = item.type;
this.locationShow = false;
+ },
+ openLeverPopup() {
+ this.leverPopupValue = this.snapLeverToPreset(this.form.lever_rate);
+ this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
+ this.showLeverPopup = true;
+ },
+ snapLeverToPreset(v) {
+ const list = this.leverPresetList;
+ const n = parseInt(v, 10);
+ if (isNaN(n) || n <= 0) return 100;
+ if (list.includes(n)) return n;
+ let best = list[0];
+ let bestD = Infinity;
+ for (const x of list) {
+ const d = Math.abs(x - n);
+ if (d < bestD || (d === bestD && x < best)) {
+ bestD = d;
+ best = x;
+ }
+ }
+ return best;
+ },
+ onLeverPopupClosed() {
+ this.leverPopupValue = this.snapLeverToPreset(this.form.lever_rate);
+ this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
+ },
+ confirmLeverPopup() {
+ const val = this.snapLeverToPreset(this.leverPopupValue);
+ this.form.lever_rate = val;
+ this.locationVal = this.leverPopupMargin;
+ this.locationTitle = this.leverPopupMargin === 1 ? this.$t('全仓') : this.$t('逐仓');
+ this.showLeverPopup = false;
+ this.handleInitSliderOption();
},
//选择开仓类型
changeTab(type) {
@@ -956,24 +1018,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;
@@ -1156,7 +1222,10 @@
.van-action-sheet__item {
background: transparent !important;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
@@ -1183,7 +1252,266 @@
}
}
+/* trade-top-selectors 按参考图：浅灰容器、白底细边框、Buy绿/Sell红标签、深色文案、灰箭头 */
+.trade-top-selectors {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ padding: 14px 18px;
+ border-radius: 12px;
+}
+.trade-top-selectors .trade-selector {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ background: #fff;
+ border-radius: 10px;
+ cursor: pointer;
+ min-height: 72px;
+}
+.trade-top-selectors .trade-selector-tag {
+ padding: 8px 20px;
+ border-radius: 6px;
+ font-size: 26px;
+ font-weight: 700;
+ color: #fff;
+ margin-right: 16px;
+ flex-shrink: 0;
+}
+.trade-top-selectors .trade-selector-tag--green {
+ background: #0ecb81;
+}
+.trade-top-selectors .trade-selector-tag--red {
+ background: #f6465d;
+}
+.trade-top-selectors .trade-selector-text {
+ flex: 1;
+ font-size: 28px;
+ font-weight: 500;
+ color: #1e1e1e;
+ min-width: 0;
+}
+.trade-top-selectors .trade-selector-arrow {
+ font-size: 28px;
+ color: #999;
+ flex-shrink: 0;
+ margin-left: 8px;
+}
+
+.perpetual-open-form > div,
+.perpetual-open-form > .order-area_tabs,
+.perpetual-open-form > .trade-futures-bonus,
+.perpetual-open-form .trade-long-margin {
+ margin-bottom: 10px !important;
+}
+.perpetual-open-form .mt-20,
+.perpetual-open-form .mb-20,
+.perpetual-open-form .mb-30,
+.perpetual-open-form .mt-30,
+.perpetual-open-form .mt-40 {
+ margin-top: 0 !important;
+ margin-bottom: 10px !important;
+}
+/* perpetual-open-form 下圆角统一 10px */
+.perpetual-open-form .rounded-lg,
+.perpetual-open-form .rounded-ban,
+.perpetual-open-form .option-box {
+ border-radius: 10px !important;
+}
+.perpetual-open-form .order-area_tabs {
+ border-radius: 10px 10px 0 0 !important;
+}
+.perpetual-open-form .order-area_tabs .order-tab--left {
+ border-radius: 10px 0 0 0 !important;
+}
+.perpetual-open-form .order-area_tabs .order-tab--right {
+ border-radius: 0 10px 0 0 !important;
+}
+
.deep-div {
min-height: 370px;
}
+
+.depth-mark-price {
+ padding: 8px 0;
+ font-size: 18px;
+ color: #999;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #eee;
+}
+
+.trade-price-hidden {
+ display: none;
+}
+
+/* 与 /cryptos/trade/btcusdt order-area_tabs 样式一致 */
+.order-area_tabs {
+ position: relative;
+ height: 66px;
+ border-radius: 8px 8px 0 0;
+ overflow: hidden;
+}
+.order-area_tabs .order-tabs-buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 0;
+}
+.order-area_tabs .order-tab {
+ flex: 0 0 calc(50%);
+ width: calc(50%);
+ font-weight: 500;
+ transition: background 0.2s, color 0.2s;
+ cursor: pointer;
+}
+.order-area_tabs .order-tab--left {
+ border-radius: 8px 0 0 0;
+}
+.order-area_tabs .order-tab--right {
+ border-radius: 0 8px 0 0;
+}
+.order-area_tabs .order-tab--buy {
+ background: #38c172;
+ color: #fff;
+}
+.order-area_tabs .order-tab-buy {
+ background: #e8e8e8;
+ color: #000;
+}
+.order-area_tabs .order-tab--sell {
+ background: #f4374b;
+ color: #fff;
+}
+.order-area_tabs .order-tab-sell {
+ background: #e8e8e8;
+ color: #000;
+}
+.order-area_tabs .order-tabs-bg {
+ position: absolute;
+ left: 49.3%;
+ transform: translateX(-50%);
+ width: 90px;
+ height: 130%;
+ top: -5px;
+ bottom: 0;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.order-area_tabs .order-tabs-bg-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+/* 杠杆弹框 Multi multiple（弹框内字体大一倍） */
+.lever-popup-wrap.van-popup {
+ background: transparent;
+}
+.lever-popup {
+ background: #fff;
+ border-radius: 24px 24px 0 0;
+ padding: 30px 36px 12px;
+ box-shadow: 0 -2px 30px rgba(0,0,0,0.08);
+}
+.lever-popup-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+}
+.lever-popup-title {
+ font-size: 34px;
+ font-weight: 600;
+ color: #1e1e1e;
+}
+.lever-popup-close {
+ font-size: 47px;
+ color: #666;
+ line-height: 1;
+ cursor: pointer;
+ padding: 6px;
+}
+.lever-popup-segment {
+ display: flex;
+ align-items: stretch;
+ background: #f7f7f7;
+ border-radius: 15px;
+ overflow: hidden;
+}
+.lever-popup-seg-item {
+ flex: 1;
+ padding: 18px 24px;
+ text-align: center;
+ font-size: 27px;
+ color: #868e9a;
+ transition: background 0.2s, color 0.2s, font-weight 0.2s;
+}
+.lever-popup-seg-left { border-radius: 15px 0 0 15px; }
+.lever-popup-seg-right { border-radius: 0 15px 15px 0; }
+.lever-popup-seg-item.lever-popup-seg-active {
+ background: #fff;
+ color: #1e1e1e;
+ font-weight: 600;
+ box-shadow: 0 1px 6px rgba(0,0,0,0.06);
+}
+.lever-popup-presets {
+ margin-top: 30px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 18px;
+ justify-content: flex-start;
+}
+.lever-popup-preset-item {
+ flex: 1 1 calc(33.33% - 12px);
+ min-width: calc(33.33% - 12px);
+ box-sizing: border-box;
+ padding: 21px 12px;
+ text-align: center;
+ font-size: 30px;
+ font-weight: 600;
+ color: #868e9a;
+ background: #f7f7f7;
+ border-radius: 15px;
+ border: 2px solid transparent;
+ cursor: pointer;
+ transition: background 0.2s, color 0.2s, border-color 0.2s;
+}
+.lever-popup-preset-item.lever-popup-preset-active {
+ color: #1e1e1e;
+ background: #fff;
+ border-color: #7c3aed;
+ box-shadow: 0 1px 8px rgba(124, 58, 237, 0.15);
+}
+.lever-popup-confirm {
+ margin-top: 42px;
+ width: 100%;
+ padding: 24px 36px;
+ background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%);
+ color: #fff;
+ font-weight: 600;
+ font-size: 31px;
+ border-radius: 15px;
+ text-align: center;
+ cursor: pointer;
+}
+
+.trade-futures-bonus {
+ .mr-10 { margin-right: 10px; }
+ .trade-futures-transfer-icon {
+ flex-shrink: 0;
+ padding: 8px;
+ margin: -8px -8px -8px 0;
+ border-radius: 50%;
+ }
+}
+
+.trade-long-margin {
+ margin-top: 8px;
+}
</style>
--
Gitblit v1.9.3