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 | 122 ++++++++++++++--------------------------
1 files changed, 44 insertions(+), 78 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index aa76ecb..160f4f6 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -364,19 +364,9 @@
<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-row">
- <div class="lever-popup-btn lever-popup-btn-minus" @click="leverPopupValue = Math.max(1, (leverPopupValue || 1) - 1)">−</div>
- <input v-model.number="leverPopupValue" type="number" class="lever-popup-input" min="1" :max="maxLever"
- @input="onLeverInput" />
- <div class="lever-popup-btn lever-popup-btn-plus" @click="leverPopupValue = Math.min(maxLever, (leverPopupValue || 1) + 1)">+</div>
- </div>
- <div class="lever-popup-slider-wrap">
- <span class="lever-popup-slider-label">1X</span>
- <div class="lever-popup-slider-inner">
- <van-slider v-model="leverPopupValue" :min="1" :max="maxLever" :step="1" class="lever-popup-slider"
- bar-height="6px" active-color="#7c3aed" />
- </div>
- <span class="lever-popup-slider-label">{{ maxLever }}X</span>
+ <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>
@@ -566,7 +556,7 @@
return max
},
maxLever() {
- return 100 // 杠杆倍率固定 1～100，不从接口获取
+ return Math.max(...this.leverPresetList)
},
leverDisplayMode() {
return this.locationVal === 1 ? 'Cross' : 'Part'
@@ -636,6 +626,7 @@
locationTitle: this.$t('全仓'),
locationVal: 1,
showLeverPopup: false,
+ leverPresetList: [30, 50, 100, 200, 300],
leverPopupValue: 100,
leverPopupMargin: 1, // 1=全仓 Cross, 0=逐仓 Part
}
@@ -816,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()
},
@@ -873,24 +864,32 @@
this.locationShow = false;
},
openLeverPopup() {
- this.leverPopupValue = this.form.lever_rate || 1;
+ this.leverPopupValue = this.snapLeverToPreset(this.form.lever_rate);
this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
this.showLeverPopup = true;
},
- onLeverInput() {
- let v = parseInt(this.leverPopupValue, 10);
- if (isNaN(v) || v < 1) this.leverPopupValue = 1;
- else if (v > this.maxLever) this.leverPopupValue = this.maxLever;
- else this.leverPopupValue = v;
+ 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.form.lever_rate || 1;
+ this.leverPopupValue = this.snapLeverToPreset(this.form.lever_rate);
this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
},
confirmLeverPopup() {
- let val = parseInt(this.leverPopupValue, 10);
- if (isNaN(val) || val < 1) val = 1;
- if (val > this.maxLever) val = this.maxLever;
+ const val = this.snapLeverToPreset(this.leverPopupValue);
this.form.lever_rate = val;
this.locationVal = this.leverPopupMargin;
this.locationTitle = this.leverPopupMargin === 1 ? this.$t('全仓') : this.$t('逐仓');
@@ -1461,66 +1460,33 @@
font-weight: 600;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
-.lever-popup-row {
- display: flex;
- align-items: stretch;
+.lever-popup-presets {
margin-top: 30px;
- border-radius: 15px;
- overflow: hidden;
- border: 1px solid #eee;
-}
-.lever-popup-btn {
- width: 78px;
- min-width: 78px;
- background: #f7f7f7;
display: flex;
- align-items: center;
- justify-content: center;
- font-size: 43px;
- color: #333;
- cursor: pointer;
- font-weight: 400;
+ flex-wrap: wrap;
+ gap: 18px;
+ justify-content: flex-start;
}
-.lever-popup-btn-minus { border-radius: 15px 0 0 15px; }
-.lever-popup-btn-plus { border-radius: 0 15px 15px 0; }
-.lever-popup-input {
- flex: 1;
- min-width: 0;
+.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;
- border: none;
- font-size: 35px;
+ 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;
- padding: 21px 12px;
-}
-.lever-popup-input:focus { outline: none; }
-.lever-popup-slider-wrap {
- margin-top: 36px;
- display: flex;
- align-items: center;
- gap: 18px;
-}
-.lever-popup-slider-label {
- font-size: 23px;
- color: #868e9a;
- flex-shrink: 0;
-}
-.lever-popup-slider-inner {
- flex: 1;
- min-width: 0;
-}
-.lever-popup-slider :deep(.van-slider__bar) {
- height: 6px;
- background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%) !important;
- border-radius: 3px;
-}
-.lever-popup-slider :deep(.van-slider__button) {
- width: 30px;
- height: 30px;
- background: #666;
- border: none;
- box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+ border-color: #7c3aed;
+ box-shadow: 0 1px 8px rgba(124, 58, 237, 0.15);
}
.lever-popup-confirm {
margin-top: 42px;
--
Gitblit v1.9.3