From 1eb842d51e2297e8fedaf0b22a1df96e967fb5fa Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Sun, 06 Jul 2025 11:38:26 +0800
Subject: [PATCH] style
---
src/components/perpetual-open/index.vue | 186 ++++++++++++++++++++++++++++++++++++++--------
1 files changed, 152 insertions(+), 34 deletions(-)
diff --git a/src/components/perpetual-open/index.vue b/src/components/perpetual-open/index.vue
index df39b1e..17c6575 100644
--- a/src/components/perpetual-open/index.vue
+++ b/src/components/perpetual-open/index.vue
@@ -121,7 +121,7 @@
/>
<span class="ml-20">USDT</span>
</div>
- <div
+ <!-- <div
class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
v-if="selectIndex == 1"
>
@@ -142,7 +142,7 @@
v-model="form.stop_price_loss"
/>
<span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
- </div>
+ </div> -->
<div
class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg"
>
@@ -161,7 +161,7 @@
<input
:placeholder="
selectIndex == 1
- ? $t('张数')
+ ? $t('手数')
: $t('最少') + initFutrue && initFutrue.para
? $t('最小金额') + initFutrue.para[paraIndex].buy_min
: ''
@@ -191,12 +191,17 @@
</div>
<template v-if="selectIndex == 1">
<div class="mt-40 mb-30 w-full flex justify-between items-center">
- <span class="font-22 font-400 text-grey">{{
- $t("可开张数")
- }}</span>
+ <span class="font-22 font-400 text-grey">
+ <!-- {{ $t("可开") }}{{ $t("手数") }} -->
+ {{ $t("可用余额") }}
+ <!-- {{initFutrue.amount / (initData.amount + 0.0375) * form.lever_rate }} // -->
+ </span>
+ <!-- {{ form.lever_rate }} -->
<span class="font-22 font-400 textColor">
- {{ initData.volume }}
- {{ $t("张") }}
+ <!-- 余额 -->
+ {{ initFutrue.amount }} USDT
+ <!-- {{ maxItems }} -->
+ <!-- {{ $t("手数") }} -->
</span>
</div>
<!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
@@ -214,10 +219,10 @@
<span class="flex-1 text-right">75%</span>
<span class="flex-1 text-right">100%</span>
</div> -->
- <!-- 张数输入 -->
+ <!-- 张数 滑块 -->
<amount-slider
ref="sliderRef"
- :maxAmount="getVolumnByLever()"
+ :maxAmount="maxItems"
@getAmount="getAmount"
></amount-slider>
</template>
@@ -225,25 +230,25 @@
<div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("合约金额") }}</div>
<div class="textColor">
- {{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT
+ {{ (form.amount * initData.amount).toFixed(4) }}
+ USDT
</div>
</div>
<div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("保证金") }}</div>
<div class="textColor">
- {{ (initData.amount * (form.amount / 1)) | nan }} USDT
+ {{ margin.toFixed(4) }}
+ USDT
</div>
</div>
<div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("建仓手续费") }}</div>
- <div class="textColor">
- {{
- userInfo.perpetual_contracts_status === "1"
- ? initData.fee * (form.amount / 1)
- : (initData.fee * (form.amount / 1) * form.lever_rate) | nan
- }}
- USDT
- </div>
+ <!-- {{
+ userInfo.perpetual_contracts_status === "1"
+ ? initData.fee * (form.amount / 1)
+ : (initData.fee * (form.amount / 1) * form.lever_rate) | nan
+ }} -->
+ <div class="textColor">{{ fee.toFixed(4) }} USDT</div>
</div>
</template>
<div
@@ -684,8 +689,20 @@
// 倍数
obj.lever = [
{
- id: 1,
- lever_rate: 1,
+ id: 25,
+ lever_rate: 25,
+ },
+ {
+ id: 50,
+ lever_rate: 50,
+ },
+ {
+ id: 100,
+ lever_rate: 100,
+ },
+ {
+ id: 200,
+ lever_rate: 200,
},
];
}
@@ -696,6 +713,66 @@
coudBuyVolume() {
// 可买数量
return Math.floor(this.initOpen.volume / 1 / this.form.lever_rate);
+ },
+ // 每份保证金
+ perItemMargin() {
+ console.log(
+ this.initData,
+ ": 每份保证金",
+ this.initData.amount / this.form.lever_rate
+ );
+ return this.initData.amount / this.form.lever_rate;
+ },
+ // 每份手续费（基于保证金）
+ perItemFee() {
+ const rateMap = {
+ 25: 0.0375,
+ 50: 0.075,
+ 100: 0.15,
+ 200: 0.3,
+ };
+ const rate = rateMap[this.form.lever_rate];
+ return this.perItemMargin * rate;
+ },
+ // 每份总支出
+ perItemTotalCost() {
+ return this.perItemMargin + this.perItemFee;
+ },
+ // 最大可购买整数份数
+ maxItems() {
+ console.log(this.initFutrue.amount, ": initFutrue.amount");
+ if (this.perItemTotalCost <= 0) return 0;
+ return Math.floor(this.initFutrue.amount / this.perItemTotalCost);
+ },
+ // 实际交易金额
+ actualTradeValue() {
+ return this.form.amount * this.initData.amount;
+ },
+ // 总保证金
+ margin() {
+ return this.form.amount * this.perItemMargin;
+ },
+ // 总手续费
+ fee() {
+ return this.form.amount * this.perItemFee;
+ },
+ // 总支出
+ totalExpenditure() {
+ return this.margin + this.fee;
+ },
+ calculatedFee() {
+ const rateMap = {
+ 25: 0.0375,
+ 50: 0.075,
+ 100: 0.15,
+ 200: 0.3,
+ };
+ const rate = rateMap[this.form.lever_rate];
+ console.log(this.initData.amount, ": initData.amount");
+ return (
+ (this.form.amount * this.initData.amount * rate) / this.form.lever_rate
+ );
+ // : this.initData.amount * (this.form.amount / 1) * rate;
},
},
filters: {
@@ -723,21 +800,21 @@
title: this.$t("市价"),
type: "1",
},
- {
- title: this.$t("限价"),
- type: "2",
- },
+ // {
+ // title: this.$t("限价"),
+ // type: "2",
+ // },
],
form: {
symbol: "", // 币种
session_token: "",
direction: "buy", // 买or卖
price_type: "opponent", // 市价or限价
- lever_rate: 1, // 杠杆
+ lever_rate: 200, // 杠杆
stop_price_profit: "",
stop_price_loss: "",
price: "",
- amount: "", // 数量
+ amount: 0, // 数量
para_id: "", // 交割周琦id
},
focus: false,
@@ -781,10 +858,10 @@
title: this.$t("市价"),
type: "1",
},
- {
- title: this.$t("限价"),
- type: "2",
- },
+ // {
+ // title: this.$t("限价"),
+ // type: "2",
+ // },
];
this.title = this.selectData[0].title;
this.type = this.selectData[0].type;
@@ -793,12 +870,51 @@
methods: {
//获取张数
getAmount(val) {
- this.form.amount = val;
+ console.log(val, "获取张数");
+ this.form.amount = val || 0;
+ // if(this.form.lever_rate==25){
+ // this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
+ // }else if(this.form.lever_rate==50){
+ // this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
+ // }else if(this.form.lever_rate==100){
+ // this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.15))/this.initData.amount)
+ // }else{
+ // this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.3))/this.initData.amount)
+ // }
},
// 获取张数,数据转换
getVolumnByLever() {
let vol;
- vol = this.initOpen.volume / 1;
+ // vol = this.initOpen.volume / 1;
+ if (this.form.lever_rate == 25) {
+ vol =
+ Math.floor(
+ // (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
+ // this.initData.amount
+ this.initFutrue.amount / (this.initData.amount + 0.0375)
+ ) * this.form.lever_rate;
+ } else if (this.form.lever_rate == 50) {
+ vol =
+ Math.floor(
+ // (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
+ // this.initData.amount
+ this.initFutrue.amount / (this.initData.amount + 0.075)
+ ) * this.form.lever_rate;
+ } else if (this.form.lever_rate == 100) {
+ vol =
+ Math.floor(
+ // (this.initFutrue.amount - this.initFutrue.amount * 0.15) /
+ // this.initData.amount
+ this.initFutrue.amount / (this.initData.amount + 0.15)
+ ) * this.form.lever_rate;
+ } else {
+ vol =
+ Math.floor(
+ // (this.initFutrue.amount - this.initFutrue.amount * 0.3) /
+ // this.initData.amount
+ this.initFutrue.amount / (this.initData.amount + 0.3)
+ ) * this.form.lever_rate;
+ }
return Math.floor(vol);
},
@@ -1076,11 +1192,13 @@
this.$refs.sliderRef.emptyValue();
}
this.$toast(this.$t("操作成功"));
+
_getBalance().then((data) => {
// 刷新余额
this.$store.commit("user/SET_USERINFO", {
balance: data.money,
});
+ location.reload();
});
this.$emit("ordered", emitFunc);
if (this.selectIndex / 1 === 2) {
--
Gitblit v1.9.3