<template>
|
<div class="contract">
|
<div class="flex justify-between box-border px-30 mt-43">
|
<div
|
@click="onTap(0)"
|
:class="{ active: tapIndex === 0 }"
|
class="w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20"
|
>
|
{{ $t("永续合约") }}
|
</div>
|
<!-- <div @click="onTap(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center">
|
{{ $t('交割合约') }}</div> -->
|
</div>
|
<div>
|
<div class="box-border px-30 mt-42">
|
<div class="flex justify-between text-grey relative">
|
<div class="flex">
|
<span class="text-grey font-30">{{ $t("总资产") }}（USDT）</span>
|
<div @click.stop="changeEyes">
|
<img
|
:src="require('../../assets/image/assets-center/eye-open.png')"
|
class="w-32 h-18"
|
v-show="!eyetel"
|
/>
|
<img
|
:src="require('../../assets/image/assets-center/eye-close.png')"
|
class="w-32 h-18"
|
v-show="eyetel"
|
/>
|
</div>
|
</div>
|
<div class="right-clock">
|
<img
|
@click="goHistory"
|
:src="require('../../assets/image/assets-center/Subtract.png')"
|
class="w-44 h-38"
|
/>
|
</div>
|
</div>
|
<div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
|
{{ tapIndex === 0 ? funds.money_contract : funds.money_futures }}
|
<span class="font-39 text-grey"
|
>≈{{ currency.currency_symbol
|
}}{{
|
funds.money_contract
|
? (
|
(tapIndex === 0
|
? funds.money_contract
|
: funds.money_futures) * currency.rate
|
).toFixed(2)
|
: " --"
|
}}</span
|
>
|
</div>
|
<div class="font-70 font-66 mt-18 textColor" v-else>********</div>
|
<div class="flex font-26 lh-32 mb-35 mt-40">
|
<div class="flex flex-col">
|
<div>
|
{{
|
tapIndex === 0 ? $t("保证金余额") : $t("全部未实现盈亏")
|
}}（USDT）
|
</div>
|
<template v-if="!eyetel">
|
<div class="font-40 mt-17 mb-9 textColor">
|
{{
|
tapIndex === 0
|
? funds.money_contract_deposit
|
: funds.money_futures_profit
|
}}
|
</div>
|
<div>
|
≈{{ currency.currency_symbol
|
}}{{
|
funds.money_contract_deposit
|
? (
|
(tapIndex === 0
|
? funds.money_contract_deposit
|
: funds.money_futures_profit) * currency.rate
|
).toFixed(2)
|
: " --"
|
}}
|
</div>
|
</template>
|
<template v-else>
|
<div class="font-40 mt-17 mb-9 textColor">*********</div>
|
</template>
|
</div>
|
<div class="flex flex-col ml-110">
|
<div>{{ $t("钱包余额(USDT)") }}</div>
|
<template v-if="!eyetel">
|
<div class="font-40 mt-17 mb-9 textColor">
|
{{ funds.money_wallet }}
|
</div>
|
<div>
|
≈{{ currency.currency_symbol
|
}}{{
|
funds.money_wallet
|
? (funds.money_wallet * currency.rate).toFixed(2)
|
: " --"
|
}}
|
</div>
|
</template>
|
<template v-else>
|
<div class="font-40 mt-17 mb-9 textColor">*********</div>
|
</template>
|
</div>
|
</div>
|
<div v-if="tapIndex === 0" class="flex flex-col lh-32 mb-35">
|
<template v-if="!eyetel">
|
<div>{{ $t("全部未实现盈亏") }}（USDT）</div>
|
<div class="font-40 mt-17 mb-9 textColor">
|
{{ funds.money_contract_profit }}
|
</div>
|
<div>
|
≈{{ currency.currency_symbol
|
}}{{
|
funds.money_contract_profit
|
? (funds.money_contract_profit * currency.rate).toFixed(2)
|
: " --"
|
}}
|
</div>
|
</template>
|
<template v-else>
|
<div class="font-40 mt-17 mb-9 textColor">*********</div>
|
</template>
|
</div>
|
</div>
|
<div class="w-full h-13 contBackground"></div>
|
<!--永续合约持有仓位-->
|
<div class="px-30">
|
<template v-if="tapIndex === 0">
|
<PerpetualPositionList
|
:list-data="orderHold"
|
@sell="onRecall"
|
></PerpetualPositionList>
|
</template>
|
<!--交割合约持有仓位-->
|
<template v-else>
|
<futrue-hold-list :list-data="futrueHold" />
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Axios from "@/API/assets";
|
import { mapGetters } from "vuex";
|
import PerpetualPositionList from "../perpetual-position-list/index.vue";
|
import futrueHoldList from "@/page/deliveryContract/hold.vue";
|
import { _futrueOrderList, _orderListHold } from "@/API/trade.api";
|
export default {
|
name: "contract",
|
components: {
|
PerpetualPositionList,
|
futrueHoldList,
|
},
|
data() {
|
return {
|
orderHold: [], // 永续持有仓位
|
futrueHold: [], // 交割持有仓位
|
tapIndex: 0,
|
eyetel: false,
|
total: "",
|
timer: null,
|
timer2: null,
|
};
|
},
|
props: ["funds", "index"],
|
computed: {
|
...mapGetters("home", ["currency"]),
|
},
|
watch: {
|
index: {
|
handler: function (val) {
|
console.log(val);
|
this.tapIndex = val / 1;
|
},
|
immediate: true,
|
},
|
},
|
created() {
|
this.fetch();
|
},
|
methods: {
|
goHistory() {
|
if (this.tapIndex === 0) {
|
this.$router.push({ path: "/perpetualHistory", query: { goback: 1 } });
|
} else {
|
this.$router.push({
|
path: "/deliveryContractHistory",
|
query: { goback: 1 },
|
});
|
}
|
},
|
onTap(index) {
|
this.tapIndex = index;
|
this.fetch();
|
},
|
fetch() {
|
this.clearTimer();
|
if (this.tapIndex === 0) {
|
this.fetchOrderListHold();
|
} else {
|
this.fetchFutrueHoldList();
|
}
|
},
|
onRecall() {
|
// 撤单or 平仓 evt
|
// this.clearTimer()
|
// this[this.curTab](this.symbol)
|
// this.fetchOrderListHold()
|
},
|
clearTimer() {
|
clearInterval(this.timer);
|
clearInterval(this.timer2);
|
this.timer = null;
|
this.timer2 = null;
|
},
|
fetchOrderListHold() {
|
// 获取永续当前持仓
|
_orderListHold().then((data) => {
|
this.orderHold = data;
|
});
|
this.timer = setInterval(() => {
|
_orderListHold().then((data) => {
|
this.orderHold = data;
|
});
|
}, 2000);
|
},
|
fetchFutrueHoldList() {
|
// 获取交割当前持仓
|
_futrueOrderList().then((data) => {
|
this.futrueHold = data;
|
});
|
console.log("fetchFutrueHoldList");
|
this.timer2 = setInterval(() => {
|
_futrueOrderList().then((data) => {
|
this.futrueHold = data;
|
});
|
}, 2000);
|
},
|
changeEyes() {
|
console.log("666");
|
this.eyetel = !this.eyetel;
|
},
|
getData() {
|
Axios.GetAllAssets().then((res) => {
|
if (res.code == 0) {
|
this.total = res.data.total;
|
this.status = res.data.status;
|
}
|
});
|
},
|
},
|
beforeDestroy() {
|
this.clearTimer();
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.w-370 {
|
border: 1px solid #eaedf2;
|
color: #868d9a;
|
}
|
|
.active {
|
color: #ffffff;
|
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
@include themify() {
|
border-color: themed("btn_main");
|
}
|
}
|
|
.lh-32 {
|
color: #848e9c;
|
}
|
|
.font-40 {
|
font-weight: 700;
|
}
|
|
.cl {
|
color: #333333;
|
background: #ebecf0;
|
}
|
|
.mr-13 {
|
font-weight: 600;
|
color: #333333;
|
}
|
|
.col {
|
color: #848e9c;
|
}
|
|
.num {
|
font-weight: 600;
|
color: #333333;
|
}
|
|
.font-4 {
|
font-weight: 400;
|
color: #333333;
|
}
|
|
.blue {
|
color: #1d91ff;
|
}
|
|
.active_green {
|
color: #2ebd85;
|
}
|
|
.active_red {
|
color: #ff3e3e;
|
}
|
|
.active_tab1 {
|
background: #ff3e3e;
|
color: #ffffff;
|
}
|
|
.active_tab2 {
|
background: #2ebd85;
|
color: #ffffff;
|
}
|
|
.font-6 {
|
font-weight: 600;
|
}
|
</style>
|
