<template>
|
<div class="DeliveryContractHistory">
|
<fx-header>
|
<template #title>{{ $t('交割合约历史') }}</template>
|
</fx-header>
|
<div>
|
<van-tabs ref="tabs" v-model:active="tabType" swipeable sticky @change="onChange">
|
<van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.tabType">
|
<van-list v-model:loading="loading" :loading-text="$t('loading')" :finished="finished"
|
:finished-text="dataList[tabType].length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="30" class="px-16">
|
<futrue-hold-list v-if="tabType === 'orders'" :list-data="dataList.orders">
|
</futrue-hold-list>
|
<futrue-histroy-position v-else :list-data="dataList.hisorders"></futrue-histroy-position>
|
<div class="flex flex-col justify-center pt-25 pb-10 items-center"
|
v-if="!dataList[tabType].length && !loading">
|
<img src="@/assets/image/assets-center/no-data.png" alt="" class="w-90 h-90" />
|
<p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
|
</div>
|
</van-list>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { List, Tab, Tabs } from 'vant';
|
import futrueHoldList from '@/views/foreign/deliveryContract/hold.vue'
|
import futrueHistroyPosition from '@/views/foreign/deliveryContract/position.vue'
|
import { _futrueOrderList } from "@/service/trade.api.js";
|
import { ref, onMounted } from 'vue';
|
import { useRouter, useRoute } from "vue-router";
|
import { useI18n } from "vue-i18n";
|
const { t } = useI18n()
|
const router = useRouter()
|
const route = useRoute()
|
|
let tabType = ref("orders")
|
let dataList = ref(
|
{
|
orders: [],
|
hisorders: []
|
}
|
)
|
let symbol = ref('')
|
let selectData = ref(
|
[
|
{ title: t('持有仓位'), tabType: 'orders' },
|
{ title: t('历史仓位'), tabType: 'hisorders' },
|
],
|
)
|
|
let loading = ref(false)
|
let finished = ref(false)
|
let page = ref(1)
|
|
|
onMounted(() => {
|
symbol.value = route.query.symbol
|
})
|
|
const onChange = (e) => {
|
dataList.value[e] = []
|
finished.value = false
|
page.value = 1
|
tabType.value = e
|
loading.value = true;
|
if (loading.value) {
|
fetchData(symbol.value, tabType.value)
|
}
|
}
|
|
const fetchData = (currentSymbol) => {
|
// TODO: 分页
|
_futrueOrderList(currentSymbol, tabType.value, page.value).then(data => {
|
dataList.value[tabType.value] = dataList.value[tabType.value].concat(data)
|
loading.value = false
|
if (data.length < 10) {
|
finished.value = true
|
}
|
page.value++
|
})
|
}
|
|
const onLoad = () => {
|
fetchData(symbol.value, tabType.value)
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
@import '@/assets/css/copy.scss';
|
|
.DeliveryContractHistory {
|
width: 100%;
|
box-sizing: border-box;
|
|
.position-padding {
|
//border-bottom: 1px solid #F2F4F9;
|
padding: 17px;
|
box-sizing: border-box;
|
width: 100%;
|
float: left;
|
|
.position-tag {
|
display: flex;
|
align-items: center;
|
|
.position-tag-style {
|
padding: 5px 14px;
|
margin-right: 11px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 14px;
|
color: $text_color;
|
}
|
|
.position-tag-title {
|
font-style: normal;
|
font-weight: 600;
|
font-size: 15px;
|
margin-right: 7px;
|
}
|
|
.position-tag-title2 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 15px;
|
color: $text_color5;
|
}
|
|
.position-tag-img {
|
margin-left: 5px;
|
width: 20px;
|
height: 16px;
|
}
|
}
|
|
.red {
|
background: $red;
|
border-radius: 3px;
|
}
|
|
.green {
|
background: $green;
|
border-radius: 3px;
|
}
|
|
.position-div1 {
|
margin-top: 17px;
|
width: 100%;
|
float: left;
|
|
.position-text1 {
|
float: left;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 15px;
|
color: $text_color5;
|
}
|
|
.position-text2 {
|
float: right;
|
font-style: normal;
|
font-weight: 600;
|
font-size: 15px;
|
}
|
|
.position-text3 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 15px;
|
}
|
}
|
}
|
|
.color-red {
|
color: $red !important;
|
}
|
|
.color-green {
|
color: $green !important;
|
}
|
|
.color-blue {
|
color: $color_main !important;
|
}
|
|
:deep(.van-tabs__nav) {
|
background: transparent;
|
}
|
|
:deep(.van-tab--active) {
|
color: $text_color;
|
background-color: $color_main;
|
border-radius: 4px;
|
}
|
|
:deep(.van-tabs__line) {
|
display: none;
|
}
|
|
:deep(.van-tabs__wrap) {
|
padding: 0 10px;
|
}
|
|
}</style>
|
