<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>
|
