<template>
|
<div class="position">
|
<div class="position-padding" v-for="item in listData" :key="item.order_no">
|
<div class="position-tag">
|
<div
|
class="position-tag-style"
|
:class="item.direction === 'buy' ? 'green' : 'red'"
|
>
|
{{ item.direction === "buy" ? $t("开多") : $t("开空") }}
|
</div>
|
<div class="position-tag-title textColor">
|
{{ item.name }} {{ $t("交割") }}
|
</div>
|
<div class="position-tag-title2">{{ $t("全仓") }}</div>
|
<img
|
class="position-tag-img"
|
src="../../assets/image/deliveryContract/Group1042.png"
|
/>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("数量") }}</span>
|
<span class="position-text2 textColor">{{ item.volume }}</span>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("方向") }}</span>
|
<span
|
class="position-text2"
|
:class="item.direction === 'buy' ? 'color-green' : 'color-red'"
|
>
|
{{ item.direction === "buy" ? $t("开多") : $t("开空") }}</span
|
>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("交割时间") }}</span>
|
<span class="position-text2 textColor">{{
|
item.time_num + item.time_unit
|
}}</span>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("购买价") }}（USDT）</span>
|
<span class="position-text2 textColor">{{ item.open_price }}</span>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("结算价") }}（USDT）</span>
|
<span class="position-text2 textColor">{{ item.close_price }}</span>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("盈亏") }}</span>
|
<span
|
class="position-text2"
|
:class="item.profit > 0 ? 'color-green' : 'color-red'"
|
>
|
{{ item.profit > 0 ? "+" + item.profit : item.profit }}
|
</span>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("到期时间") }}</span>
|
<span class="position-text2 textColor">{{ getnewtime(item.close_time) }}</span>
|
</div>
|
<div class="position-div1">
|
<span class="position-text1">{{ $t("操作") }}</span>
|
<span class="position-text2 colorMain" @click="onDetail(item)">{{
|
$t("详情")
|
}}</span>
|
</div>
|
<div
|
style="margin-top: 33px; width: 100%; height: 1px; float: left"
|
class="bgDark"
|
></div>
|
</div>
|
<div
|
class="text-grey text-center py-300"
|
v-if="!listData.length && $route.name == 'perpetualContract'"
|
>
|
{{ $t("您目前没有持仓") }}
|
</div>
|
<van-popup v-model="show">
|
<popup-delivery
|
showBtns
|
:detailData="detailData"
|
:key="detailData.order_no"
|
@close="show = false"
|
:disabled="true"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import { Tab, Tabs, Popup } from "vant";
|
import PopupDelivery from "@/components/popup-delivery";
|
export default {
|
data() {
|
return {
|
active: 2,
|
show: false,
|
detailData: {},
|
};
|
},
|
props: {
|
listData: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
},
|
components: {
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs,
|
[Popup.name]: Popup,
|
PopupDelivery,
|
},
|
methods: {
|
onDetail(item) {
|
// 详细界面
|
this.show = true;
|
this.detailData = item;
|
},
|
getnewtime(e){
|
// 给定的时间字符串 (中国时间)
|
const inputDateStr = e;
|
|
// 创建一个 Date 对象，注意这里输入的时间是 CST，实际上是 UTC+8
|
const inputDate = new Date(inputDateStr + ' UTC+0800');
|
|
// 转换为韩国时间 (KST)，KST = UTC + 9 小时
|
const kstDate = new Date(inputDate.getTime() + 1 * 60 * 60 * 1000); // 8小时 + 1小时 = 9小时
|
|
// 获取年、月、日、小时、分钟和秒
|
const year = inputDate.getFullYear();
|
const month = inputDate.getMonth() + 1; // getMonth() 返回 0 到 11，需要加 1
|
const day = inputDate.getDate();
|
const hours = inputDate.getHours(); // 小时部分
|
const minutes = inputDate.getMinutes(); // 分钟部分
|
const seconds = inputDate.getSeconds(); // 秒部分
|
|
// 格式化时间为“年-月-日 小时:分钟:秒”格式
|
const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
const formattedTime = `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
return formattedDate +' '+ formattedTime
|
}
|
},
|
mounted(){
|
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.position {
|
width: 100%;
|
overflow: auto;
|
|
.position-tab-flex {
|
width: 100%;
|
display: flex;
|
|
.position-tab {
|
flex: 1;
|
}
|
|
.position-tab-icon {
|
width: 38px;
|
height: 38px;
|
margin-right: 30px;
|
margin-top: 22px;
|
}
|
}
|
|
.position-padding {
|
//border-bottom: 1px solid #F2F4F9;
|
padding: 42px 40px 0 40px;
|
box-sizing: border-box;
|
width: 100%;
|
overflow: auto;
|
|
.position-tag {
|
display: flex;
|
align-items: center;
|
|
.position-tag-style {
|
padding: 11px 28px;
|
margin-right: 22px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 26.4981px;
|
color: #ffffff;
|
}
|
|
.position-tag-title {
|
font-style: normal;
|
font-weight: 600;
|
font-size: 30.9145px;
|
margin-right: 13px;
|
}
|
|
.position-tag-title2 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30.9145px;
|
color: #848e9c;
|
}
|
|
.position-tag-img {
|
margin-left: 11px;
|
width: 40px;
|
height: 31px;
|
}
|
}
|
|
.red {
|
background: #f6465d;
|
border-radius: 6.6266px;
|
}
|
|
.green {
|
background: #5eba89;
|
border-radius: 6.62453px;
|
}
|
|
.position-div1 {
|
margin-top: 33px;
|
width: 100%;
|
float: left;
|
|
.position-text1 {
|
float: left;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30px;
|
color: #848e9c;
|
}
|
|
.position-text2 {
|
float: right;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30px;
|
}
|
|
.position-text3 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30px;
|
}
|
}
|
}
|
|
.color-red {
|
color: #f6465d !important;
|
}
|
|
.color-green {
|
color: #5eba89 !important;
|
}
|
|
.color-blue {
|
color: #1d91ff !important;
|
}
|
}
|
|
.textColor {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.border-b-color {
|
@include themify() {
|
border-bottom: 1px solid themed("border_color");
|
}
|
}
|
|
.bgDark {
|
@include themify() {
|
background: themed("border_color");
|
}
|
}
|
</style>
|
