<template>
|
<!-- 币币订单详情 -->
|
<div class="tradeDetail">
|
<assets-head :title="$t('订单详情')" />
|
<div class="header pl-32 pr-32 text-center ">
|
<!-- <div class="textColor">{{ $t('币种') }}</div> -->
|
<!-- <div class="mt-28 textColor">{{ detail.symbol ? detail.symbol.toUpperCase() : '--' }}/USDT</div> -->
|
<div class="mt-28 text-green">{{ detail.state ? handleText(detail.state) : '--' }}</div>
|
</div>
|
<div class="pl-32 pr-32 pt-80 pb-58">
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('操作') }}</div>
|
<div class="textColor" :class="detail.offset == 'open' ? 'text-green' : 'text-red'">
|
{{ detail.order_price_type ? handleWord(detail.order_price_type, detail.offset) : '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('成交价格') }}</div>
|
<div class="textColor">{{ detail.close_price ? detail.close_price : '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('成交时间') }}</div>
|
<div class="textColor">{{ detail.close_time ? detail.close_time : '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('手续费') }}</div>
|
<div class="textColor">{{ detail.fee || '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('订单类型') }}</div>
|
<div class="textColor">{{ detail.order_price_type ? handleType(detail.order_price_type) : '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('限价') }}</div>
|
<div class="textColor">{{ detail.price ? detail.price : '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('订单号') }}</div>
|
<div class="textColor">{{ detail.order_no ? detail.order_no : '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('委托时间') }}</div>
|
<div class="textColor">{{ detail.create_time ? detail.create_time : '--' }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import TradeApi from "@/API/trading.js";
|
import { getStorage } from "@/utils/utis";
|
export default {
|
name: "orderDetail",
|
data() {
|
return {
|
detail: {}
|
}
|
},
|
components: {
|
assetsHead,
|
},
|
methods: {
|
handleText(state) {
|
let str = '';
|
if (state == 'submitted') {
|
str = this.$t('已提交')
|
} else if (state == 'canceled') {
|
str = this.$t('已撤销')
|
} else {
|
str = this.$t('已完成')
|
}
|
return str;
|
},
|
handleType(type) {
|
let str = '';
|
if (type == 'limit') {
|
str = this.$t('限价委托')
|
} else {
|
str = this.$t('市价委托')
|
}
|
return str;
|
},
|
handleWord(price_type, offset) {
|
let a = ''
|
let b = ''
|
if (price_type === 'limit') {
|
a = this.$t('限价')
|
} else {
|
a = this.$t('市价')
|
}
|
if (offset === 'open') {
|
b = this.$t('买入')
|
} else {
|
b = this.$t('卖出')
|
}
|
return a + '/' + b
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
fetchDetail(order_no) {
|
TradeApi.tradeDetail({ order_no }).then(res => {
|
this.detail = res.data
|
})
|
}
|
},
|
beforeRouteEnter(to, from, next) {
|
const { query: { order_no } } = to
|
next(vm => {
|
vm.fetchDetail(order_no)
|
})
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.grey-line {
|
background-color: #F5F5F5;
|
height: 15px;
|
}
|
|
.tradeDetail {
|
width: 100%;
|
box-sizing: border-box;
|
min-height: 100vh;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
.header {
|
@include themify() {
|
border-top: 1px solid themed("line_color");
|
}
|
|
padding-top: 42px;
|
}
|
}
|
|
::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");
|
}
|
}
|
|
.text-green {
|
color: #2EBD85 !important;
|
}
|
|
.text-red {
|
color: #F6465D !important;
|
}
|
</style>
|
