<template>
|
<!-- 合约订单详情 -->
|
<div class="orderDetail">
|
<assets-head :title="$t('订单详情')" />
|
<div class="pl-32 pr-32 pt-54 pb-58 textColor">
|
<div class="text-center">{{ $t('盈亏金额') }}</div>
|
<div class="text-center mt-44 font-56" :class="{
|
'text-green': detail.profit / 1 > 0,
|
'text-red': detail.profit / 1 < 0,
|
}">{{ detail.profit / 1 > 0 ? '+' + detail.profit : detail.profit }} ({{ detail.change_ratio }} %)</div>
|
<div class="flex justify-between pb-68 mt-90">
|
<div class="text-grey">{{ $t('操作') }}</div>
|
<div class="font-600"> {{ handleWord(detail.direction, detail.state, detail.price_type) }} {{
|
detail.name ? detail.name : '--'
|
}}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('状态') }}</div>
|
<div class="textColor">{{ detail.state ? handleText(detail.state) : '--' }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('开仓金额') }}</div>
|
<div class="textColor">{{ detail.amount_open }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('可平金额') }}</div>
|
<div class="textColor">{{ detail.amount_open }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('保证金') }}</div>
|
<div class="textColor">{{ detail.deposit }}</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.trade_avg_price }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('平仓价格') }}</div>
|
<div class="textColor">{{ detail.close_avg_price }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('止盈') }}</div>
|
<div class="textColor">{{ detail.stop_price_profit }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('止损') }}</div>
|
<div class="textColor">{{ detail.stop_price_loss }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('订单号') }}</div>
|
<div class="textColor">{{ detail.order_no }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('开仓时间') }}</div>
|
<div class="textColor">{{ detail.create_time }}</div>
|
</div>
|
<div class="flex justify-between pb-68">
|
<div class="text-grey">{{ $t('平仓时间') }}</div>
|
<div class="textColor">{{ detail.close_time }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { _orderHoldDetail } from "@/API/trade.api";
|
import assetsHead from "@/components/assets-head";
|
import { Popup } from "vant";
|
export default {
|
name: "orderDetail",
|
data() {
|
return {
|
detail: {
|
|
},
|
timer: null
|
}
|
},
|
components: {
|
assetsHead,
|
},
|
created() {
|
let order_no = this.$route.query.order_no;
|
this.timer = setInterval(() => {
|
this.fetchDetail(order_no);
|
}, 1000);
|
},
|
methods: {
|
handleText(state) {
|
let str = '';
|
if (state == 'created') {
|
str = this.$t('已平仓')
|
} else {
|
str = this.$t('持仓')
|
}
|
return str;
|
},
|
handleWord(direction, state, price_type) {
|
let a = ''
|
let b = ''
|
if (price_type === 'limit') {
|
a = this.$t('限价')
|
} else {
|
a = this.$t('市价')
|
}
|
if (direction === 'buy' && state === 'submitted') {
|
b = this.$t('开多')
|
} else if (direction === 'sell' && state === 'submitted') {
|
b = this.$t('开空')
|
} else if (direction === 'buy' && state === 'created') {
|
b = this.$t('平多')
|
} else {
|
b = this.$t('平空')
|
}
|
return a + '/' + b
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
fetchDetail(order_no) {
|
_orderHoldDetail(order_no).then(data => {
|
this.detail = data
|
})
|
},
|
clearTimer() {
|
clearInterval(this.timer)
|
this.timer = null
|
},
|
},
|
beforeDestroy() {
|
this.clearTimer()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.orderDetail {
|
width: 100%;
|
box-sizing: border-box;
|
min-height: 100vh;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.grey-line {
|
background-color: #F5F5F5;
|
height: 15px;
|
}
|
|
::v-deep .van-nav-bar {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-nav-bar__title {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
</style>
|
