<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>-->
|
<!-- </div>-->
|
<div class="" v-for="item in listData" :key="item.order_no" style="margin: 0 20px;">
|
<div class="flex justify-between pt-44 pb-44">
|
<div class="flex flex-col">
|
<div class="flex items-center">
|
<div
|
class="pl-10 pr-11 pt-5 pb-5 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="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="fexl-1">
|
<div class="text-grey">{{ $t("购买价") }}(USDT)</div>
|
<div class="mt-20 textColor">{{ item.open_price }}</div>
|
</div>
|
<div>
|
<div class="text-grey text-right">{{ $t("现价") }}</div>
|
<div
|
class="mt-20 text-right"
|
:class="
|
item.close_price > item.open_price ? 'text-green' : 'text-red'
|
"
|
>
|
{{ item.close_price }}
|
</div>
|
</div>
|
</div>
|
<div class="flex pt-40 pb-40">
|
<div class="flex-1">
|
<div class="text-grey">{{ $t("方向") }}</div>
|
<div
|
class="mt-20"
|
:class="item.direction === 'buy' ? 'text-green' : 'text-red'"
|
>
|
{{ item.direction === "buy" ? $t("开多") : $t("开空") }}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="text-grey text-center">{{ $t("数量") }}</div>
|
<div class="mt-20 text-center textColor">{{ item.volume }}</div>
|
</div>
|
<div class="flex-1 flex flex-col items-end">
|
<div class="text-grey">{{ $t("盈亏") }}</div>
|
<div
|
class="mt-20 text-green"
|
>
|
0
|
<!-- {{ item.profit / 1 > 0 ? "+" + item.profit : item.profit }} -->
|
</div>
|
</div>
|
</div>
|
<div class="flex pb-32">
|
<div class="flex-1">
|
<div class="text-grey">{{ $t("剩余时间") }}</div>
|
<div class="mt-20 textColor">{{ fomatTime(item.remain_time) }}</div>
|
</div>
|
<div class="flex-1">
|
<div class="text-grey text-center">{{ $t("交割时间") }}</div>
|
<div class="mt-20 text-center textColor">
|
{{ item.time_num + item.time_unit }}
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="text-grey text-right">{{ $t("操作") }}</div>
|
<div class="mt-20 colorMain text-right" @click="goDetail(item)">
|
{{ $t("详情") }}
|
</div>
|
</div>
|
</div>
|
<div class="w-full h-1 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="true"
|
:price="price"
|
:detailData="detailData"
|
:key="detailData.order_no"
|
@close="onClose"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import PopupDelivery from "@/components/popup-delivery";
|
import { Popup } from "vant";
|
import { _futrueOrderDetail } from "@/API/trade.api";
|
export default {
|
name: "deliveryHoldList",
|
data() {
|
return {
|
show: false,
|
iconShow: false,
|
detailData: {},
|
};
|
},
|
components: {
|
[Popup.name]: Popup,
|
PopupDelivery,
|
},
|
props: {
|
listData: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
price: {
|
type: [Number, String],
|
default: "0.00",
|
},
|
},
|
methods: {
|
clearTimeout() {
|
clearTimeout(this.timeout);
|
this.timeout = null;
|
},
|
//合约时间结束后显示详情
|
handleTimeEnd(order) {
|
_futrueOrderDetail(order).then((data) => {
|
this.clearTimeout();
|
this.detailData = data;
|
if (data.state !== "created") {
|
this.timeout = setTimeout(() => {
|
this.handleTimeEnd(order);
|
}, 1000);
|
}
|
});
|
},
|
fomatTime(time) {
|
let arr = time.split(":");
|
let day = Math.floor(arr[0] / 24);
|
let hour = arr[0] % 24 >= 10 ? arr[0] % 24 : "0" + (arr[0] % 24);
|
console.log(hour);
|
let min = arr[1] >= 10 ? arr[1] : "0" + arr[1];
|
let sec = arr[2] >= 10 ? arr[2] : "0" + arr[2];
|
if (day >= 1) {
|
return day + this.$t("天") + " " + hour + ":" + min + ":" + sec;
|
} else {
|
return hour + ":" + min + ":" + sec;
|
}
|
},
|
changeIcon() {
|
this.iconShow = !this.iconShow;
|
},
|
goDetail(item) {
|
this.detailData = item;
|
this.show = true;
|
// 当前数据是定时轮询地数据, 不必拿最新地数据了
|
// _futrueOrderDetail(item.order_no).then(data => {
|
// this.detailData = data
|
// this.show = true
|
// })
|
// this.$router.push({
|
// path:"/orderDetail?order_no=" + item.order_no
|
// });
|
},
|
onClose() {
|
// 关闭
|
this.show = false;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.border-b-color {
|
@include themify() {
|
border-bottom: 1px solid themed("border_color");
|
}
|
}
|
|
::v-deep .van-popup {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
}
|
|
.open-btn {
|
border-radius: 10px;
|
}
|
</style>
|
