<template>
|
<!-- 持有仓位列表 -->
|
<div>
|
<!-- <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-37">{{ $t('隐藏其它合约') }}</div>-->
|
<!-- </div>-->
|
<!-- <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 font-25" @click="onSellAll">{{ $t('一键平仓') }}</button>-->
|
<!-- </div>-->
|
<div
|
:class="[isStyle ? 'border-b-color' : '']"
|
v-for="item in listData"
|
:key="item.order_no"
|
>
|
<div class="flex justify-between pt-44 pb-44">
|
<div class="flex flex-col">
|
<div class="flex items-center">
|
<div
|
class="pl-29 pr-29 pt-11 pb-11 text-white open-btn"
|
:class="item.direction == 'buy' ? ' bg-green' : 'bg-red'"
|
>
|
{{ item.direction == "buy" ? $t("开多") : $t("开空") }}
|
</div>
|
<div class="ml-22 font-31 font-600">
|
<span class="" :class="[isStyle ? 'textColor1 ' : 'textColor']"
|
>{{ item.name }} {{ $t("永续") }}</span
|
>
|
<span class="text-grey font-28 font-400 ml-17 mr-17"
|
>{{ $t("全仓") }}
|
<!-- {{ item.lever_rate }}x -->
|
</span>
|
</div>
|
<img
|
v-if="item.direction == 'buy'"
|
src="../../assets/image/public/green-leverage.png"
|
alt=""
|
class="w-32 h-32"
|
/>
|
<img
|
v-else
|
src="../../assets/image/public/red-leverage.png"
|
alt=""
|
class="w-32 h-32"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="flex justify-between">
|
<!-- <div class="flex-1 text-left">
|
<div class="text-grey">
|
{{ $t("未实现盈亏（USDT）") }}
|
</div>
|
<div
|
class="mt-20"
|
:class="item.profit > 0 ? 'text-green' : 'text-red'"
|
>
|
{{ item.profit > 0 ? "+" + item.profit : item.profit }}
|
</div>
|
</div>
|
|
<div class="flex-1 flex flex-col text-left">
|
<div class="text-grey">ROE</div>
|
<div
|
class="mt-20"
|
:class="item.change_ratio / 1 > 0 ? 'text-green' : 'text-red'"
|
>
|
{{ item.change_ratio }}%
|
</div>
|
</div> -->
|
<div class="flex-1 text-left">
|
<div class="text-grey h40">{{ $t("时间") }}</div>
|
<div
|
class="mt-20"
|
:class="[isStyle ? 'textColor1 ' : 'textColor']"
|
style="width: 80px"
|
>
|
{{ item.create_time }}
|
</div>
|
</div>
|
<div class="flex-1 text-left">
|
<div class="text-grey h40">{{ $t("持仓数量") }}</div>
|
<div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
|
{{ item.amount }}
|
</div>
|
</div>
|
<div class="flex-1 text-left">
|
<div class="text-grey h40">{{ $t("保证金") }}</div>
|
<div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
|
{{ item.deposit }}
|
</div>
|
</div>
|
|
<div class="flex-2 flex flex-col text-center justify-cen">
|
<button
|
class="greyBg border-none pl-34 pr-34 pt-10 pb-10 rounded"
|
@click="onSell(item.order_no)"
|
>
|
{{ $t("平仓") }}
|
</button>
|
</div>
|
</div>
|
<!-- <div class="flex pt-44 pb-32"> -->
|
|
<!-- <div class="flex-2 flex flex-col text-center justify-end">
|
<div
|
class="font-25 border-light-blue detail-btn colorMain"
|
@click.stop="clickzyzs(item)"
|
style="padding: 4px 8px"
|
>
|
{{ $t("止盈") }}{{ $t("止损") }}
|
</div>
|
</div> -->
|
<!-- </div> -->
|
<!-- <div class="flex pb-32"> -->
|
<!-- <div class="flex-1 flex flex-col text-left">
|
<div class="text-grey">{{ $t("开仓价格") }}</div>
|
<div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
|
{{ item.trade_avg_price }}
|
</div>
|
</div>
|
<div class="flex-1 flex flex-col text-left">
|
<div class="text-grey">{{ $t("强平价格") }}</div>
|
<div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
|
{{ item.qiangPing }}
|
</div>
|
</div> -->
|
<!-- <div class="flex-1">
|
<div class="text-grey">{{ $t("标记价格") }}</div>
|
<div class="mt-20" :class="[isStyle ? 'textColor1 ' : 'textColor']">
|
{{ item.mark_price }}
|
</div>
|
</div> -->
|
<!-- <div class="flex-2 flex flex-col items-center justify-end">
|
<button
|
class="font-30 border-light-blue detail-btn colorMain w-125 h-60"
|
@click="goDetail(item)"
|
>
|
{{ $t("详情") }}
|
</button>
|
</div> -->
|
<!-- </div> -->
|
</div>
|
<van-popup
|
:closeable="true"
|
v-if="iszyzs && selectIndex == 1"
|
v-model="iszyzs"
|
style="
|
width: 350px;
|
height: 220px;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
"
|
class="rounded-2xl"
|
>
|
<div
|
class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
|
style="margin-top: 20px; width: 80%; margin-left: 10%"
|
>
|
<input
|
:placeholder="selectIndex == 1 ? $t('请输入止盈金额') : ''"
|
class="inputBackground pl-20 h-76 border-none text-left rounded-lg"
|
v-model="stop_price_profit"
|
/>
|
<span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>
|
</div>
|
<div
|
class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
|
style="margin-bottom: 20px; width: 80%; margin-left: 10%"
|
v-if="selectIndex == 1"
|
>
|
<input
|
:placeholder="selectIndex == 1 ? $t('请输入止损金额') : ''"
|
class="inputBackground pl-20 h-76 border-none text-left rounded-lg"
|
v-model="stop_price_loss"
|
/>
|
<span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
|
</div>
|
<div
|
class="btn"
|
style="
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
"
|
>
|
<div
|
class="btn_right"
|
@click="iszyzs = false"
|
style="
|
width: 50%;
|
text-align: center;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
"
|
>
|
{{ $t("取消") }}
|
</div>
|
<div
|
class="btn_left"
|
@click="zyzsclick"
|
style="
|
width: 50%;
|
text-align: center;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
"
|
>
|
{{ $t("确认") }}
|
</div>
|
</div>
|
</van-popup>
|
<div class="text-grey text-center py-300" v-if="!listData.length">
|
{{ $t("您目前没有持仓") }}
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { _orderSell, _orderSellBatch, _getzyzs } from "@/API/trade.api";
|
import { Dialog, Popup } from "vant";
|
//import { i18n } from "@/i18n";
|
export default {
|
name: "perpetualPositionList",
|
data() {
|
return {
|
iconShow: false,
|
isStyle: true,
|
selectIndex: 1,
|
xzitem: {},
|
iszyzs: false,
|
stop_price_loss: "",
|
stop_price_profit: "",
|
};
|
},
|
props: {
|
type: {
|
type: String,
|
default: "2", // 2 永续合约历史持仓，3交割合约持仓
|
},
|
listData: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
},
|
mounted() {
|
if (this.$route.path == "/funds") {
|
this.isStyle = false;
|
}
|
},
|
components: {
|
[Popup.name]: Popup,
|
},
|
methods: {
|
clickzyzs(item) {
|
this.iszyzs = true;
|
this.xzitem = item;
|
},
|
zyzsclick() {
|
console.log(this.xzitem.order_no);
|
var data = {
|
stop_price_loss: this.stop_price_loss,
|
order_no: this.xzitem.order_no,
|
stop_price_profit: this.stop_price_profit,
|
};
|
_getzyzs(data).then((res) => {
|
this.$toast(this.$t("成功"));
|
this.iszyzs = false;
|
});
|
},
|
changeIcon() {
|
this.iconShow = !this.iconShow;
|
},
|
goDetail(item) {
|
this.$router.push({
|
path: "/orderDetail?order_no=" + item.order_no,
|
});
|
},
|
onSell(order_no) {
|
// 平仓单个
|
Dialog.confirm({
|
confirmButtonText: this.$t("确定"),
|
cancelButtonText: this.$t("取消"),
|
title: this.$t("平仓提示"),
|
message: this.$t("是否平仓?"),
|
})
|
.then(() => {
|
_orderSell({ order_no }).then(() => {
|
this.$toast(this.$t("平仓成功"));
|
this.$emit("sell", order_no);
|
});
|
})
|
.catch(() => {});
|
},
|
onSellAll() {
|
// 平仓全部
|
_orderSellBatch().then(() => {
|
this.$toast(this.$t("平仓成功"));
|
this.$emit("sell");
|
});
|
},
|
},
|
};
|
</script>
|
<style scoped lang="scss">
|
.text-grey {
|
color: #868c9a;
|
font-size: 25px;
|
}
|
.open-btn {
|
border-radius: 7px;
|
}
|
|
.detail-btn {
|
border: 1px solid;
|
border-radius: 7px;
|
|
@include themify() {
|
background: themed("btn_background1");
|
}
|
|
@include themify() {
|
border: themed("btn_background1");
|
}
|
}
|
|
// .detail-btn1 {
|
// border: 1px solid;
|
// border-radius: 7px;
|
// }
|
// .textColor{
|
// color: #333;
|
// }
|
// .textColor1{
|
// color: #333;
|
// color: #fff;
|
// }
|
.greyBg {
|
@include themify() {
|
background: themed("btn_background2");
|
}
|
|
color: #818181;
|
}
|
|
.border-b-color {
|
@include themify() {
|
border-bottom: 1px solid themed("border_color");
|
}
|
}
|
|
.h40 {
|
height: 3rem;
|
}
|
</style>
|
