<template>
|
<!-- 历史持仓 -->
|
<div>
|
<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">
|
<div class="pl-28 pr-28 pt-10 pb-10 text-white rounded-md"
|
:class="item.direction == 'buy' ? ' bg-green' : 'bg-red'">
|
{{ item.direction == 'buy' ? $t('开多') : $t('开空') }}
|
</div>
|
<div class="ml-22 font-30 font-700 textColor">{{ item.name }} {{ $t('永续') }}</div>
|
</div>
|
|
</div>
|
|
<div class="flex justify-between pb-28">
|
<div class="text-grey">{{ $t('价格') }}</div>
|
<div class="textColor">{{ item.trade_avg_price }}</div>
|
</div>
|
<div class="flex justify-between pb-28">
|
<div class="text-grey">{{ $t('成交数量') }}</div>
|
<div class="textColor">{{ item.volume_open }}</div>
|
</div>
|
<div class="flex justify-between pb-28">
|
<div class="text-grey">{{ $t('手续费') }}</div>
|
<div class="textColor">{{ item.fee }}</div>
|
</div>
|
<div class="flex justify-between pb-28">
|
<div class="text-grey">{{ $t('实现盈亏') }}</div>
|
<div :class="{
|
'text-green': item.profit / 1 > 0,
|
'text-red': item.profit / 1 < 0,
|
}">{{ item.profit / 1 > 0 ? '+' + item.profit : item.profit }}</div>
|
</div>
|
<div class="flex justify-between pb-28">
|
<div class="text-grey">{{ $t('订单号') }}</div>
|
<div class="textColor">{{ item.order_no }}</div>
|
</div>
|
<div class="flex justify-between pb-28 items-center">
|
<div class="text-grey">{{ $t('操作') }}</div>
|
<button class="border-none w-125 h-60 detail-btn text-blue bg-none colorMain" @click="goDetail(item)">{{
|
$t('详情') }}</button>
|
</div>
|
</div>
|
</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",
|
props: {
|
listData: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {
|
historyData: [
|
{
|
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,
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.list-item {
|
color: #fff;
|
}
|
|
.border-b-color {
|
@include themify() {
|
border-bottom: 1px solid themed("border_color") !important;
|
}
|
}
|
|
.detail-btn {
|
border-radius: 0.4375rem;
|
|
@include themify() {
|
background: themed("btn_background1");
|
}
|
|
@include themify() {
|
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>
|
