1

李

7 days ago 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d

 src/components/Transform/perpetual-position-list/index.vue

@@ -1,14 +1,9 @@
<template>
  <!-- 持有仓位列表 -->
  <div id="cryptos">
    <!--        <div class="flex justify-between" v-if="listData.length">-->
    <!--            <div class="flex" @click.stop="changeIcon">-->
    <!--                <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
    <!--                <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
    <!--                <div class="ml-37xw">{{ $t('隐藏其它合约') }}</div>-->
    <!--            </div>-->
    <!--            <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 text-26" @click="onSellAll">{{ $t('一键平仓') }}</button>-->
    <!--        </div>-->
    <div class="close-all-row" v-if="listData.length">
      <button type="button" class="close-all-btn" @click="onSellAll">{{ $t('一键平仓') }}</button>
    </div>
    <div class="border-b-color" v-for="item in listData" :key="item.order_no">
      <div class="flex justify-between pt-11 pb-11">
        <div class="flex flex-col">
@@ -43,22 +38,27 @@
      <div class="flex pt-11 pb-8 text-28">
        <div class="flex-1">
          <div class="text-grey">{{ $t('持仓数量') }}</div>
          <div class="mt-5 textColor">{{ item.volume / (item.lever_rate ? item.lever_rate : 1) }}*{{
            item.lever_rate ? item.lever_rate : 1 }}x</div>
          <div class="mt-5 textColor">{{ formatNum4(item.volume) }}
            <!-- *{{item.lever_rate ? item.lever_rate : 1 }}x -->
          </div>
        </div>
        <div class="flex-1 text-center  text-28">
          <div class="text-grey">{{ $t('保证金') }} ( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</div>
          <div class="mt-5 textColor">{{ item.deposit }}</div>
          <div class="mt-5 textColor">{{ formatNum4(item.deposit) }}</div>
        </div>
        <div class="flex-1 flex flex-col items-end  text-28">
          <div class="text-grey">{{ $t('开仓价格') }}</div>
          <div class="mt-5 textColor">{{ item.trade_avg_price }}</div>
          <div class="mt-5 textColor">{{ formatNum4(item.trade_avg_price) }}</div>
        </div>
      </div>
      <div class="flex pb-8 text-28">
        <div class="flex-1">
          <div class="text-grey">{{ $t('标记价格') }}</div>
          <div class="mt-5 textColor">{{ item.mark_price }}</div>
        </div>
        <div class="flex-1">
          <div class="text-grey">{{ $t('强平价') }}</div>
          <div class="mt-5 textColor">{{ item.force_close_price }}</div>
        </div>
        <div class="flex-1 flex flex-col items-center justify-end">
          <button class="text-30 detail-btn border-light-blue greyBg colorMain w-32 h-16" @click="goDetail(item)">{{
@@ -82,7 +82,6 @@
  name: "perpetualPositionList",
  data() {
    return {
      iconShow: false,
      routeType: 'cryptos'
    }
  },
@@ -102,8 +101,13 @@
    this.routeType = this.$route.query.type
  },
  methods: {
    changeIcon() {
      this.iconShow = !this.iconShow;
    /** 截断保留四位小数（不舍入） */
    formatNum4(val) {
      const v = parseFloat(val)
      if (!isFinite(v)) return '0.0000'
      const factor = 10000
      const truncated = Math.trunc(v * factor) / factor
      return truncated.toFixed(4)
    },
    goDetail(item) {
      this.$router.push({ path: "/cryptos/orderDetail", query: { order_no: item.order_no } });
@@ -123,7 +127,7 @@
    },
    onSellAll() { // 平仓全部
      _orderSellBatch().then(() => {
        this.showToast(this.$t('平仓成功'))
        showToast(this.$t('平仓成功'))
        this.$emit('sell')
      })
    }
@@ -142,5 +146,34 @@
    background: $US_tabActice_background;
    color: $color_main;
  }

  .close-all-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.8rem 0 1.2rem;
  }

  .close-all-btn {
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.65rem 1.6rem;
    border-radius: 0.5rem;
    /* 与全局主题一致：--btn_main / --quotes-btn-text */
    background: var(--btn_main);
    color: var(--quotes-btn-text);
    box-shadow:
      0 0.35rem 1rem rgba(0, 0, 0, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);

    &:active {
      opacity: 0.92;
      transform: scale(0.98);
    }
  }
}
</style>