翻译

lxf

2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75

 src/components/perpetual-history-position/index.vue

@@ -1,7 +1,91 @@
<template>
  <!-- 历史持仓 -->
  <div>
    <template v-if="listData.length > 0">
    <div class="asset-list" v-for="item in listData" :key="item.order_no">
      <div class="list">
        <div class="list-h">
          <div>
            <span class="currency" :class="{ 'text-red': item.direction !== 'buy' }">{{ item.direction === 'buy' ? "Long" : "Short" }}</span>
            <span>{{ item.name }}</span>
          </div>
          <div class="state">{{ $t("成交") }}</div>
        </div>
        <div class="kline"></div>
        <div class="list-item">
          <div class="list-b">
            <div>{{ $t("时间") }}</div>
            <div class="list-value">{{ item.close_time | formatDate }}</div>
          </div>
          <div class="list-b">
            <div>{{ $t("价格") }}(USDT)</div>
            <div class="list-value">
              {{ handleWord(item.direction, item.state, item.price_type) }}
            </div>
          </div>
          <div class="list-b">
            <div>{{ $t("数量") }}(USDT)</div>
            <div class="list-value">{{ item.volume_open }}</div>
          </div>
          <div class="list-b">
            <div>{{ $t("杠杆") }}</div>
            <div class="list-value">{{ item.lever_rate }}</div>
          </div>
          <div class="list-b">
            <div>{{ $t("成交额") }}(USDT)</div>
            <div class="list-value">{{ item.trade_avg_price }}</div>
          </div>
          <div class="list-b">
            <div>{{ $t("类型") }}</div>
            <div class="list-value">
              {{ item.state ? handleText(item.state) : "--" }}
            </div>
          </div>
          <div class="list-b">
            <div>{{ $t("开仓价格") }}</div>
            <div class="list-value">
              {{ item.trade_avg_price }}
            </div>
          </div>
          <div class="list-b">
            <div>{{ $t("平仓价格") }}</div>
            <div class="list-value">
              {{ item.close_avg_price }}
            </div>
          </div>
          <div class="list-b">
            <div>{{ $t("保证金") }}</div>
            <div class="list-value">
              {{ item.deposit_open }}
            </div>
          </div>
          <div class="list-b">
            <div>{{ $t("手续费") }}</div>
            <div class="list-value">
              {{ item.fee }}
            </div>
          </div>
          <div class="list-b">
            <div>{{ $t("盈利率") }}</div>
            <div class="list-value" :class="{
              'text-green': item.profit / 1 > 0,
              'text-red': item.profit / 1 < 0,
            }">
              {{ calculateProfitRate(item) }}
            </div>
          </div>
          <div class="list-b">
            <div>{{ $t("盈利") }}</div>
            <div class="list-value" :class="{
              'text-green': item.profit / 1 > 0,
              'text-red': item.profit / 1 < 0,
            }">
              {{ item.profit }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <template v-if="listData.length > 0">
      <div class="border-b-color list-item" v-for="item in listData" :key="item.order_no">
        <div class="flex justify-between pt-30 pb-28">
          <div class="flex items-center">
@@ -43,10 +127,34 @@
            $t('详情') }}</button>
        </div>
      </div>
    </template>
    </template> -->
  </div>
</template>

<!-- {
  "order_no": "25062319103773064243",  // 订单编号
  "amount_open": 169350.0,             // 开仓金额(USDT)
  "symbol": "eth",                     // 交易对符号(ETH)
  "lever_rate": 200.0,                 // 杠杆倍数(200倍)
  "amount": 0.0,                       // 当前持仓金额(已平仓为0)
  "create_time": "2025-06-23  07:10:37  AM",  // 开仓时间
  "fee": 10.161,                       // 手续费(USDT)
  "qiangPing": "2160.74289",           // 强平价格
  "mark_price": 2414.6,                // 标记价格
  "deposit_open": 270.96,              // 开仓保证金(USDT)
  "stop_price_loss": 0.0,              // 止损价格(未设置)
  "change_ratio": 0.0,                 // 价格变动比率
  "close_time": "2025-06-23  12:16:22  PM",  // 平仓时间
  "trade_avg_price": 2246.69,          // 开仓均价(USDT)
  "close_avg_price": 2226.53,         // 平仓均价(USDT)
  "stop_price_profit": 0.0,            // 止盈价格(未设置)
  "volume": 0.0,                       // 当前持仓量(已平仓为0)
  "volume_open": 75.0,                 // 开仓数量(ETH)
  "name": "ETH/USDT",                  // 交易对名称
  "deposit": 0.0,                      // 当前保证金(已平仓为0)
  "state": "created",                  // 状态(已平仓)
  "profit": "-486.28",                 // 盈亏金额(亏损486.28 USDT)
  "direction": "buy"                   // 方向(买入/做多)
} -->
<script>
export default {
  name: "perpetualHistoryPosition",
@@ -54,26 +162,79 @@
    listData: {
      type: Array,
      default() {
        return []
      }
    }
        return [];
      },
    },
  },
  data() {
    return {
      historyData: [
        { name: "BTC/USDT", direction: "buy", amount: "200", price: "23000", create_time: "2022-07-20 10:05:15" },
      ]
    }
        {
          name: "BTC/USDT",
          direction: "buy",
          amount: "200",
          price: "23000",
          create_time: "2022-07-20 10:05:15",
        },
      ],
    };
  },
  filters: {
    toFixed(val) {
      return (val / 1).toFixed(5);
    },
    formatDate(val) {
      if (!val) return "";
      const date = new Date(val);
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      return `${month}-${day} ${hours}:${minutes}`;
    },
  },
  methods: {
    calculateProfitRate(item) {
      // if (!item.trade_avg_price || !item.close_avg_price) return "--";
      const profitRate = ((item.profit / item.deposit_open) * 100).toFixed(2);
      return profitRate + "%";
    },
    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;
      return a;
    },
    goDetail(item) {
      this.$router.push({
        path: "/orderDetail?order_no=" + item.order_no
        path: "/orderDetail?order_no=" + item.order_no,
      });
    }
  }

}
    },
  },
};
</script>
<style lang="scss" scoped>
.list-item {
@@ -97,4 +258,85 @@
    border: themed("btn_background1");
  }
}

.asset-list {
  width: 100%;

  @include themify() {
    color: themed("text_color1");
  }

  .list {
    background: #212121;
    box-sizing: border-box;
    margin-bottom: 2.3rem;
    padding: 2.3rem;
    border-radius: 2.3rem;
    position: relative;
  }

  .list-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    color: #d1cdcd;

    .currency {
      font-size: 2.2rem;
      font-weight: 600;
      color: #1cd36d;
    }

    span {
      font-size: 1.6rem;
      font-weight: 600;
      // color: #fff;
    }
  }

  .list-item {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.3rem;

    .list-b {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 1.4rem;
      font-size: 1.6rem;
      width: 14rem;
      // padding-right: 1.4rem;
      // margin-right: 1.4rem;
      box-sizing: border-box;
      color: #d1cdcd;

      .list-value {
        width: 100%;
        color: #fff;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.5;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.kline {
  width: 100%;
  height: 1px;
  background: rgba(60, 58, 58, 0.6);
}

.text-red {
  color: #ff0000 !important;
}

.text-green {
  color: #1cd36d !important;
}
</style>