<template>
|
<!-- U本位合约历史 -->
|
<div class="perpetualHistory">
|
<assets-head
|
:title="$t('委托订单')"
|
:backFunc="
|
() => {
|
if ($route.query.goback) {
|
$router.push({
|
path: '/funds',
|
query: {
|
tab: 2,
|
index: 0, // 0: 查看理财订单 1: 矿机
|
},
|
});
|
} else {
|
//$router.push(`/perpetualContract/${symbol}?selectIndex=1`)
|
$router.go(-1);
|
}
|
}
|
"
|
/>
|
<div>
|
<van-tabs ref="tabs" v-model="type" @change="onChange">
|
<van-tab
|
:title="item.title"
|
v-for="item in selectData"
|
:key="item.title"
|
:name="item.type"
|
>
|
<template v-if="type === 'orders'">
|
<van-list
|
v-model="loading"
|
:loading-text="$t('加载中...')"
|
:finished="finished"
|
:finished-text="
|
dataList.orders.length ? $t('已经全部加载完毕') : ''
|
"
|
@load="onLoad"
|
:offset="130"
|
>
|
<PerpetualEntrustList
|
v-if="type === 'orders'"
|
:list-data="dataList.orders"
|
@recall="recall"
|
>
|
</PerpetualEntrustList>
|
<div
|
class="flex flex-col justify-center pt-50 pb-20 items-center"
|
v-if="!dataList.orders.length && !loading"
|
>
|
<!-- <img
|
src="@/assets/image/assets-center/no-data.png"
|
alt=""
|
class="w-180 h-180"
|
/> -->
|
<!-- <p class="text-grey mt-10">{{ $t("暂无记录") }}</p> -->
|
</div>
|
</van-list>
|
</template>
|
|
<template v-if="type === 'hisorders'">
|
<van-list
|
v-model="loading"
|
:loading-text="$t('加载中...')"
|
:finished="finished"
|
:finished-text="
|
dataList.hisorders.length ? $t('已经全部加载完毕') : ''
|
"
|
@load="onLoad"
|
:offset="130"
|
>
|
<PerpetualHistoryPosition
|
:list-data="dataList.hisorders"
|
></PerpetualHistoryPosition>
|
<div
|
class="flex flex-col justify-center pt-50 pb-20 items-center"
|
v-if="!dataList.hisorders.length && !loading"
|
>
|
<img
|
src="@/assets/image/assets-center/no-data.png"
|
alt=""
|
class="w-180 h-180"
|
/>
|
<p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
|
</div>
|
</van-list>
|
</template>
|
|
<div v-if="type === 'position'">
|
<PerpetualPositionList
|
:list-data="orderHold"
|
></PerpetualPositionList>
|
</div>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import PerpetualEntrustList from "@/components/perpetual-entrust-list/index.vue";
|
import PerpetualHistoryPosition from "@/components/perpetual-history-position/index.vue";
|
import PerpetualPositionList from "@/components/perpetual-position-list/index.vue";
|
import { _orderListCur, _orderListHold } from "@/API/trade.api";
|
import { _getCoins } from "@/API/home.api";
|
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from "vant";
|
export default {
|
data() {
|
return {
|
type: "orders",
|
orderHold: [], // 永续持有仓位
|
dataList: {
|
orders: [],
|
hisorders: [],
|
},
|
isAll: false,
|
symbol: "",
|
selectData: [
|
{
|
title: this.$t("当前委托"),
|
type: "orders",
|
},
|
{
|
title: this.$t("历史委托"),
|
type: "hisorders",
|
},
|
{
|
title: this.$t("当前持仓"),
|
type: "position",
|
},
|
],
|
loading: false,
|
finished: false,
|
page: 1,
|
pollTimer: null,
|
};
|
},
|
mounted() {
|
this.getCoins();
|
// this.symbol = this.$route.query.symbol;
|
},
|
watch: {
|
type(newVal) {
|
if (newVal === "position") {
|
this.startPolling();
|
} else {
|
this.stopPolling();
|
}
|
},
|
},
|
beforeDestroy() {
|
this.stopPolling();
|
},
|
methods: {
|
getCoins() {
|
_getCoins().then((res) => {
|
console.log(res);
|
this.currencyList = res;
|
});
|
},
|
onChange(e) {
|
this.dataList[e] = [];
|
this.finished = false;
|
this.page = 1;
|
this.type = e;
|
this.loading = true;
|
if (this.loading) {
|
this.fetchList(this.symbol);
|
}
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
startPolling() {
|
if (this.pollTimer) return;
|
this.pollTimer = setInterval(() => {
|
this.fetchList(); // 你的轮询方法
|
}, 1500); // 3秒轮询一次，可根据需要调整
|
},
|
stopPolling() {
|
if (this.pollTimer) {
|
clearInterval(this.pollTimer);
|
this.pollTimer = null;
|
}
|
},
|
async fetchList(symbol) {
|
if (this.type === "position") {
|
_orderListHold().then((data) => {
|
this.orderHold = data;
|
});
|
return;
|
}
|
const _api = this.type === "orders" ? _orderListCur : _orderListHold;
|
const type = this.type;
|
symbol = "";
|
_api(symbol, type, this.page).then((data) => {
|
this.dataList[type] = this.dataList[type].concat(data);
|
this.loading = false;
|
if (data.length < 10) {
|
this.finished = true;
|
}
|
this.page++;
|
});
|
},
|
recall() {
|
this.page = 1;
|
this.dataList.orders = [];
|
this.fetchList(this.symbol);
|
},
|
onLoad() {
|
this.fetchList(this.symbol);
|
},
|
//选择币种
|
selectItem(item) {
|
this.dataList[this.type] = [];
|
this.page = 1;
|
this.symbol = item.symbol;
|
this.fetchList(this.symbol);
|
this.isAll = false;
|
},
|
},
|
components: {
|
PerpetualEntrustList,
|
PerpetualHistoryPosition,
|
PerpetualPositionList,
|
assetsHead,
|
[DropdownMenu.name]: DropdownMenu,
|
[DropdownItem.name]: DropdownItem,
|
[List.name]: List,
|
[Tabs.name]: Tabs,
|
[Tab.name]: Tab,
|
},
|
beforeRouteEnter(to, from, next) {
|
const {
|
query: { symbol },
|
} = to;
|
next((vm) => {
|
vm.symbol = symbol;
|
});
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.perpetualHistory {
|
width: 100%;
|
box-sizing: border-box;
|
min-height: 100vh;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
::v-deep .van-tab {
|
width: 10rem;
|
flex: none;
|
}
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
::v-deep .van-tabs__line {
|
background: rgb(247, 179, 40);
|
}
|
::v-deep .van-tab--active {
|
color: rgb(247, 179, 40);
|
}
|
|
// ::v-deep .van-tab {
|
// @include themify() {
|
// color: themed("text_color");
|
// }
|
// }
|
|
// ::v-deep .van-tabs__nav {
|
// @include themify() {
|
// background: themed("tab_background");
|
// }
|
// }
|
|
// ::v-deep .van-tab--active {
|
// background: #1194f7;
|
// border-radius: 5px;
|
// color: #fff !important;
|
// }
|
|
// ::v-deep .van-nav-bar {
|
// @include themify() {
|
// background: themed("main_background");
|
// }
|
// }
|
|
// ::v-deep .van-nav-bar__title {
|
// @include themify() {
|
// color: themed("text_color");
|
// }
|
// }
|
|
// ::v-deep .van-tabs__nav {
|
// @include themify() {
|
// background: themed("tab_background");
|
// }
|
// }
|
|
// ::v-deep .van-tabs__line {
|
// background-color: transparent !important;
|
// }
|
}
|
|
.active-line {
|
position: relative;
|
padding-bottom: 30px;
|
color: #1194f7;
|
}
|
|
.active-line::after {
|
content: "";
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
bottom: 0;
|
right: 0;
|
width: 280px;
|
height: 8px;
|
|
@include themify() {
|
background-color: themed("color_main");
|
}
|
}
|
|
::v-deep .van-tabs {
|
padding: 0 40px !important;
|
}
|
|
::v-deep .van-nav-bar {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-nav-bar__title {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-tab--active {
|
color: #fff;
|
}
|
|
.all-select {
|
padding: 30px 30px;
|
|
.select-box {
|
width: 160px;
|
height: 50px;
|
|
@include themify() {
|
background: themed("input_background");
|
}
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
padding: 0 20px;
|
position: relative;
|
|
.select-data {
|
position: absolute;
|
top: 55px;
|
left: 0;
|
z-index: 10;
|
width: 100%;
|
height: 300px;
|
overflow-y: auto;
|
|
@include themify() {
|
background: themed("input_background");
|
}
|
|
.select-item {
|
padding: 20px 20px;
|
text-align: center;
|
|
@include themify() {
|
border-bottom: 1px solid themed("border_color");
|
}
|
}
|
}
|
}
|
}
|
</style>
|
