<template>
|
<div id="cryptos">
|
<div class="DeliveryContractHistory px-10 font-28">
|
<assets-head :title="routeType == 'cryptos' ? $t('交割合约历史') : $t('期货交易')" :backFunc="() => {
|
if ($route.query.goback) {
|
$router.push({
|
path: '/cryptos/funds',
|
query: {
|
tab: 2,
|
index: 1// 0: 查看理财订单 1: 矿机
|
}
|
})
|
} else {
|
$router.go(-1)
|
}
|
|
}" />
|
<div>
|
<van-tabs ref="tabs" v-model:active="type" swipeable @change="onChange">
|
<van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
|
|
</van-tab>
|
</van-tabs>
|
<div class="all-select flex justify-end font-28" v-if="symbol">
|
<div class="select-box flex" @click.stop="isAll = !isAll">
|
<div class="flex-1 font-28">
|
{{ routeType == 'indices' ? symbolETF : symbol.toUpperCase() }}
|
</div>
|
<van-icon name="arrow-down" />
|
<div class="select-data" v-if="isAll">
|
<div class="select-item" @click.stop="selectItem(item2)" v-for="(item2, index) in currencyList"
|
:key="index">{{ routeType == 'indices' ? item2.name : item2.symbol.toUpperCase() || item2.symbol }}</div>
|
</div>
|
</div>
|
</div>
|
<template v-if="type === 'orders'">
|
<van-list v-model:loading="loading" :loading-text="$t('加载中...')" :finished="finished"
|
:finished-text="dataList.orders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="30" class="px-20">
|
<futrue-hold-list v-if="type === 'orders'" :list-data="dataList.orders">
|
</futrue-hold-list>
|
<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-100 h-100 no-data-img" />
|
<p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
|
</div>
|
</van-list>
|
</template>
|
|
<template v-if="type === 'hisorders'">
|
<van-list v-model:loading="loading" :loading-text="$t('加载中...')" :finished="finished"
|
:finished-text="dataList.hisorders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="30" class="px-20">
|
<futrue-histroy-position :list-data="dataList.hisorders"></futrue-histroy-position>
|
<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-100 h-100 no-data-img" />
|
<p class="text-grey mt-10 font-28">{{ $t('暂无记录') }}</p>
|
</div>
|
</van-list>
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { List, Tab, Tabs } from 'vant';
|
import futrueHoldList from '@/components/Transform/deliveryContract/hold.vue'
|
import futrueHistroyPosition from '@/components/Transform/deliveryContract/position.vue'
|
import { _futrueOrderList } from "@/service/trade.api";
|
import assetsHead from "@/components/Transform/assets-head/index.vue";
|
import { _getCoins } from "@/service/home.api";
|
export default {
|
data() {
|
return {
|
type: "orders",
|
dataList: {
|
orders: [],
|
hisorders: []
|
},
|
symbol: '',
|
selectData: [
|
{ title: this.$t('当前委托'), type: 'orders' },
|
{ title: this.$t('历史仓位'), type: 'hisorders' },
|
],
|
loading: false,
|
finished: false,
|
page: 1,
|
isAll: false,
|
currencyList: [],
|
symbolETF: '',
|
routeType: 'cryptos',
|
}
|
},
|
components: {
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs,
|
[List.name]: List,
|
futrueHoldList,
|
futrueHistroyPosition,
|
assetsHead
|
},
|
mounted() {
|
this.getCoins()
|
this.symbol = this.$route.query.symbol
|
if (this.$route.query.type) {
|
this.routeType = this.$route.query.type
|
}
|
},
|
methods: {
|
getCoins() {
|
_getCoins({ type: this.$route.query.type }).then((res) => {
|
console.log(res, 111111)
|
this.currencyList = res
|
this.currencyList.map((item) => {
|
if (item.symbol == this.symbol) {
|
this.symbolETF = item.name
|
}
|
})
|
})
|
},
|
onChange(e) {
|
this.isAll = false
|
this.dataList[e] = []
|
this.finished = false
|
this.page = 1
|
this.type = e
|
this.loading = true;
|
if (this.loading) {
|
this.fetchData(this.symbol, this.type)
|
}
|
},
|
onClickLeft() {
|
this.$router.go(-1)
|
},
|
fetchData(symbol) {
|
// TODO: 分页
|
_futrueOrderList(symbol, this.type, this.page).then(data => {
|
this.dataList[this.type] = this.dataList[this.type].concat(data)
|
this.loading = false
|
if (data.length < 10) {
|
this.finished = true
|
}
|
this.page++
|
})
|
},
|
onLoad() {
|
this.dataList.orders = []
|
this.fetchData(this.symbol, this.type)
|
},
|
//选择币种
|
selectItem(item) {
|
this.page = 1
|
this.symbol = item.symbol
|
this.dataList[this.type] = []
|
this.fetchData(this.symbol, this.type)
|
this.isAll = false
|
}
|
},
|
beforeRouteEnter(to, from, next) {
|
const { query: { symbol } } = to
|
next(vm => {
|
vm.symbol = symbol
|
})
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
:deep(.van-tab--active) {
|
background: $btn_main;
|
border-radius: 5px;
|
color: $text_color !important;
|
}
|
|
:deep(.van-tabs__nav) {
|
background-color: $tab_background;
|
}
|
|
|
.DeliveryContractHistory {
|
width: 100%;
|
box-sizing: border-box;
|
|
.position-padding {
|
//border-bottom: 1px solid #F2F4F9;
|
padding: 33px;
|
box-sizing: border-box;
|
width: 100%;
|
float: left;
|
|
.position-tag {
|
display: flex;
|
align-items: center;
|
|
.position-tag-style {
|
padding: 11px 28px;
|
margin-right: 22px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 26.4981px;
|
color: $text_color;
|
}
|
|
.position-tag-title {
|
font-style: normal;
|
font-weight: 600;
|
font-size: 30.9145px;
|
margin-right: 13px;
|
}
|
|
.position-tag-title2 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30.9145px;
|
color: $text_color5;
|
}
|
|
.position-tag-img {
|
margin-left: 11px;
|
width: 40px;
|
height: 31px;
|
}
|
}
|
|
.red {
|
background: $red;
|
border-radius: 6.6266px;
|
}
|
|
.green {
|
background: $green;
|
border-radius: 6.62453px;
|
}
|
|
.position-div1 {
|
margin-top: 20px !important;
|
width: 100%;
|
float: left;
|
|
.position-text1 {
|
float: left;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30px;
|
color: $text_color5;
|
}
|
|
.position-text2 {
|
float: right;
|
font-style: normal;
|
font-weight: 600;
|
font-size: 30px;
|
}
|
|
.position-text3 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30px;
|
}
|
}
|
}
|
|
.color-red {
|
color: $red !important;
|
}
|
|
.color-green {
|
color: $green !important;
|
}
|
|
.color-blue {
|
color: $color_main !important;
|
}
|
|
.van-tabs__nav {
|
// background: $tab_background;
|
}
|
|
.van-tab--active {
|
color: $text_color;
|
}
|
|
.all-select {
|
padding: 30px 0;
|
margin-right: 20px;
|
|
.select-box {
|
height: 70px;
|
background: $selectSymbol_background;
|
color: $text_color6;
|
display: flex;
|
align-items: center;
|
font-size: 28px;
|
padding: 0 20px;
|
position: relative;
|
border: 1px solid $border_color;
|
min-width: 260px;
|
|
.select-data {
|
position: absolute;
|
top: 75px;
|
left: 0;
|
z-index: 10;
|
width: 100%;
|
height: 300px;
|
overflow-y: auto;
|
background: #474B62;
|
|
.select-item {
|
padding: 20px 20px;
|
text-align: center;
|
border-bottom: 1px solid $border_color;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
