<template>
|
<!-- 永续合约订单列表页 -->
|
<div class="perpetual-order">
|
<div class="items-center mt-18">
|
<div class="flex justify-between items-center border-b-color">
|
<div class="flex items-center">
|
<div class="w-140 py-5 flex flex-col items-center textColor1" @click="tabClick('3')"
|
:class="type == '3' ? 'active-line' : ''">{{ $t('持有仓位') }}</div>
|
<div class="ml-15 py-5 text-grey w-140 flex flex-col items-center textColor1" @click="tabClick('4')"
|
:class="type == '4' ? 'active-line' : ''">{{ $t('历史仓位') }}</div>
|
</div>
|
<img src="@/assets/image/public/record.png" alt="record-img" class="w-17 h-18 mr-15 "
|
@click="goHistory" />
|
</div>
|
<!-- 交割-->
|
<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>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import futrueHoldList from '@/views/foreign/deliveryContract/hold.vue'
|
import futrueHistroyPosition from '@/views/foreign/deliveryContract/position.vue'
|
import { ref, onMounted, onActivated, onDeactivated, onBeforeUnmount } from 'vue';
|
import { useRouter } from "vue-router";
|
const router = useRouter()
|
const emits = defineEmits(['tab'])
|
|
let type = ref('')
|
const props = defineProps({
|
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'
|
},
|
})
|
|
onMounted(() => {
|
type.value = '3'
|
tabClick('3')
|
})
|
|
onActivated(() => {
|
type.value = '3'
|
this.tabClick('3')
|
})
|
|
const tabClick = (types) => {
|
type.value = types;
|
if (types == '1') { // && !this.orderCur.length
|
emits('tab', 'fetchOrderListHold')
|
}
|
if (types === '2') { // && !this.orderHold.length
|
//emits('tab', 'fetchOrderListHold')
|
emits('tab', 'fetchOrderListCur')
|
}
|
if (types === '3') {
|
emits('tab', 'fetchFutrueHoldList')
|
}
|
if (types === '4') {
|
emits('tab', 'fetchFutrueHistory')
|
}
|
}
|
const goHistory = () => {
|
router.push({
|
path: `/foreign/ForexDeliveryContractHistory`,
|
query: {
|
symbol: props.symbol
|
}
|
});
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/css/copy.scss';
|
.perpetual-order{
|
font-size: 14px;
|
}
|
|
.all-cancel-btn {
|
background-color: #EAEBEF;
|
}
|
|
.cancel-btn {
|
background-color: #EAEBEF;
|
}
|
|
.active-line {
|
position: relative;
|
// padding: 15px 0;
|
color: $text_color;
|
background-color: $color_main;
|
border-radius: 4px;
|
}
|
|
.active-line::after {
|
content: '';
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
bottom: 0;
|
right: 0;
|
width: 140px;
|
height: 8px;
|
background-color: $color_main;
|
}
|
.border-b-color{
|
border-bottom: 1px solid $border_color;
|
}
|
</style>
|
