订单转换英国时间

jhzh

2024-08-13 c4f49ce2d78d38692b76bbc29f7804c36ef49d98

订单转换英国时间

 src/page/perpetualContract/entrustDetail.vue

@@ -1,145 +1,168 @@
<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,
    <!-- 合约委托详情 -->
    <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>
            </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">{{ convertCSTtoGMT(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)
    })
  }
}
    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: {
            convertCSTtoGMT(dateString) {
                const inputDate = new Date(dateString); // 输入的时间
                const options = {
                    timeZone: 'Europe/London',
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false
                };
                const londonTime = new Intl.DateTimeFormat('en-GB', options).format(inputDate);
                return londonTime;
            },
            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;
    .entrustDetail {
        width: 100%;
        box-sizing: border-box;
        min-height: 100vh;

  @include themify() {
    background: themed("main_background");
  }
}
        @include themify() {
            background: themed("main_background");
        }
    }

.grey-line {
  height: 15px;
}
    .grey-line {
        height: 15px;
    }

::v-deep .van-nav-bar {
  @include themify() {
    background: themed("main_background");
  }
}
    ::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-nav-bar__title {
        @include themify() {
            color: themed("text_color");
        }
    }

.contBackground {
  @include themify() {
    background: themed("main_background");
  }
}
</style>
    .contBackground {
        @include themify() {
            background: themed("main_background");
        }
    }
</style>