<template>
|
<div class="popup-delivery w-700 overflow-hidden">
|
<div class="border-b-color pt-54 pb-36 relative textColor">
|
<h1 class="font-38 px-32">{{ detailData.name }} {{ $t("交割") }}</h1>
|
<img
|
src="@/assets/image/icon-close.png"
|
class="w-38 h-38 absolute right-10 top-10"
|
@click="onClose"
|
/>
|
</div>
|
<div
|
class="flex justify-center mt-45"
|
v-if="!(detailData.state === 'created')"
|
>
|
<!-- {{detailData.time_num}} -->
|
<!-- <van-circle v-model=" currentRate" :rate="detailData.time_num" :speed="100" :text="text"
|
layer-color="#F5F5F5">-->
|
<!-- </van-circle>-->
|
<van-circle
|
v-show="rate != 0"
|
layer-color="#ccc"
|
size="120px"
|
v-model="currentRate"
|
:rate="rate"
|
:speed="0"
|
:text="text"
|
>
|
<van-count-down
|
@finish="handleFinish"
|
class="textColor"
|
ref="coutDown"
|
@change="timeChange"
|
:time="remain_time * 1000"
|
:format="timeFormat"
|
/>
|
</van-circle>
|
</div>
|
<div
|
class="mt-45 font-50 text-center"
|
:class="{
|
'text-green': detailData.profit_state === '1',
|
'text-red': detailData.profit_state === '0',
|
}"
|
v-else
|
>
|
{{ $t("盈亏")
|
}}<span
|
>{{ detailData.profit_state === "1" ? "+" : ""
|
}}{{ detailData.profit }}</span
|
>
|
USDT
|
</div>
|
<ul class="flex flex-col pb-61 textColor">
|
<li
|
v-for="item in listItem"
|
:key="item.id"
|
class="flex justify-between px-38 mt-28"
|
>
|
<p class="text-grey font-30">{{ item.text }}</p>
|
<p
|
class="font-30"
|
v-if="item.key == 'close_price'"
|
:class="{
|
'text-green':
|
(detailData.direction === 'buy' &&
|
detailData.state !== 'created' &&
|
parseFloat(price) * 1 >=
|
parseFloat(detailData['open_price']) * 1) ||
|
(detailData.direction === 'buy' &&
|
detailData.state == 'created' &&
|
parseFloat(detailData['close_price']) * 1 >=
|
parseFloat(detailData['open_price']) * 1) ||
|
(detailData.direction !== 'buy' &&
|
detailData.state !== 'created' &&
|
parseFloat(price) * 1 <=
|
parseFloat(detailData['open_price']) * 1) ||
|
(detailData.direction !== 'buy' &&
|
detailData.state == 'created' &&
|
parseFloat(detailData['close_price']) * 1 <=
|
parseFloat(detailData['open_price']) * 1),
|
'text-red':
|
(detailData.direction === 'buy' &&
|
detailData.state !== 'created' &&
|
parseFloat(price) * 1 <
|
parseFloat(detailData['open_price']) * 1) ||
|
(detailData.direction === 'buy' &&
|
detailData.state == 'created' &&
|
parseFloat(detailData['close_price']) * 1 <
|
parseFloat(detailData['open_price']) * 1) ||
|
(detailData.direction !== 'buy' &&
|
detailData.state !== 'created' &&
|
parseFloat(price) * 1 >
|
parseFloat(detailData['open_price']) * 1) ||
|
(detailData.direction !== 'buy' &&
|
detailData.state == 'created' &&
|
parseFloat(detailData['close_price']) * 1 >
|
parseFloat(detailData['open_price']) * 1),
|
}"
|
>
|
{{ detailData.state !== "created" ? price : detailData[item.key] }}
|
</p>
|
<p class="font-30" :class="colorChoose(item)" v-else>
|
{{ handleBuyWord(item) }}
|
</p>
|
</li>
|
</ul>
|
<div v-if="showBtns" class="flex justify-between text-white px-38 pb-61">
|
<p
|
:class="{
|
btnMain: detailData.state !== 'created',
|
bgDark: detailData.state === 'created',
|
}"
|
class="w-255 h-90 rounded-lg flex justify-center items-center mr-20"
|
@click="onClose"
|
>
|
{{ $t("关闭") }}
|
</p>
|
<p
|
@click="continueToBuy"
|
:class="{
|
btnMain: detailData.state === 'created',
|
bgDark: detailData.state !== 'created',
|
disableBtn: disabled,
|
}"
|
class="w-385 h-90 rounded-lg flex justify-center items-center"
|
>
|
{{ $t("继续下单") }}
|
</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Circle, CountDown } from "vant";
|
export default {
|
name: "PopupDelivery",
|
components: {
|
[Circle.name]: Circle,
|
[CountDown.name]: CountDown,
|
},
|
props: {
|
showBtns: {
|
type: Boolean,
|
default: false,
|
},
|
detailData: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
price: {
|
type: String,
|
default: "",
|
},
|
},
|
// watch: {
|
// detailData: {
|
// deep: true,
|
// handler(newVal) {
|
// this.ended = newVal.state === 'created';
|
// },
|
// }
|
// },
|
computed: {
|
timeFormat() {
|
let res;
|
if (!this.arr.length) {
|
return "--";
|
}
|
if (this.arr[0] / 1 > 0) {
|
res = "DDd HHh mmm sss";
|
} else {
|
if (this.arr[1] / 1 > 0) {
|
res = "mmm sss";
|
} else {
|
res = "sss";
|
}
|
}
|
return res;
|
},
|
text() {
|
return this.currentRate + "s";
|
},
|
listItem() {
|
return [
|
{ id: 1, text: this.$t("购买价"), key: "open_price" },
|
{
|
id: 2,
|
text:
|
this.detailData.state !== "created"
|
? this.$t("现价")
|
: this.$t("结算价格"),
|
key: "close_price",
|
},
|
{ id: 3, text: this.$t("方向"), key: "direction" },
|
{ id: 4, text: this.$t("数量"), key: "amount", extro: "USDT" },
|
{ id: 5, text: this.$t("交割时间"), key: "settlement_time" },
|
];
|
},
|
},
|
created() {
|
if (!(this.detailData.state === "created")) {
|
// 交割已完成
|
this.handleInit();
|
}
|
console.log(this.detailData);
|
},
|
beforeDestroy() {
|
clearInterval(this.interval);
|
console.log("before destroy..");
|
},
|
data() {
|
return {
|
totalTime: "", // 合约总时长
|
remain_time: 0,
|
arr: [],
|
currentRate: 0, // 当前进度
|
interval: null,
|
rate: 0, // 目标进度
|
// listItem: [
|
// {id: 1, text: '购买价', key: 'open_price'},
|
// {id: 2, text: '现价', key: 'close_price'},
|
// {id: 3, text: '方向', key: 'direction'},
|
// {id: 4, text: '数量', key: 'amount', extro: 'USDT'},
|
// {id: 5, text: '交割时间', key: 'settlement_time'}
|
// ]
|
};
|
},
|
methods: {
|
continueToBuy() {
|
if (this.detailData.state !== "created") {
|
return;
|
}
|
console.log();
|
this.$emit("continueToBuy", this.detailData);
|
|
//this.$router.push(`/trendDetails/${symbol}`)
|
},
|
handleBuyWord(item) {
|
if (item.id === 3) {
|
if (this.detailData.direction === "buy") {
|
return this.$t("卖入");
|
} else {
|
return this.$t("买出");
|
}
|
} else if (item.key === "settlement_time") {
|
return this.detailData.time_num + this.detailData.time_unit;
|
} else {
|
if ("extro" in item) {
|
return (
|
this.detailData[item.key] &&
|
this.detailData[item.key].toString() + item.extro
|
);
|
}
|
return (
|
this.detailData[item.key] && this.detailData[item.key].toString()
|
);
|
}
|
},
|
colorChoose(item) {
|
if (item.id === 2) {
|
return "text-green";
|
} else if (item.id === 3) {
|
return this.detailData.direction === "buy" ? "text-green" : "text-red";
|
}
|
},
|
handleFinish() {
|
this.$emit("timeEnd", this.detailData.order_no);
|
},
|
handleInit() {
|
// let a = new Date(this.detailData.open_time).getTime()
|
// let b = new Date(this.detailData.settlement_time).getTime()
|
// this.totalTime = (b - a) / 1000 苹果不兼容
|
this.totalTime = this.detailData.time_num;
|
console.log(this.detailData);
|
this.arr = [];
|
if (this.detailData.remain_time != undefined) {
|
this.arr = this.detailData.remain_time.split(":");
|
}
|
//this.arr = this.detailData?.remain_time?.split(':') || []
|
// 168:50:50 = 后台返回的时间格式
|
// 转化为秒
|
|
this.remain_time =
|
this.arr.length &&
|
(this.arr[0] / 1) * 3600 + (this.arr[1] / 1) * 60 + this.arr[2] / 1 + 2;
|
console.log(this.remain_time, this.arr);
|
this.rate = (this.remain_time / this.totalTime) * 100;
|
},
|
timeChange(time) {
|
let temp =
|
time.days * 86400 +
|
time.hours * 3600 +
|
time.minutes * 60 +
|
time.seconds;
|
this.rate = (temp / this.totalTime) * 100;
|
},
|
onClose() {
|
/// 关闭
|
this.$emit("close");
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.disableBtn {
|
@include themify() {
|
background: themed("bg_dark");
|
}
|
}
|
|
.popup-delivery {
|
@include themify() {
|
background: themed("input_background1");
|
}
|
|
::v-deep .van-circle__hover {
|
@include themify() {
|
stroke: themed("color_main");
|
}
|
}
|
}
|
|
.border-b-color {
|
@include themify() {
|
border-bottom: 1px solid themed("border_color");
|
}
|
}
|
</style>
|
