From 916757dbb9d08ef2875fd3a8bd7a16ebe6d8f97c Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Tue, 24 Jun 2025 20:13:07 +0800
Subject: [PATCH] feat
---
src/components/perpetual-history-position/index.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 255 insertions(+), 14 deletions(-)
diff --git a/src/components/perpetual-history-position/index.vue b/src/components/perpetual-history-position/index.vue
index 5b37f26..3a8bd09 100644
--- a/src/components/perpetual-history-position/index.vue
+++ b/src/components/perpetual-history-position/index.vue
@@ -1,7 +1,97 @@
<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">{{ $t("买入") }}</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("最新成交") }}({{ item.symbol.toUpperCase() }})</div>
+ <div class="list-value">{{ item.volume_open }}</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 +133,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 +168,82 @@
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.close_avg_price - item.trade_avg_price) / item.trade_avg_price) *
+ 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 +267,75 @@
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>
--
Gitblit v1.9.3