|
|
|
@ -1,151 +1,58 @@ |
|
|
|
<template> |
|
|
|
<div class="markets-pair-list exchange-store bg-plain" style="margin-top: 8px;"> |
|
|
|
<div class="px-3 pri"> |
|
|
|
<div class="nav nav-pills" style="border-bottom: 1px solid #e0e3eb;"> |
|
|
|
<div class="markets-pair-list exchange-store bg-plain"> |
|
|
|
<div class="nav nav-pills"> |
|
|
|
<div class="nav-item"> |
|
|
|
<a class="nav-link" :class="{ active: form.type == 2 }" @click="form.type = 2">{{ $t("contract.d9") }}</a> |
|
|
|
</div> |
|
|
|
<div class="nav-item"> |
|
|
|
<a class="nav-link" :class="{ active: form.type == 1 }" @click="form.type = 1">{{ $t("contract.e0") }}</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="nav nav-pills px-3 py-3"> |
|
|
|
<div class="nav-item" style="background-color: #F2F2F2;width:50%;text-align: center;"> |
|
|
|
<a class="nav-link" @click="tab = 1" style="color: #999999;">{{ $t("contract.d5") }}</a> |
|
|
|
</div> |
|
|
|
<div class="flex-fill px-3 justify-content-end d-flex align-items-center" style="background-color: #F2F2F2;width:50%;text-align: center;"> |
|
|
|
<el-popover style="display: block;width: 100%;" placement="bottom" width="100" v-model="visible" trigger="manual"> |
|
|
|
<div class="rounded p-1 bg-black pointer" slot="reference" @click="visible = !visible"> |
|
|
|
<!-- {{ $t("contract.b0") }} --> |
|
|
|
<span class="fn-16" style="color: #999999;"> {{ form.lever_rate }}X </span> |
|
|
|
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{ |
|
|
|
$t("contract.d5") |
|
|
|
}}</a> |
|
|
|
</div> |
|
|
|
<!-- <div class="nav-item"> |
|
|
|
<a class="nav-link" :class="{ active: tab == 2 }" @click="tab = 2">{{ |
|
|
|
$t("contract.d6") |
|
|
|
}}</a> |
|
|
|
</div> --> |
|
|
|
<div class="flex-fill px-3 justify-content-end d-flex align-items-center"> |
|
|
|
<el-popover |
|
|
|
placement="bottom" |
|
|
|
width="100" |
|
|
|
v-model="visible" |
|
|
|
trigger="manual" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="rounded border p-1 bg-white pointer" |
|
|
|
slot="reference" |
|
|
|
@click="visible = !visible" |
|
|
|
> |
|
|
|
{{ $t("contract.b0") }} |
|
|
|
<span class="fn-16"> {{ form.lever_rate }}X </span> |
|
|
|
<i class="el-icon-edit text-primary"></i> |
|
|
|
</div> |
|
|
|
<div class="list"> |
|
|
|
<div class="el-select-dropdown__item" @click=" selectLever(item); visible = false;" v-for="item in lever_rage" :key="item"> |
|
|
|
<div |
|
|
|
class="el-select-dropdown__item" |
|
|
|
@click=" |
|
|
|
selectLever(item); |
|
|
|
visible = false; |
|
|
|
" |
|
|
|
v-for="item in lever_rage" |
|
|
|
:key="item" |
|
|
|
> |
|
|
|
{{ item }}X |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-popover> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content-box d-flex" style="flex-wrap: wrap;justify-content: space-between;"> |
|
|
|
<!-- 买入表单 --> |
|
|
|
<div style="width: 50%;" class="px-3"> |
|
|
|
<div class="d-flex my-4 align-items-center"> |
|
|
|
<div class="input-group input-group-sm"> |
|
|
|
<div class="content-box px-3 "> |
|
|
|
<div v-if="type == 2" class="input-group my-4 input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
<span class="input-group-text">{{ $t("contract.d8") }}</span> |
|
|
|
<span class="input-group-text">{{ $t("contract.d7") }}</span> |
|
|
|
</div> |
|
|
|
<template v-if="form.type == 1"> |
|
|
|
<input type="number" v-model="buyform.entrust_price" class="form-control" placeholder=""/> |
|
|
|
<input type="number" class="form-control" placeholder="" /> |
|
|
|
<div class="input-group-append"> |
|
|
|
<span class="input-group-text">USDT</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-if="form.type == 2"> |
|
|
|
<input type="text" disabled:value="$t('contract.d9')" class="form-control" :placeholder="$t('contract.d9')"/> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="input-group mb-4 input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
<!-- <span class="input-group-text">{{ $t("contract.e1") }}</span> --> |
|
|
|
<span class="input-group-text">{{ $t("contract.l2") }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<input |
|
|
|
type="number" |
|
|
|
class="form-control" |
|
|
|
v-model="marginBuy" |
|
|
|
:placeholder="tips" |
|
|
|
/> |
|
|
|
<!-- <div class="input-group-append"> |
|
|
|
<span class="input-group-text">{{ $t("contract.e2") }}</span> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<div class="px-2" v-if="this.tab == 1"> |
|
|
|
<!-- :value="activeStepBuy" |
|
|
|
@input="sliderChangeBuy" --> |
|
|
|
<el-slider |
|
|
|
:value="activeStepBuy" |
|
|
|
@input="sliderChangeBuy" |
|
|
|
:format-tooltip="tooltip" |
|
|
|
:marks="marks" |
|
|
|
></el-slider> |
|
|
|
</div> |
|
|
|
<div class="d-flex justify-content-between mb-3 color_7c fn-10"> |
|
|
|
<div>0</div> |
|
|
|
<div style="margin-left: 35px;">25%</div> |
|
|
|
<div style="margin-left: 15px;">50%</div> |
|
|
|
<div style="margin-left: 20px;">75%</div> |
|
|
|
<div>100%</div> |
|
|
|
</div> |
|
|
|
<!-- 开仓 --> |
|
|
|
<div v-if="tab == 1" class="kaicang"> |
|
|
|
<div class="d-flex justify-content-between mb-3"> |
|
|
|
<div class="color_7c">{{ $t("contract.e7") }} </div> |
|
|
|
<div>{{ maxNum }}</div> |
|
|
|
</div> |
|
|
|
<div class="d-flex justify-content-between mb-3"> |
|
|
|
<div class="color_7c">{{ $t("contract.e1") }}</div> |
|
|
|
<div>{{ amountBuy }} </div> |
|
|
|
</div> |
|
|
|
<div class="d-flex justify-content-between mb-4"> |
|
|
|
<div class="color_7c">{{ $t("contract.a3") }}</div> |
|
|
|
<div> |
|
|
|
{{ accountInfo.usable_balance }} USDT |
|
|
|
<i |
|
|
|
class="el-icon-sort" |
|
|
|
@click="$router.push('/wallet/assets/exchange')" |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 平仓 --> |
|
|
|
<div v-if="tab == 2"> |
|
|
|
<div class="d-flex justify-content-between"> |
|
|
|
<div>{{ $t("contract.e4") }}：</div> |
|
|
|
<div>{{ multiplePositions }} {{ $t("contract.e2") }}</div> |
|
|
|
</div> |
|
|
|
<div class="d-flex justify-content-between mb-4"> |
|
|
|
<div>{{ $t("contract.e5") }}:</div> |
|
|
|
<div>{{ shortPosition }} {{ $t("contract.e2") }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 止盈止损 --> |
|
|
|
<div class="d-flex mb-4 border-top py-2" v-if="0"> |
|
|
|
<input type="checkbox" name="" id="" v-model="checkboxBuy"> |
|
|
|
<div>{{ $t("contact.Profit&Loss") }}</div> |
|
|
|
</div> |
|
|
|
<template v-if="checkboxBuy"> |
|
|
|
<div class="input-group mb-4 input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
<span class="input-group-text">{{ $t("contract.j3") }}</span> |
|
|
|
</div> |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
class="form-control" |
|
|
|
v-model="buyform.pri1" |
|
|
|
:placeholder="tips" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="input-group mb-4 input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
<span class="input-group-text">{{ $t("contract.j4") }}</span> |
|
|
|
</div> |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
class="form-control" |
|
|
|
v-model="buyform.pri2" |
|
|
|
:placeholder="tips" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<!-- 卖出表单 --> |
|
|
|
<div style="width: 50%;" class="px-3"> |
|
|
|
<div class="d-flex my-4 align-items-center"> |
|
|
|
<div class="input-group input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
@ -154,7 +61,7 @@ |
|
|
|
<template v-if="form.type == 1"> |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
v-model="sellform.entrust_price" |
|
|
|
v-model="form.entrust_price" |
|
|
|
class="form-control" |
|
|
|
placeholder="" |
|
|
|
/> |
|
|
|
@ -172,7 +79,12 @@ |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
|
|
|
|
<button |
|
|
|
@click="form.type == 1 ? (form.type = 2) : (form.type = 1)" |
|
|
|
class="btn btn-sm btn-outline-primary ml-2 text-nowrap" |
|
|
|
> |
|
|
|
{{ form.type == 1 ? $t("common.limit") : $t("common.market") }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="input-group mb-4 input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
@ -183,42 +95,31 @@ |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
class="form-control" |
|
|
|
v-model="marginSell" |
|
|
|
v-model="margin" |
|
|
|
:placeholder="tips" |
|
|
|
/> |
|
|
|
<!-- <div class="input-group-append"> |
|
|
|
<span class="input-group-text">{{ $t("contract.e2") }}</span> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<div class="px-2" v-if="this.tab == 1"> |
|
|
|
<!-- :value="activeStepSell" |
|
|
|
@input="sliderChangeSell" --> |
|
|
|
<div class="px-2 mb-4" v-if="this.tab == 1"> |
|
|
|
<el-slider |
|
|
|
:value="activeStepSell" |
|
|
|
@input="sliderChangeSell" |
|
|
|
:value="activeStep" |
|
|
|
@input="sliderChange" |
|
|
|
:format-tooltip="tooltip" |
|
|
|
:marks="marks" |
|
|
|
></el-slider> |
|
|
|
</div> |
|
|
|
<div class="d-flex justify-content-between mb-3 color_7c fn-10"> |
|
|
|
<div>0</div> |
|
|
|
<div style="margin-left: 35px;">25%</div> |
|
|
|
<div style="margin-left: 15px;">50%</div> |
|
|
|
<div style="margin-left: 20px;">75%</div> |
|
|
|
<div>100%</div> |
|
|
|
<!-- :step="25" --> |
|
|
|
</div> |
|
|
|
<!-- 开仓 --> |
|
|
|
<div v-if="tab == 1" class="kaicang"> |
|
|
|
<div class="d-flex justify-content-between mb-3"> |
|
|
|
<div class="color_7c">{{ $t("contract.e7") }} </div> |
|
|
|
<div>{{ accountInfo.account_equity }}</div> |
|
|
|
</div> |
|
|
|
<div class="d-flex justify-content-between mb-3"> |
|
|
|
<div class="color_7c">{{ $t("contract.e1") }}</div> |
|
|
|
<div>{{ amountSell }} </div> |
|
|
|
<div>{{ $t("contract.e1") }}：</div> |
|
|
|
<!-- {{$t("contract.e2")}} --> |
|
|
|
<div>{{ amount }} </div> |
|
|
|
</div> |
|
|
|
<div class="d-flex justify-content-between mb-4"> |
|
|
|
<div class="color_7c">{{ $t("contract.a3") }}</div> |
|
|
|
<div>{{ $t("contract.a3") }}:</div> |
|
|
|
<div> |
|
|
|
{{ accountInfo.usable_balance }} USDT |
|
|
|
<i |
|
|
|
@ -228,64 +129,49 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 止盈止损 --> |
|
|
|
<div class="d-flex mb-4 border-top py-2" v-if="0"> |
|
|
|
<input type="checkbox" name="" id="" v-model="checkboxSell"> |
|
|
|
<div>{{ $t("contact.Profit&Loss") }}</div> |
|
|
|
</div> |
|
|
|
<template v-if="checkboxSell"> |
|
|
|
<div class="input-group mb-4 input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
<span class="input-group-text">{{ $t("contract.j3") }}</span> |
|
|
|
</div> |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
class="form-control" |
|
|
|
v-model="sellform.pri1" |
|
|
|
:placeholder="tips" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="input-group mb-4 input-group-sm"> |
|
|
|
<div class="input-group-prepend"> |
|
|
|
<span class="input-group-text">{{ $t("contract.j4") }}</span> |
|
|
|
<!-- 平仓 --> |
|
|
|
<div v-if="tab == 2"> |
|
|
|
<div class="d-flex justify-content-between"> |
|
|
|
<div>{{ $t("contract.e4") }}：</div> |
|
|
|
<div>{{ multiplePositions }} {{ $t("contract.e2") }}</div> |
|
|
|
</div> |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
class="form-control" |
|
|
|
v-model="sellform.pri2" |
|
|
|
:placeholder="tips" |
|
|
|
/> |
|
|
|
<div class="d-flex justify-content-between mb-4"> |
|
|
|
<div>{{ $t("contract.e5") }}:</div> |
|
|
|
<div>{{ shortPosition }} {{ $t("contract.e2") }}</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<div class="exchange_button" v-if="tab == 1" style="width: 100%;"> |
|
|
|
<div class="px-3 flex-fill mb-4"> |
|
|
|
<div class="exchange_button" v-if="tab == 1"> |
|
|
|
<div class="px-1 flex-fill mb-4"> |
|
|
|
<button |
|
|
|
@click="ifOpenPosition(1)" |
|
|
|
type="button" |
|
|
|
class="sub w-24/24 btn-success btn btn-sm mb-3" |
|
|
|
> |
|
|
|
{{ $t("contract.d0") }} |
|
|
|
<!-- {{ $t("contract.d0") }}{{ symbol }} --> |
|
|
|
<!-- {{ $t("contract.d0") }} --> |
|
|
|
<!-- <span class="fn-12"> （{{ $t("contract.e6") }}） </span> --> |
|
|
|
</button> |
|
|
|
<div class="text-left"> |
|
|
|
{{ $t("contract.e7") }} {{ maxNum }} |
|
|
|
<!-- {{ $t("contract.e2") }} --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="px-3 flex-fill"> |
|
|
|
<div class="px-1 flex-fill"> |
|
|
|
<button |
|
|
|
@click="ifOpenPosition(2)" |
|
|
|
type="button" |
|
|
|
class="sub w-24/24 btn-danger btn btn-sm mb-3" |
|
|
|
> |
|
|
|
{{ $t("contract.d2") }} |
|
|
|
<!-- {{ $t("contract.d2") }}{{ symbol }} --> |
|
|
|
<!-- {{ $t("contract.d2") }} --> |
|
|
|
<!-- <span class="fn-12"> （{{ $t("contract.e8") }}） </span> --> |
|
|
|
</button> |
|
|
|
<!-- <div class="text-center"> --> |
|
|
|
<div class="text-right"> |
|
|
|
{{ $t("contract.e7") }} {{ maxNum }} |
|
|
|
<!-- {{ $t("contract.e2") }} --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="" v-if="tab == 2" style="width: 100%;"> |
|
|
|
</div> |
|
|
|
<div class="" v-if="tab == 2"> |
|
|
|
<div class="px-2 flex-fill mb-4"> |
|
|
|
<button |
|
|
|
@click="ifOpenPosition(1)" |
|
|
|
@ -322,23 +208,14 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tab: 1, |
|
|
|
|
|
|
|
type: 1, |
|
|
|
visible: false, |
|
|
|
form: { |
|
|
|
type: 2,//2市价1限价 |
|
|
|
lever_rate: "" |
|
|
|
}, |
|
|
|
buyform: { |
|
|
|
entrust_price: undefined, |
|
|
|
amount:"", |
|
|
|
pri1: "",//止盈触发价 |
|
|
|
pri2: ""//止损触发价 |
|
|
|
}, |
|
|
|
sellform: { |
|
|
|
// 1:限价 2:市价 |
|
|
|
type: 2, |
|
|
|
entrust_price: undefined, |
|
|
|
amount:"", |
|
|
|
pri1: "",//止盈触发价 |
|
|
|
pri2: ""//止损触发价 |
|
|
|
lever_rate: "" |
|
|
|
}, |
|
|
|
// 最多可开张数 |
|
|
|
maxNum: 0, |
|
|
|
@ -351,12 +228,7 @@ export default { |
|
|
|
50:'', |
|
|
|
75:'' |
|
|
|
}, |
|
|
|
marginBuy:0, |
|
|
|
marginSell:0, |
|
|
|
checkboxBuy: false, |
|
|
|
checkboxSell: false, |
|
|
|
// activeStepBuy:0, |
|
|
|
// activeStepSell:0 |
|
|
|
margin:0, |
|
|
|
}; |
|
|
|
}, |
|
|
|
props: { |
|
|
|
@ -384,21 +256,16 @@ export default { |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
symbol() { |
|
|
|
this.buyform.entrust_price = undefined; |
|
|
|
this.sellform.entrust_price = undefined; |
|
|
|
this.form.entrust_price = undefined; |
|
|
|
this.contractAccount(); |
|
|
|
this.getSymbolDetail(); |
|
|
|
}, |
|
|
|
defaultPrice(n) { |
|
|
|
this.buyform.entrust_price = n; |
|
|
|
this.sellform.entrust_price = n; |
|
|
|
this.form.entrust_price = n; |
|
|
|
}, |
|
|
|
newPriceObj(n) { |
|
|
|
if (n && this.buyform.entrust_price === undefined) { |
|
|
|
this.buyform.entrust_price = n.price; |
|
|
|
} |
|
|
|
if (n && this.sellform.entrust_price === undefined) { |
|
|
|
this.sellform.entrust_price = n.price; |
|
|
|
if (n && this.form.entrust_price === undefined) { |
|
|
|
this.form.entrust_price = n.price; |
|
|
|
} |
|
|
|
}, |
|
|
|
contractOpen(n, o) { |
|
|
|
@ -413,7 +280,6 @@ export default { |
|
|
|
mounted() { |
|
|
|
if (this.symbol) { |
|
|
|
this.contractAccount(); |
|
|
|
|
|
|
|
this.getSymbolDetail(); |
|
|
|
} |
|
|
|
this._time = setInterval(() => { |
|
|
|
@ -456,22 +322,9 @@ export default { |
|
|
|
if (!item) return 0; |
|
|
|
return item.avail_position; |
|
|
|
}, |
|
|
|
activeStepBuy() { |
|
|
|
let num = 0 |
|
|
|
if (!this.buyform.amount || !this.maxNum){ |
|
|
|
num = (this.buyform.amount / this.maxNum) * 100; |
|
|
|
}else{ |
|
|
|
num = (this.buyform.amount / this.maxNum) * 100; |
|
|
|
} |
|
|
|
return num; |
|
|
|
}, |
|
|
|
activeStepSell() { |
|
|
|
let num = 0 |
|
|
|
if (!this.sellform.amount || !this.maxNum){ |
|
|
|
num = (this.sellform.amount / this.maxNum) * 100; |
|
|
|
}else{ |
|
|
|
num = (this.sellform.amount / this.maxNum) * 100; |
|
|
|
} |
|
|
|
activeStep() { |
|
|
|
// if (!this.form.amount || !this.maxNum) return 0; |
|
|
|
let num = (this.form.amount / this.maxNum) * 100; |
|
|
|
return num; |
|
|
|
}, |
|
|
|
// 保证金 |
|
|
|
@ -479,22 +332,13 @@ export default { |
|
|
|
// if (!this.form.lever_rate) return ''; |
|
|
|
// return math.omitTo(this.form.amount*this.unit_amount / this.form.lever_rate, 4); |
|
|
|
// }, |
|
|
|
amountBuy(){ |
|
|
|
amount(){ |
|
|
|
// console.info(this.form.lever_rate) |
|
|
|
// console.info(this.margin) |
|
|
|
if (!this.form.lever_rate || !this.marginBuy) return 0; |
|
|
|
let p=this.marginBuy*this.form.lever_rate; |
|
|
|
if (!this.form.lever_rate || !this.margin) return 0; |
|
|
|
let p=this.margin*this.form.lever_rate; |
|
|
|
|
|
|
|
this.buyform.amount=p; |
|
|
|
return p |
|
|
|
}, |
|
|
|
amountSell(){ |
|
|
|
// console.info(this.form.lever_rate) |
|
|
|
// console.info(this.margin) |
|
|
|
if (!this.form.lever_rate || !this.marginSell) return 0; |
|
|
|
let p=this.marginSell*this.form.lever_rate; |
|
|
|
|
|
|
|
this.sellform.amount=p; |
|
|
|
this.form.amount=p; |
|
|
|
return p |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -537,21 +381,16 @@ export default { |
|
|
|
this.lever_rage = res.lever_rage; |
|
|
|
this.unit_amount = res.unit_amount |
|
|
|
this.$emit('getSymbolDetail',res) |
|
|
|
if (!this.form.lever_rate) { |
|
|
|
// if (!this.form.lever_rate) { |
|
|
|
this.form.lever_rate = res.default_lever; |
|
|
|
} |
|
|
|
// } |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 设置数量 |
|
|
|
sliderChangeBuy($ev) { |
|
|
|
this.buyform.amount = Math.round((this.maxNum * $ev) / 100)||''; |
|
|
|
// console.info(this.buyform) |
|
|
|
this.marginBuy=this.buyform.amount/this.form.lever_rate || 0 |
|
|
|
}, |
|
|
|
sliderChangeSell($ev) { |
|
|
|
this.sellform.amount = Math.round((this.maxNum * $ev) / 100)||''; |
|
|
|
// console.info(this.sellform) |
|
|
|
this.marginSell=this.sellform.amount/this.form.lever_rate || 0 |
|
|
|
sliderChange($ev) { |
|
|
|
this.form.amount = Math.round((this.maxNum * $ev) / 100)||''; |
|
|
|
// console.info(this.form) |
|
|
|
this.margin=this.form.amount/this.form.lever_rate || 0 |
|
|
|
}, |
|
|
|
// 选择杠杆 |
|
|
|
selectLever(idx) { |
|
|
|
@ -582,7 +421,6 @@ export default { |
|
|
|
// "contract.e2" |
|
|
|
// )}`; |
|
|
|
|
|
|
|
|
|
|
|
// `${this.$t("contract.f3")}${typeStr}${this.form.lever_rate}${this.$t( |
|
|
|
// "contract.f4" |
|
|
|
// )}${decStr}?` |
|
|
|
@ -606,24 +444,14 @@ export default { |
|
|
|
symbol: this.symbol, |
|
|
|
...this.form |
|
|
|
}; |
|
|
|
if(side==1){ |
|
|
|
data.entrust_price = this.buyform.entrust_price; |
|
|
|
data.amount = this.buyform.amount; |
|
|
|
data.checkbox = this.checkboxBuy; |
|
|
|
}else{ |
|
|
|
data.entrust_price = this.sellform.entrust_price; |
|
|
|
data.amount = this.sellform.amount; |
|
|
|
data.checkbox = this.checkboxSell; |
|
|
|
} |
|
|
|
Contract.openPosition(data).then(() => { |
|
|
|
this.contractAccount(); |
|
|
|
this.buyform.amount = 0; |
|
|
|
this.sellform.amount = 0; |
|
|
|
this.form.amount = 0; |
|
|
|
this.$message.success(this.$t("contract.f5")); |
|
|
|
this.$emit("position"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 平仓-买卖分表单后未处理平仓的表单数据 |
|
|
|
// 平仓 |
|
|
|
closePosition(side) { |
|
|
|
let data = { |
|
|
|
side: side == 1 ? 2 : 1, |
|
|
|
@ -642,7 +470,7 @@ export default { |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped="scoped"> |
|
|
|
<style scoped="scoped" lang="scss"> |
|
|
|
.exchange_button{ |
|
|
|
display: flex; |
|
|
|
font-size: 16px !important; |
|
|
|
@ -650,58 +478,8 @@ export default { |
|
|
|
.btn,.kaicang{ |
|
|
|
font-size: 0.9rem; |
|
|
|
} |
|
|
|
/* ::v-deep .el-slider__stop{ |
|
|
|
background-color: ; |
|
|
|
} */ |
|
|
|
|
|
|
|
.exchange-store.markets-pair-list .pri .nav-link.active::after{ |
|
|
|
content: ""; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
bottom: 0px; |
|
|
|
left: 50%; |
|
|
|
width: 52px; |
|
|
|
height: 4px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 0px; |
|
|
|
transform: translateX(-50%); |
|
|
|
margin-left: 0px; |
|
|
|
} |
|
|
|
.exchange-store.markets-pair-list .nav{ |
|
|
|
padding: 7px 0px 0px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
.exchange-store .btn-success, |
|
|
|
.exchange-store .btn-success:hover{ |
|
|
|
background-color: #52A45A; |
|
|
|
border-color: #52A45A; |
|
|
|
border-radius: 100px; |
|
|
|
color: #fff; |
|
|
|
background-image: none; |
|
|
|
height: 44px; |
|
|
|
} |
|
|
|
.exchange-store .btn-danger, |
|
|
|
.exchange-store .btn-danger:hover{ |
|
|
|
background-color: #BB4965; |
|
|
|
border-color: #BB4965; |
|
|
|
border-radius: 100px; |
|
|
|
color: #fff; |
|
|
|
background-image: none; |
|
|
|
height: 44px; |
|
|
|
} |
|
|
|
.color_7c{ |
|
|
|
color: #7c7c7c !important; |
|
|
|
} |
|
|
|
.exchange-store .input-group-text{ |
|
|
|
background-color: #F2F2F2; |
|
|
|
color: #999999; |
|
|
|
border-color: #D3D3D3 !important; |
|
|
|
} |
|
|
|
.exchange-store .form-control{ |
|
|
|
height: 44px !important; |
|
|
|
border-color: #D3D3D3 !important; |
|
|
|
} |
|
|
|
.el-icon-sort:before{ |
|
|
|
color: #2C60DC; |
|
|
|
::v-deep .el-slider__button-wrapper{ |
|
|
|
// background-color: ; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
</style> |
