You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

765 lines
23 KiB

<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 #2e2e2e;">
<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: #2e2e2e;width:50%;text-align: center;">
<a class="nav-link" @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" style="background-color: #2e2e2e;width:50%;text-align: center;">
<el-popover style="display: block;width: 100%;"
placement="bottom"
width="100"
v-model="visible"
trigger="manual"
>
<div
class="rounded border p-1 bg-black 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"
>
{{ 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="input-group-prepend">
<span class="input-group-text">{{ $t("contract.d8") }}</span>
</div>
<template v-if="form.type == 1">
<input
type="number"
v-model="buyform.entrust_price"
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"
@input="inputEnter(false)"
title=""
/>
<!-- <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
v-model="activeStepBuy"
@change="sliderChangeBuy"
:format-tooltip="tooltip"
:marks="marks"
:step="25"
></el-slider>
</div>
<div class="d-flex justify-content-between mb-3 color_7c fn-10">
<div>0</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">
<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">
<span class="input-group-text">{{ $t("contract.d8") }}</span>
</div>
<template v-if="form.type == 1">
<input
type="number"
v-model="sellform.entrust_price"
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="marginSell"
:placeholder="tips"
@input="inputEnter(true)"
title=""
/>
<!-- <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" -->
<el-slider
v-model="activeStepSell"
@change="sliderChangeSell"
:format-tooltip="tooltip"
:marks="marks"
:step="25"
></el-slider>
</div>
<div class="d-flex justify-content-between mb-3 color_7c fn-10">
<div>0</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>{{ accountInfo.account_equity }}</div> -->
<div>{{ maxNum }}</div>
</div>
<div class="d-flex justify-content-between mb-3">
<div class="color_7c">{{ $t("contract.e1") }}</div>
<div>{{ amountSell }} </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 class="d-flex mb-4 border-top py-2">
<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>
<input
type="number"
class="form-control"
v-model="sellform.pri2"
:placeholder="tips"
/>
</div>
</template>
</div>
<div class="exchange_button" v-if="tab == 1" style="width: 100%;">
<div class="px-3 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") }}{{ symbol }}
<!-- {{ $t("contract.d0") }} -->
<!-- <span class="fn-12"> ({{ $t("contract.e6") }}) </span> -->
</button>
</div>
<div class="px-3 flex-fill">
<button
@click="ifOpenPosition(2)"
type="button"
class="sub w-24/24 btn-danger btn btn-sm mb-3"
>
{{ $t("contract.d2") }}{{ symbol }}
<!-- {{ $t("contract.d2") }} -->
<!-- <span class="fn-12"> ({{ $t("contract.e8") }}) </span> -->
</button>
<!-- <div class="text-center"> -->
</div>
</div>
<div class="" v-if="tab == 2" style="width: 100%;">
<div class="px-2 flex-fill mb-4">
<button
@click="ifOpenPosition(1)"
type="button"
class="sub w-24/24 btn-success btn btn-sm"
>
{{ $t("contract.d3") }}
</button>
<div class="text-center">
{{ $t("contract.e9") }} {{ canMore }} {{ $t("contract.e2") }}
</div>
</div>
<div class="px-2 flex-fill">
<button
@click="ifOpenPosition(2)"
type="button"
class="sub w-24/24 btn-danger btn btn-sm"
>
{{ $t("contract.d1") }}
</button>
<div class="text-center">
{{ $t("contract.e9") }} {{ canEmpty }} {{ $t("contract.e2") }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Contract from "@/api/contract.js";
import date from "@/utils/class/date.js";
import math from "@/utils/class/math.js";
export default {
data() {
return {
tab: 1,
visible: false,
form: {
type: 2,//2市价1限价
lever_rate: ""
},
buyform: {
entrust_price: undefined,
amount:"",
pri1: "",//止盈触发价
pri2: ""//止损触发价
},
sellform: {
entrust_price: undefined,
amount:"",
pri1: "",//止盈触发价
pri2: ""//止损触发价
},
// 最多可开张数
maxNum: 0,
lever_rage: [],
accountInfo: {},
_time: null,
unit_amount:0,
marks:{
25:'',
50:'',
75:''
},
marginBuy:0,
marginSell:0,
checkboxBuy: false,
checkboxSell: false,
activeStepBuy:0,
activeStepSell:0
};
},
props: {
symbol: {
default: "",
type: String,
required: false
},
holdPositionList: {
default: () => [],
type: Array,
required: false
},
defaultPrice: {
default: "",
type: String | Number,
required: false
},
newPriceObj: {
default: () => {},
type: Object,
required: false
},
contractOpen: {}
},
watch: {
symbol() {
this.buyform.entrust_price = undefined;
this.sellform.entrust_price = undefined;
this.contractAccount();
this.getSymbolDetail();
},
defaultPrice(n) {
this.buyform.entrust_price = n;
this.sellform.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;
}
},
contractOpen(n, o) {
if (n != o) {
this.contractAccount();
}
}
},
destroyed() {
clearInterval(this._time);
},
mounted() {
if (this.symbol) {
this.contractAccount();
this.getSymbolDetail();
}
this._time = setInterval(() => {
if (this.symbol) {
// if (this.contractOpen) {
this.contractAccount(true);
// }
}
}, 3000);
},
computed: {
tips(){
// return this.unit_amount?(`${this.unit_amount}USDT`):''
return this.unit_amount?(`USDT`):''
},
isLogin() {
return Boolean(localStorage.token);
},
// 多仓持仓
multiplePositions() {
let item = this.holdPositionList.find(item => item.side == 1);
if (!item) return 0;
return item.hold_position;
},
// 可平多
canMore() {
let item = this.holdPositionList.find(item => item.side == 1);
if (!item) return 0;
return item.avail_position;
},
// 空仓持仓
shortPosition() {
let item = this.holdPositionList.find(item => item.side == 2);
if (!item) return 0;
return item.hold_position;
},
// 可以平空
canEmpty() {
let item = this.holdPositionList.find(item => item.side == 2);
if (!item) return 0;
return item.avail_position;
},
// activeStepBuy() {
// if (!this.buyform.amount || !this.maxNum) return 0;
// let num = (this.buyform.amount / this.maxNum) * 100;
// return num;
// },
// activeStepSell() {
// if (!this.sellform.amount || !this.maxNum) return 0;
// let num = (this.sellform.amount / this.maxNum) * 100;
// return num;
// },
// 保证金
// margin() {
// if (!this.form.lever_rate) return '';
// return math.omitTo(this.form.amount*this.unit_amount / this.form.lever_rate, 4);
// },
amountBuy(){
// console.info(this.form.lever_rate)
// console.info(this.margin)
if (!this.form.lever_rate || !this.marginBuy) return 0;
let p = Math.round(this.marginBuy*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 = Math.round(this.marginSell*this.form.lever_rate);
this.sellform.amount=p;
return p
}
},
methods: {
inputEnter(boll) {
if(boll){
this.marginSell = this.marginSell
.replace(/[^\d.]/g, "") // 移除非数字、非小数点的字符
.replace(/^(\d*\.?\d{0,2}).*$/, "$1"); // 限制最多两位小数
}else{
this.marginBuy = this.marginBuy
.replace(/[^\d.]/g, "") // 移除非数字、非小数点的字符
.replace(/^(\d*\.?\d{0,2}).*$/, "$1"); // 限制最多两位小数
}
},
// 获取合约账户信息
contractAccount(boo) {
if (!this.isLogin) return;
// if (!this.contractOpen) return;
let data = {
symbol: this.symbol
};
Contract.contractAccount(data).then(res => {
this.accountInfo = res;
this.$emit("accountInfo", res);
// if (!this.form.lever_rate) {
// this.form.lever_rate = res.lever_rate;
// }
if (this.form.lever_rate) {
this.openNum();
}
});
},
// 获取可开启张数
openNum() {
if (!this.isLogin) return;
let data = {
symbol: this.symbol, //ETH
lever_rate: this.form.lever_rate //10
};
Contract.openNum(data).then(res => {
this.maxNum = res;
});
},
// 获取合约详情
getSymbolDetail() {
let data = {
symbol: this.symbol
};
Contract.getSymbolDetail(data).then(res => {
this.lever_rage = res.lever_rage;
this.unit_amount = res.unit_amount
this.$emit('getSymbolDetail',res)
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
},
// 选择杠杆
selectLever(idx) {
this.form.lever_rate = idx;
this.openNum();
},
tooltip($ev) {
return Math.round($ev) + "%";
},
// 提示
ifOpenPosition(side) {
if (this.tab == 1) {
this.openPosition(side);
} else {
this.closePosition(side);
}
// let typeStr =
// this.form.type == 1
// ? `${this.form.entrust_price}${this.$t("contract.f0")}`
// : this.$t("contract.d9");
// let decStr =
// this.tab == 1
// ? `${this.$t("contract.d5")}${this.form.amount}${this.$t(
// "contract.e2"
// )}${side == 1 ? this.$t("contract.f1") : this.$t("contract.f2")}`
// : `${this.$t("contract.d6")}${this.form.amount}${this.$t(
// "contract.e2"
// )}`;
// `${this.$t("contract.f3")}${typeStr}${this.form.lever_rate}${this.$t(
// "contract.f4"
// )}${decStr}?`
// this.$confirm(
// `${this.$t("contract.f3")}${typeStr}${this.form.lever_rate}
// ${this.$t("contract.f4")}${this.$t("contract.d5")}?`
// )
// .then(res => {
// if (this.tab == 1) {
// this.openPosition(side);
// } else {
// this.closePosition(side);
// }
// })
// .catch(res => {});
},
// 开仓
openPosition(side) {
let data = {
side,
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;
}
if(side==1&&this.checkboxBuy){
data.tp_trigger_price = this.buyform.pri1;
data.sl_trigger_price = this.buyform.pri2;
}else{
data.tp_trigger_price = this.sellform.pri1;
data.sl_trigger_price = this.sellform.pri2;
}
Contract.openPosition(data).then(() => {
if(side==1&&this.checkboxBuy){
this.buyform.pri1 = "";
this.buyform.pri2 = "";
}else{
this.sellform.pri1 = "";
this.sellform.pri2 = "";
}
this.contractAccount();
this.buyform.amount = 0;
this.sellform.amount = 0;
this.marginBuy = 0;
this.marginSell = 0;
this.$message.success(this.$t("contract.f5"));
this.$emit("position");
});
},
// 平仓-买卖分表单后未处理平仓的表单数据
closePosition(side) {
let data = {
side: side == 1 ? 2 : 1,
type: this.form.type,
symbol: this.symbol,
entrust_price: this.form.entrust_price || 0,
amount: this.form.amount
};
Contract.closePosition(data).then(() => {
this.form.amount = "";
this.contractAccount();
this.$message.success(this.$t("contract.f6"));
this.$emit("position");
});
}
}
};
</script>
<style scoped="scoped">
.exchange_button{
display: flex;
font-size: 16px !important;
}
.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: transparent;
color: #E4E5E4;
border-color: #404040;
}
.exchange-store .form-control{
height: 44px !important;
border-color: #404040;
}
.el-icon-sort:before{
color: #2C60DC;
}
</style>