<template>
|
<div class="tradeRecord">
|
<assets-head :title="$t('交易记录')" />
|
<div class="content">
|
<van-tabs
|
v-model="active"
|
class="w-full px-32 box-border"
|
sticky
|
@click="changeType"
|
>
|
<van-tab :title="$t('当前委托')" class="font-30">
|
<div class="all-select flex justify-end">
|
<div class="select-box flex" @click.stop="isAll = !isAll">
|
<div class="flex-1 font-24">{{ symbol.toUpperCase() }}/USDT</div>
|
<van-icon name="arrow-down" />
|
<div class="select-data" v-if="isAll">
|
<div
|
class="select-item font-24"
|
@click.stop="selectItem(item)"
|
v-for="(item, index) in currencyList"
|
:key="index"
|
>
|
{{ item.symbol.toUpperCase() }}/USDT
|
</div>
|
</div>
|
</div>
|
</div>
|
<entrust-item
|
v-for="item in entrustList"
|
:key="item.order_no"
|
:entrust="item"
|
:state="item.state"
|
@cancelOrder="cancelOrder"
|
/>
|
</van-tab>
|
<van-tab :title="$t('历史委托')">
|
<div class="all-select flex justify-end">
|
<div class="select-box flex" @click.stop="isAll = !isAll">
|
<div class="flex-1">{{ symbol.toUpperCase() }}/USDT</div>
|
<van-icon name="arrow-down" />
|
<div class="select-data" v-if="isAll">
|
<div
|
class="select-item"
|
@click.stop="selectItem(item)"
|
v-for="(item, index) in currencyList"
|
:key="index"
|
>
|
{{ item.symbol.toUpperCase() }}/USDT
|
</div>
|
</div>
|
</div>
|
</div>
|
<history-item
|
:coinPrice="coinPrice"
|
v-for="item in entrustList"
|
:key="item.order_no"
|
:entrust="item"
|
:state="item.state"
|
@cancelOrder="cancelOrder"
|
/>
|
</van-tab>
|
<van-tab :title="$t('成交历史')" class="font-30">
|
<div class="all-select flex justify-end">
|
<div class="select-box flex" @click.stop="isAll = !isAll">
|
<div class="flex-1">{{ symbol.toUpperCase() }}/USDT</div>
|
<van-icon name="arrow-down" />
|
<div class="select-data" v-if="isAll">
|
<div
|
class="select-item"
|
@click.stop="selectItem(item)"
|
v-for="(item, index) in currencyList"
|
:key="index"
|
>
|
{{ item.symbol.toUpperCase() }}/USDT
|
</div>
|
</div>
|
</div>
|
</div>
|
<entrust-item
|
v-for="item in entrustList"
|
:key="item.order_no"
|
:entrust="item"
|
:state="item.state"
|
@cancelOrder="cancelOrder"
|
/>
|
</van-tab>
|
</van-tabs>
|
<div
|
v-if="!entrustList.length"
|
class="flex flex-col justify-center items-center pt-185"
|
>
|
<img
|
src="@/assets/image/assets-center/no-data.png"
|
alt="no-date"
|
class="w-180 h-180"
|
/>
|
<p class="textColor">{{ $t("暂无数据") }}</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import { Tabs, Tab, DropdownMenu, DropdownItem } from "vant";
|
import EntrustItem from "@/components/entrust-item";
|
import historyItem from "@/components/history-item";
|
import TradeApi from "@/API/trading.js";
|
import { _getCoins, _getHomeList } from "@/API/home.api";
|
export default {
|
props: {},
|
components: {
|
assetsHead,
|
[Tabs.name]: Tabs,
|
[Tab.name]: Tab,
|
[DropdownMenu.name]: DropdownMenu,
|
[DropdownItem.name]: DropdownItem,
|
EntrustItem,
|
historyItem,
|
},
|
data() {
|
return {
|
active: 0,
|
entrustList: [],
|
historyList: [],
|
finishList: [],
|
type: "orders",
|
isAll: false,
|
symbol: "",
|
currencyList: [],
|
coinPrice: 0,
|
};
|
},
|
watch: {
|
active() {
|
this.isAll = false;
|
},
|
},
|
mounted() {
|
this.getCoins();
|
this.symbol = this.$route.params.symbol;
|
this.getOrderList(this.type);
|
this.getCoinPrce(this.symbol);
|
},
|
computed: {},
|
methods: {
|
getCoins() {
|
_getCoins().then((res) => {
|
console.log(res);
|
this.currencyList = res;
|
});
|
},
|
getCoinPrce(val) {
|
_getHomeList(val).then((res) => {
|
this.coinPrice = res[0].close;
|
});
|
},
|
getOrderList(type) {
|
this.entrustList = [];
|
TradeApi.tradeRecord({
|
page_no: 1,
|
symbol: this.symbol,
|
type: type,
|
})
|
.then((res) => {
|
console.log(res.data);
|
this.entrustList = res.data;
|
})
|
.catch(() => {});
|
},
|
changeType() {
|
this.entrustList = [];
|
if (this.active == 0) {
|
this.type = "orders";
|
} else if (this.active == 1) {
|
this.type = "hisorders";
|
} else {
|
this.type = "opponent";
|
}
|
this.getOrderList(this.type);
|
},
|
cancelOrder(order) {
|
TradeApi.tradeCancel({
|
order_no: order,
|
})
|
.then((res) => {
|
this.$toast(this.$t("成功"));
|
this.getOrderList(this.type);
|
})
|
.catch(() => {});
|
},
|
//选择币种
|
selectItem(item) {
|
this.symbol = item.symbol;
|
this.getOrderList();
|
this.getCoinPrce(item.symbol);
|
this.isAll = false;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.tradeRecord {
|
width: 100%;
|
min-height: 100vh;
|
box-sizing: border-box;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
::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("main_background");
|
}
|
}
|
|
::v-deep .van-tabs__line {
|
background-color: transparent !important;
|
}
|
}
|
|
.listItem {
|
border-bottom: 1px solid #484756;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.all-select {
|
padding: 30px 0;
|
|
.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");
|
}
|
}
|
}
|
}
|
}
|
|
.textColor {
|
color: #dad5dc;
|
}
|
</style>
|
