From e01cee0f0c5c5c2eb2d8595eadb3c7a9df2a37fc Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Wed, 21 Jan 2026 16:37:01 +0800
Subject: [PATCH] 1
---
src/components/Transform/trade-order-area/index.vue | 114 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 70 insertions(+), 44 deletions(-)
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index 0b1966c..1a4c523 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -31,51 +31,54 @@
<div class="flex justify-center items-center h-66 buy-item">{{ $t('停牌中,禁止交易') }}</div>
</template> -->
<!-- <template v-else> -->
- <div class="flex total-list">
- <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
- {{ $t('数量') }}
- </div>
- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
- {{ $t('总额') }}
- </div>
+ <div class="flex total-list">
+ <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
+ {{ $t('数量') }}
</div>
- <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
- @input="onInput" />
- <span class="textColor font-28">{{ symbol.toLocaleUpperCase() }}</span>
+ <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
+ {{ $t('总额') }}
</div>
- <div v-if="isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
- @input="onInputTotal" />
- <span class="textColor font-28">{{ 'USDT' }}</span>
+ </div>
+ <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
+ <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
+ @input="onInput" />
+ <span class="textColor font-28">{{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span>
+ </div>
+ <div v-if="isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
+ <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
+ @input="onInputTotal" />
+ <span class="textColor font-28">{{ 'USDT' }}</span>
+ </div>
+ <div class="font-24 w-full flex justify-between items-center textColor1">
+ <!-- <span class="flex-1 text-left">0%</span> -->
+ <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
+ @click="exchangeVal(25)">25%</span>
+ <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
+ @click="exchangeVal(50)">50%</span>
+ <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
+ @click="exchangeVal(75)">75%</span>
+ <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
+ @click="exchangeVal(100)">100%</span>
+ </div>
+ <div class="flex justify-between items-center mt-40">
+ <div class="flex flex-col font-24">
+ <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
+ {{ initOpen.volume }} USDT</span>
+ </p>
+ <p class="text-grey" v-else>{{ $t('可卖') }}
+ <span class="textColor ml-8">
+ {{ initClose.volume }} {{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}
+ </span>
+ </p>
</div>
- <div class="font-24 w-full flex justify-between items-center textColor1">
- <!-- <span class="flex-1 text-left">0%</span> -->
- <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
- @click="exchangeVal(25)">25%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
- @click="exchangeVal(50)">50%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
- @click="exchangeVal(75)">75%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
- @click="exchangeVal(100)">100%</span>
- </div>
- <div class="flex justify-between items-center mt-40">
- <div class="flex flex-col font-24">
- <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
- {{ initOpen.volume }} USDT</span>
- </p>
- <p class="text-grey" v-else>{{ $t('可卖') }}<span class="textColor ml-8">{{ initClose.volume }} {{
- symbol.toLocaleUpperCase() }}</span></p>
- </div>
- <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
- <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
- </div>
- <div style="border-radius: 3.5rem;"
- class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
- :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
- {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
- </div>
+ <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
+ <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
+ </div>
+ <div style="border-radius: 3.5rem;"
+ class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
+ :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
+ {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
+ </div>
<!-- </template> -->
</div>
</template>
@@ -86,7 +89,9 @@
import 'vue-slider-component/theme/default.css'
import { _getBalance } from "@/service/user.api.js";
import TradeApi from "@/service/trading.js";
+import { strToArr } from '@/utils/utis'
import { mapGetters } from "vuex";
+import { getStorage, setStorage } from '@/utils/index.js';
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
name: "perpetualPosition",
@@ -100,7 +105,7 @@
type: String,
default: ''
},
- symbol: {
+ symbolName: {
type: String,
default: ''
},
@@ -132,6 +137,8 @@
this.title = this.selectData[0].title
this.type = this.selectData[0].type
this.form.order_price_type = 'opponent'
+ // 检查是否有从其他页面传递的卖出参数
+ this.checkSellParams()
},
watch: {
initOpen: { // 处理滚动条初始值
@@ -187,8 +194,26 @@
this.title = this.selectData[0].title
this.type = this.selectData[0].type
this.form.order_price_type = 'opponent'
+ // 检查是否有从其他页面传递的卖出参数
+ this.checkSellParams()
},
methods: {
+ strToArr,
+ // 检查是否有从其他页面传递的卖出参数
+ checkSellParams() {
+ const sellParams = getStorage('tradeSellParams')
+ if (sellParams && sellParams.mode === 'close' && sellParams.volume) {
+ // 切换到卖出模式
+ this.changeTab('close')
+ // 设置数量
+ this.$nextTick(() => {
+ this.form.volume = sellParams.volume
+ this.isTotal = false
+ })
+ // 清除存储的参数
+ window.localStorage.removeItem('tradeSellParams')
+ }
+ },
checkIsTotal(val) {
this.isTotal = val
this.percentageVal = 0
@@ -582,7 +607,7 @@
display: flex;
- color: $text_color;
+ color: $text_color3;
font-size: 26px;
align-items: center;
@@ -600,6 +625,7 @@
.active-bg {
background: $input_background;
border-radius: 2.5rem;
+ color: $text_color;
}
.buyandSell {
--
Gitblit v1.9.3