style

lxf

2025-07-05 8c51de06d839339f428ca0691099fe60740765cf

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
<template>
  <!-- 合约委托详情 -->
  <div id="cryptos">
    <div class="entrustDetail font-28">
      <assets-head :title="$t('委托详情')" />
      <!-- <div class="grey-line contBackground"></div> -->
      <div class="pl-30 pr-30 pt-58 pb-58 ">
        <div class="flex justify-between pb-44 font-28">
          <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 font-28">
          <div class="text-grey">{{ $t('状态') }}</div>
          <div class="textColor">{{ detail.state === 'created' ? $t('已完成') : $t('未成交') }}</div>
        </div>
        <div class="flex justify-between pb-44 font-28">
          <div class="text-grey">{{ $t('委托金额') }}</div>
          <div class="textColor">{{ detail.amount_open }}</div>
        </div>
        <div class="flex justify-between pb-44 font-28">
          <div class="text-grey">{{ $t('剩余金额') }}</div>
          <div class="textColor">{{ detail.amount }}</div>
        </div>
        <div class="flex justify-between pb-44 font-28">
          <div class="text-grey">{{ $t('保证金') }}</div>
          <div class="textColor">{{ detail.deposit }}</div>
        </div>
        <div class="flex justify-between pb-44 font-28">
          <div class="text-grey">{{ $t('手续费') }}</div>
          <div class="textColor">{{ detail.fee }}</div>
        </div>
        <div class="flex justify-between pb-44 font-28">
          <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 font-28">
          <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 font-28">
          <div class="text-grey">{{ $t('订单号') }}</div>
          <div class="textColor">{{ detail.order_no }}</div>
        </div>
        <div class="flex justify-between pb-44 font-28">
          <div class="text-grey">{{ $t('委托时间') }}</div>
          <div class="textColor">
            {{ detail.create_time_ts ? dayjs(detail.create_time_ts * 1000).format('YYYY-MM-DD HH:mm:ss') : '--' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { _orderDetail } from "@/service/trade.api";
import assetsHead from "@/components/Transform/assets-head/index.vue";
import dayjs from 'dayjs'
export default {
  name: "entrustDetail",
  data() {
    return {
      detail: {},
      dayjs
    }
  },
  components: { assetsHead },
  mounted() {
    this.fetchDetail(this.$route.query.order_no)
  },
  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) {
  //   alert(1)
  //   console.log(to)
  //   const { query: { order_no } } = to
  //   next(vm => {
  //     vm.fetchDetail(order_no)
  //   })
  // }
}
</script>
 
<style lang="scss">
@import "@/assets/init.scss";
 
#cryptos {
  .entrustDetail {
    width: 100%;
    box-sizing: border-box;
  }
 
  .grey-line {
    height: 15px;
  }
}
</style>