<template>
|
<div class="delivery-history-position">
|
<div class="position text-28">
|
<div class="position-padding" v-for="item in listData" :key="item.order_no">
|
<div class="position-tag">
|
<div class="position-tag-style" :class="item.direction === 'buy' ? 'green' : 'red'">
|
{{ item.direction === 'buy' ? $t('开多') : $t('开空') }}
|
</div>
|
<div class="position-tag-title textColor">{{ item.name }} {{ $t('交割') }}</div>
|
<div class="position-tag-title2">{{ $t('全仓') }}</div>
|
<img class="position-tag-img" src="@/assets/image/deliveryContract/Group1042.png" alt="" />
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('数量') }}</span>
|
<span class="position-value textColor">{{ item.volume }}</span>
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('方向') }}</span>
|
<span class="position-value" :class="item.direction === 'buy' ? 'color-green' : 'color-red'">
|
{{ item.direction === 'buy' ? $t('开多') : $t('开空') }}
|
</span>
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('交割时间') }}</span>
|
<span class="position-value textColor">{{ item.time_num + item.time_unit }}</span>
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('购买价') }}({{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
|
<span class="position-value textColor">{{ item.open_price }}</span>
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('结算价') }}({{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
|
<span class="position-value textColor">{{ item.close_price }}</span>
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('盈亏') }}</span>
|
<span class="position-value" :class="item.profit > 0 ? 'color-green' : 'color-red'">
|
{{ item.profit > 0 ? '+' + item.profit : item.profit }}
|
</span>
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('到期时间') }}</span>
|
<span class="position-value textColor">{{ dayjs(item.close_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
</div>
|
<div class="position-row">
|
<span class="position-label">{{ $t('操作') }}</span>
|
<span class="position-value colorMain" @click="onDetail(item)">{{ $t('详情') }}</span>
|
</div>
|
</div>
|
</div>
|
<van-popup v-model:show="show">
|
<popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="show = false" :disabled="true"
|
:price="price" />
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import { Tab, Tabs, Popup } from 'vant';
|
import PopupDelivery from '@/components/Transform/popup-delivery/index.vue'
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
active: 2,
|
show: false,
|
detailData: {},
|
routeType: 'cryptos'
|
}
|
},
|
props: {
|
listData: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
price: {
|
type: [Number, String],
|
default: '0.00'
|
},
|
},
|
components: {
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs,
|
[Popup.name]: Popup,
|
PopupDelivery
|
},
|
mounted() {
|
this.routeType = this.$route.query.type
|
},
|
methods: {
|
onDetail(item) { // 详细界面
|
this.show = true
|
this.detailData = item
|
},
|
dayjs
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '@/assets/css/variable.scss';
|
|
.delivery-history-position {
|
width: 100%;
|
font-size: 1.75rem;
|
|
.position {
|
width: 100%;
|
}
|
|
.position-padding {
|
padding: 2rem 0;
|
box-sizing: border-box;
|
width: 100%;
|
border-bottom: 2px solid $border_color;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
}
|
|
.position-tag {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 0.5rem 1rem;
|
|
.position-tag-style {
|
padding: 0.5rem 1.2rem;
|
font-size: 1.6rem;
|
font-weight: 500;
|
color: #fff;
|
border-radius: 8px;
|
}
|
|
.position-tag-title {
|
font-weight: 600;
|
font-size: 1.9rem;
|
color: $text_color;
|
}
|
|
.position-tag-title2 {
|
font-size: 1.7rem;
|
color: $text_color5;
|
}
|
|
.position-tag-img {
|
margin-left: auto;
|
width: 2.5rem;
|
height: 2rem;
|
object-fit: contain;
|
}
|
}
|
|
.green {
|
background: $green;
|
}
|
|
.red {
|
background: $red;
|
}
|
|
.position-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 1rem;
|
min-height: 2.5rem;
|
|
.position-label {
|
font-size: 1.6rem;
|
color: $text_color5;
|
flex-shrink: 0;
|
}
|
|
.position-value {
|
font-size: 1.7rem;
|
text-align: right;
|
word-break: break-all;
|
margin-left: 1rem;
|
}
|
}
|
|
.color-red {
|
color: $red !important;
|
}
|
|
.color-green {
|
color: $green !important;
|
}
|
|
.colorMain {
|
color: $color_main !important;
|
}
|
}
|
</style>
|
