first

zzzz

2024-04-21 05b2cd59596baebaebe1773c4ca3ba45deacf2e8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<template>
  <!-- 合约委托详情 -->
  <div class="entrustDetail">
    <assets-head :title="$t('委托详情')" />
    <div class="contBackground h-20 w-full"></div>
    <div class="grey-line diviLine"></div>
    <div class="pl-30 pr-30 pt-58 pb-58">
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('操作') }}</div>
        <div class="text-green textColor"> {{ handleWord(detail.direction, detail.offset,
          detail.price_type) }}&nbsp;{{ detail.name }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('状态') }}</div>
        <div class="textColor">{{ detail.state === 'created' ? $t('已完成') : $t('未成交') }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('委托金额') }}</div>
        <div class="textColor">{{ detail.amount_open }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('剩余金额') }}</div>
        <div class="textColor">{{ detail.amount }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('保证金') }}</div>
        <div class="textColor">{{ detail.deposit }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('手续费') }}</div>
        <div class="textColor">{{ detail.fee }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('订单类型') }}</div>
        <div class="textColor" v-if="detail.price_type === 'limit'">{{ $t('限价委托') }}</div>
        <div class="textColor" v-else>{{ $t('市价委托') }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('止盈') }}</div>
        <div class="textColor">{{ detail.stop_price_profit }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('止损') }}</div>
        <div class="textColor">{{ detail.stop_price_loss }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ detail.price_type === 'limit' ? $t('限价') : $t('市价') }}</div>
        <div class="textColor">{{ detail.price }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('订单号') }}</div>
        <div class="textColor">{{ detail.order_no }}</div>
      </div>
      <div class="flex justify-between pb-44">
        <div class="text-grey">{{ $t('委托时间') }}</div>
        <div class="textColor">{{ detail.create_time }}</div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { _orderDetail } from "@/API/trade.api";
import assetsHead from "@/components/assets-head";
import PerpetualEntrustList from "@/components/perpetual-entrust-list";
import PerpetualHistoryPosition from "@/components/perpetual-history-position";
export default {
  name: "entrustDetail",
  data() {
    return {
      detail: {}
    }
  },
  components: { assetsHead },
  methods: {
    handleWord(direction, offset, price_type) {
      let a = ''
      let b = ''
      if (price_type === 'limit') {
        a = this.$t('限价')
      } else {
        a = this.$t('市价')
      }
      if (direction === 'buy' && offset === 'open') {
        b = this.$t('开多')
      } else if (direction === 'sell' && offset === 'open') {
        b = this.$t('开空')
      } else if (direction === 'buy' && offset === 'close') {
        b = this.$t('平多')
      } else {
        b = this.$t('平空')
      }
      return b
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    fetchDetail(order_no) {
      _orderDetail(order_no).then(data => {
        this.detail = data
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    const { query: { order_no } } = to
    next(vm => {
      vm.fetchDetail(order_no)
    })
  }
}
</script>
 
<style lang="scss" scoped>
.entrustDetail {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;
 
  @include themify() {
    background: themed("main_background");
  }
}
 
.grey-line {
  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");
  }
}
 
.contBackground {
  @include themify() {
    background: themed("main_background");
  }
}
</style>