<template>
|
<!-- 永续合约订单列表页 -->
|
<div>
|
<div class="items-center mt-18">
|
<div class="flex justify-between border-b-color">
|
<div class="flex pb-10">
|
<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 text-grey" @click="tabClick('1')"
|
:class="type == '1' ? 'active-line' : ''">{{ $t('持有仓位') }}<span v-if="type == '1'">({{
|
orderHold.length }})</span></div>
|
<div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('2')"
|
:class="type == '2' ? 'active-line' : ''">{{ $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
|
}})111</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>
|
.all-cancel-btn {
|
background-color: #EAEBEF;
|
}
|
|
.cancel-btn {
|
background-color: #EAEBEF;
|
}
|
|
.active-line {
|
position: relative;
|
// padding: 15px 0;
|
color: #fff;
|
|
@include themify() {
|
background-color: themed("color_main");
|
}
|
}
|
|
// .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>
|
