<template>
|
<div class="popup-delivery overflow-hidden">
|
<div class="border-b-color pt-27 pb-18 relative textColor">
|
<h1 class="font-20 px-16">{{ detailData.name }} {{ $t('delivery') }}</h1>
|
<img src="@/assets/image/icon-close.png" class="w-19 h-19 absolute right-10 top-10" @click="onClose" />
|
</div>
|
<div class="flex justify-center mt-22" 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:current-rate="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-22 font-25 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> USD</div>
|
<ul class="flex flex-col pb-30 textColor">
|
<li v-for="item in listItem" :key="item.id" class="flex justify-between px-19 mt-14">
|
<p class="text-grey font-16">{{ item.text }}</p>
|
<p class="font-16 " v-if="item.key == 'close_price'" :class="{
|
'text-green':
|
(detailData.direction === 'buy' && detailData.state !== 'created' && price * 1 >= detailData['open_price'] * 1) ||
|
(detailData.direction === 'buy' && detailData.state == 'created' && detailData['close_price'] * 1 >= detailData['open_price'] * 1) ||
|
(detailData.direction !== 'buy' && detailData.state !== 'created' && price * 1 <= detailData['open_price'] * 1) ||
|
(detailData.direction !== 'buy' && detailData.state == 'created' && detailData['close_price'] * 1 <= detailData['open_price'] * 1),
|
'text-red':
|
(detailData.direction === 'buy' && detailData.state !== 'created' && price * 1 < detailData['open_price'] * 1) ||
|
(detailData.direction === 'buy' && detailData.state == 'created' && detailData['close_price'] * 1 < detailData['open_price'] * 1) ||
|
(detailData.direction !== 'buy' && detailData.state !== 'created' && price * 1 > detailData['open_price'] * 1) ||
|
(detailData.direction !== 'buy' && detailData.state == 'created' && detailData['close_price'] * 1 > 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-18 pb-30">
|
<p :class="{ 'btnMain': detailData.state !== 'created', 'bgDark': detailData.state === 'created' }"
|
class="w-122 h-44 rounded-lg flex justify-center items-center mr-10" @click="onClose">{{ $t('close') }}</p>
|
<p @click="continueToBuy"
|
:class="{ 'btnMain': detailData.state === 'created', 'bgDark': detailData.state !== 'created', 'disableBtn': disabled }"
|
class="w-162 h-44 rounded-lg flex justify-center items-center">{{ $t('继续下单') }}</p>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { Circle, CountDown } from 'vant';
|
import { ref, onMounted, computed, onUnmounted } from 'vue';
|
import { useI18n } from "vue-i18n";
|
const { t } = useI18n()
|
const emits = defineEmits(['timeEnd', 'close', 'continueToBuy'])
|
const props = defineProps({
|
showBtns: {
|
type: Boolean,
|
default: false,
|
},
|
detailData: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
price: {
|
type: [Number, String],
|
default: '',
|
},
|
})
|
|
let totalTime = ref('') // 合约总时长
|
let remain_time = ref(0)
|
let arr = ref([])
|
let currentRate = ref(0) // 当前进度
|
let interval = ref(null)
|
let rate = ref(0) // 目标进度
|
|
const timeFormat = computed(() => {
|
let res
|
if (!arr.value.length) {
|
return '--'
|
}
|
if (arr.value[0] / 1 > 0) {
|
res = 'DDd HHh mmm sss'
|
} else {
|
if (arr.value[1] / 1 > 0) {
|
res = 'mmm sss'
|
} else {
|
res = 'sss'
|
}
|
}
|
return res
|
})
|
|
const text = computed(() => {
|
return currentRate.value + 's';
|
})
|
|
|
const listItem = computed(() => {
|
return [
|
{ id: 1, text: t('buyPrice'), key: 'open_price' },
|
{ id: 2, text: props.detailData.state !== 'created' ? t('现价') : t('结算价格'), key: 'close_price' },
|
{ id: 3, text: t('方向'), key: 'direction' },
|
{ id: 4, text: t('number'), key: 'amount', extro: 'USD' },
|
{ id: 5, text: t('交割时间'), key: 'settlement_time' }
|
]
|
})
|
|
onMounted(() => {
|
if (!(props.detailData.state === 'created')) {// 交割已完成
|
handleInit()
|
}
|
})
|
|
onUnmounted(() => {
|
clearInterval(interval.value)
|
interval.value = null
|
})
|
|
const continueToBuy = () => {
|
if (props.detailData.state !== 'created') {
|
return
|
}
|
emits('continueToBuy', props.detailData)
|
}
|
|
const handleBuyWord = (item) => {
|
if (item.id === 3) {
|
if (props.detailData.direction === 'buy') {
|
return t('开多')
|
} else {
|
return t('开空')
|
}
|
} else if (item.key === 'settlement_time') {
|
return props.detailData.time_num + props.detailData.time_unit
|
} else {
|
if ('extro' in item) {
|
return props.detailData[item.key] && props.detailData[item.key].toString() + item.extro
|
}
|
return props.detailData[item.key] && props.detailData[item.key].toString()
|
}
|
}
|
|
const colorChoose = (item) => {
|
if (item.id === 2) {
|
return 'text-green'
|
} else if (item.id === 3) {
|
return props.detailData.direction === 'buy' ? 'text-green' : 'text-red'
|
}
|
}
|
|
const handleFinish = () => {
|
emits('timeEnd', props.detailData.order_no)
|
}
|
|
const handleInit = () => {
|
totalTime.value = props.detailData.time_num
|
arr.value = []
|
if (props.detailData.remain_time != undefined) {
|
arr.value = props.detailData.remain_time.split(':');
|
}
|
remain_time.value = arr.value.length && arr.value[0] / 1 * 3600 + arr.value[1] / 1 * 60 + arr.value[2] / 1
|
|
rate.value = ((remain_time.value) / totalTime.value) * 100
|
|
}
|
|
const timeChange = (time) => {
|
let temp = time.days * 86400 + time.hours * 3600 + time.minutes * 60 + time.seconds
|
rate.value = ((temp) / totalTime.value) * 100
|
}
|
|
const onClose = () => { /// 关闭
|
emits('close')
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
@import '@/assets/css/copy.scss';
|
|
.popup-delivery {
|
font-size: 14px;
|
background: $main_background;
|
}
|
|
.disableBtn {
|
background: $light-grey !important;
|
}
|
|
|
:deep(.van-circle__hover) {
|
stroke: $btn_main
|
}
|
|
|
.border-b-color {
|
border-bottom: 1px solid $border_color;
|
}
|
|
.van-count-down {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 100%;
|
font-size: 20px;
|
}
|
</style>
|
