<template>
|
<!-- 永续合约订单列表页 -->
|
<div>
|
<div class="items-center mt-18 box-show">
|
<div class="flex justify-between pt-20">
|
<div class="flex pb-10 ml-30">
|
<template v-if="topIndex / 1 === 1">
|
<!-- <div class="w-280 flex flex-col items-center textColor1" @click="tabClick('1')" :class="type=='1'?'active-line':''">{{ $t('当前委托') }}</div>
|
<div class="w-280 flex flex-col items-center ml-30 textColor1" @click="tabClick('2')" :class="type=='2'?'active-line':''">{{ $t('持有仓位') }}</div> -->
|
<div
|
class="px-10 py-10 flex items-center"
|
@click="tabClick('1')"
|
:class="type == '1' ? 'active-line' : 'newcolor1'"
|
>
|
{{ $t("持有仓位")
|
}}<span v-if="type == '1'">({{ orderHold.length }})</span>
|
</div>
|
<div
|
class="px-10 ml-50 py-10 flex items-center"
|
@click="tabClick('2')"
|
:class="type == '2' ? 'active-line' : 'newcolor1'"
|
>
|
{{ $t("当前委托") }}
|
</div>
|
</template>
|
<template v-else>
|
<div
|
class="px-10 py-10 flex items-center text-grey"
|
@click="tabClick('3')"
|
:class="type == '3' ? 'active-line' : ''"
|
>
|
{{ $t("持有仓位")
|
}}<span v-if="type == '2'">({{ orderCur.length }})</span>
|
</div>
|
<div
|
class="px-10 ml-50 py-10 flex items-center text-grey"
|
@click="tabClick('4')"
|
:class="type == '4' ? 'active-line' : ''"
|
>
|
{{ $t("历史仓位") }}
|
</div>
|
</template>
|
</div>
|
<img
|
src="../../assets/image/public/record.png"
|
alt="record-img"
|
class="w-32 h-35 pr-30 py-15"
|
@click="goHistory"
|
/>
|
</div>
|
<!-- 永续-->
|
<template v-if="topIndex / 1 === 1">
|
<!-- 委托列表 -->
|
<div v-if="type == '1'">
|
<!-- <PerpetualEntrustList :list-data="orderCur" @recall="$emit('recall', $event)"></PerpetualEntrustList> -->
|
<PerpetualPositionList
|
:list-data="orderHold"
|
@sell="$emit('recall', $event)"
|
></PerpetualPositionList>
|
</div>
|
<!-- 持有仓位列表 -->
|
<div v-if="type == '2'">
|
<!-- <PerpetualPositionList :list-data="orderHold" @sell="$emit('recall', $event)"></PerpetualPositionList> -->
|
<PerpetualEntrustList
|
:list-data="orderCur"
|
@recall="$emit('recall', $event)"
|
></PerpetualEntrustList>
|
</div>
|
</template>
|
<!-- 交割-->
|
<template v-else>
|
<div v-if="type == '3'">
|
<futrue-hold-list :price="price" :list-data="futrueHold" />
|
</div>
|
<div v-if="type == '4'">
|
<futrue-histroy-position :list-data="futrueHistroy" />
|
</div>
|
</template>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PerpetualEntrustList from "../perpetual-entrust-list/index.vue";
|
import PerpetualPositionList from "../perpetual-position-list/index.vue";
|
import futrueHoldList from "@/page/deliveryContract/hold.vue";
|
import futrueHistroyPosition from "@/page/deliveryContract/position.vue";
|
|
export default {
|
name: "perpetualOrder",
|
data() {
|
return {
|
type: "1", // 1：永续持有，2：永续当前，3：交割持有，4：交割历史
|
};
|
},
|
props: {
|
topIndex: {
|
type: [Number, String],
|
default: 1,
|
},
|
symbol: {
|
type: String,
|
default: "",
|
},
|
orderCur: {
|
//
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
orderHold: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
futrueHold: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
futrueHistroy: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
price: {
|
type: [Number, String],
|
default: "0.00",
|
},
|
},
|
watch: {
|
topIndex(val) {
|
if (val / 1 === 1) {
|
this.type = "1";
|
this.tabClick("1");
|
} else {
|
this.type = "3";
|
this.tabClick("3");
|
}
|
},
|
},
|
mounted() {
|
if (this.topIndex == 1) {
|
this.type = "1";
|
this.tabClick("1");
|
} else {
|
this.type = "3";
|
this.tabClick("3");
|
}
|
},
|
activated() {
|
if (this.topIndex == 1) {
|
this.type = "1";
|
this.tabClick("1");
|
} else {
|
this.type = "3";
|
this.tabClick("3");
|
}
|
},
|
methods: {
|
tabClick(type) {
|
this.type = type;
|
if (type == "1") {
|
// && !this.orderCur.length
|
//this.$emit('tab', 'fetchOrderListCur')
|
this.$emit("tab", "fetchOrderListHold");
|
}
|
if (type === "2") {
|
// && !this.orderHold.length
|
//this.$emit('tab', 'fetchOrderListHold')
|
this.$emit("tab", "fetchOrderListCur");
|
}
|
if (type === "3") {
|
this.$emit("tab", "fetchFutrueHoldList");
|
}
|
if (type === "4") {
|
this.$emit("tab", "fetchFutrueHistory");
|
}
|
// this.$emit(type)
|
},
|
goHistory() {
|
const url =
|
this.topIndex / 1 === 1
|
? "perpetualHistory"
|
: "deliveryContractHistory";
|
this.$router.push({
|
path: `/${url}?symbol=${this.symbol}`,
|
});
|
},
|
},
|
components: {
|
PerpetualEntrustList,
|
PerpetualPositionList,
|
futrueHistroyPosition,
|
futrueHoldList,
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
.all-cancel-btn {
|
background-color: #eaebef;
|
}
|
|
.cancel-btn {
|
background-color: #eaebef;
|
}
|
|
.active-line {
|
position: relative;
|
// padding: 15px 0;
|
color: $newcolor !important;
|
}
|
|
// .active-line::after{
|
// content: '';
|
// position: absolute;
|
// left: 0px;
|
// bottom: 0;
|
// right: 0;
|
// width: 280px;
|
// height: 4px;
|
// @include themify() {
|
// background-color: themed("color_main");
|
// }
|
// }
|
.textColor1 {
|
color: #fff;
|
}
|
</style>
|
