<template>
|
<div
|
class="popup-delivery w-700 rounded-2xl overflow-hidden px-32 box-border pb-50"
|
>
|
<div class="border-b-color pt-54 pb-36 relative">
|
<h1 class="font-38 px-32 textColor">{{ $t("订单确认") }}</h1>
|
<img
|
src="@/assets/image/icon-close.png"
|
class="w-38 h-38 absolute right-0 top-20"
|
@click="onClose"
|
/>
|
</div>
|
<div class="flex flex-wrap pt-16 tabBackground p-10 box-border">
|
<div class="w-half flex justify-between items-center pr-10 box-border">
|
<span class="text-grey">{{ $t("交易品种") }}</span
|
><span class="textColor">{{ symbol.toUpperCase() }}</span>
|
</div>
|
<div class="w-half flex justify-between items-center box-border">
|
<span class="text-grey">{{ $t("方向") }}</span
|
><span :class="direction === 'buy' ? 'text-green' : 'text-red'">{{
|
direction === "buy" ? $t("开多") : $t("开空")
|
}}</span>
|
</div>
|
<div
|
class="w-half flex justify-between items-center pr-10 box-border mt-16"
|
>
|
<span class="text-grey">{{ $t("当前价格") }}</span
|
><span class="textColor">{{ price }}</span>
|
</div>
|
</div>
|
<h2 class="font-30 mt-16">{{ $t("交货时间") }}</h2>
|
<ul class="flex flex-wrap w-full">
|
<li
|
v-for="(item, index) in paras"
|
:key="item.para_id"
|
class="h-92 flex items-center mt-17 w-half"
|
@click="select(index)"
|
>
|
<p
|
class="w-95 h-full flex justify-center items-center font-22 flex-1"
|
:class="
|
active === item.para_id
|
? 'bg-light-blue text-white'
|
: 'bgDark textColor'
|
"
|
>
|
{{ item.time_num + item.time_unit.substr(0, 1) }}
|
</p>
|
<p
|
class="w-125 h-full flex justify-center items-center font-22 flex-1"
|
:class="
|
active === item.para_id
|
? 'bg-dark-blue text-white'
|
: 'contBackground textColor'
|
"
|
>
|
{{ item.profit_ratio }}%
|
</p>
|
</li>
|
</ul>
|
<div
|
class="flex justify-between items-center mt-8 text-grey tabBackground mt-20 py-15 px-10 textColor"
|
>
|
<input
|
:placeholder="$t('最少') + paras[index].buy_min"
|
class="h-full"
|
style="border: none; background: none"
|
type="number"
|
v-model="amount"
|
/>
|
<span>USDT</span>
|
</div>
|
<div class="flex justify-between items-center mt-8 text-grey">
|
<span>{{ $t("可用的") }}</span>
|
<span>{{ balance }}</span>
|
</div>
|
<div class="flex justify-between items-center mt-8 text-grey">
|
<span>{{ $t("费用") }}</span>
|
<span>{{ amount * paras[index].unit_fee }}</span>
|
</div>
|
<div
|
class="h-80 rounded w-full btnMain text-white flex justify-center items-center mt-24"
|
@click="onConfirm"
|
>
|
{{ $t("确认订单") }}
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "PopupConfirmOrder",
|
props: {
|
paras: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
symbol: {
|
type: String,
|
},
|
direction: {
|
type: String,
|
},
|
balance: {},
|
paraIndex: {},
|
price: {},
|
},
|
data() {
|
return {
|
amount: "", // 金额
|
active: "",
|
index: 0,
|
};
|
},
|
created() {
|
this.active = this.paras[this.index].para_id;
|
},
|
methods: {
|
select(index) {
|
this.index = index;
|
this.active = this.paras[this.index].para_id;
|
},
|
onClose() {
|
// 关闭
|
this.$emit("close");
|
},
|
onConfirm() {
|
// 确认订单
|
if (this.amount == "") {
|
this.$toast(this.$t("请输入金额"));
|
return;
|
}
|
if (this.amount / 1 > this.balance / 1) {
|
this.$toast(this.$t("余额不足"));
|
return;
|
}
|
this.$emit("confirm", {
|
amount: this.amount,
|
para_id: this.active,
|
});
|
},
|
},
|
};
|
</script>
|
