<template>
|
<!-- 委托列表 -->
|
<div>
|
<!-- <div class="flex justify-between" v-if="listData.length">-->
|
<!-- <div class="flex" @click.stop="changeIcon">-->
|
<!-- <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
|
<!-- <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
|
<!-- <div class="ml-37">{{ $t('隐藏其它合约') }}</div>-->
|
<!-- </div>-->
|
<!-- <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 font-25" @click="recallAll">{{ $t('全部撤销') }}</button>-->
|
<!-- </div>-->
|
<template v-if="listData.length > 0">
|
<div class="border-b-color" v-for="item in listData" :key="item.order_no">
|
<div class="flex justify-between items-center pt-34 pb-19">
|
<div class="flex flex-col">
|
<div class="flex items-center">
|
<div class="font-31 w-100 buy-title" :class="item.direction == 'buy' ? ' text-green' : 'text-red'">
|
{{ handleWord(item.direction, item.offset, item.order_price_type) }}
|
</div>
|
<div class="ml-20 font-31 font-600 textColor">{{ item.name }}</div>
|
</div>
|
</div>
|
<div class="text-grey font-26 flex flex-col justify-between">
|
{{ item.create_time }}
|
</div>
|
</div>
|
<div class="flex justify-between pb-34">
|
<div class="flex items-center flex-between">
|
<div class="w-100">
|
<van-circle v-model="currentRate" :rate="(1 - item.volume / item.volume_open * 100)" :speed="100"
|
:text="text" :layer-color="'#EAEBEF'" :stroke-width="60" :size="'65px'" />
|
</div>
|
<div class="ml-62">
|
<div class="flex items-center">
|
<div class="text-grey">
|
<div>{{ $t('数量') }}</div>
|
<!-- <di(USDT)v></div> -->
|
</div>
|
<div class="ml-25 font-26 textColor">{{ item.volume_open - item.volume }}/{{ item.volume_open }}</div>
|
</div>
|
<div class="flex mt-35 items-center">
|
<div class="text-grey">{{ $t('价格') }}</div>
|
<div class="ml-25 font-26 textColor">{{ item.price }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="btn-wrap mt-75">
|
<button class="order-btn colorMain borderMain bg-white" @click.stop="goDetail(item)">
|
{{ $t('详情') }}</button>
|
<button class="ml-19 order-btn border-none greyBg" @click.stop="cancelSingle(item.order_no)">
|
{{ $t('撤单') }}</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<div class="text-grey text-center py-300" v-if="!listData.length">{{ $t('还没有委托') }}</div>
|
</div>
|
</template>
|
|
<script>
|
import { Circle } from "vant";
|
import { _recallOrder, _recallOrderBatch } from "@/API/trade.api";
|
export default {
|
name: "perpetualEntrustList",
|
components: {
|
[Circle.name]: Circle
|
},
|
props: {
|
listData: {
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
currentRate: 0,
|
//委托列表
|
// entrustData:[
|
// { name:"BTC/USDT",create_time:"2022-04-05 22：10：31",direction:"buy",amount:"200",price:"23000"},
|
// { name:"ETH/USDT",create_time:"2022-04-05 22：10：31",direction:"sell",amount:"30",price:"1500"},
|
// ],
|
iconShow: false,
|
}
|
},
|
computed: {
|
text() {
|
return this.currentRate.toFixed(0) + '%';
|
},
|
},
|
mounted() {
|
},
|
methods: {
|
handleWord(direction, offset, price_type) {
|
let a = ''
|
let b = ''
|
if (price_type === 'limit') {
|
a = this.$t('限价')
|
} else {
|
a = this.$t('市价')
|
}
|
if (direction === 'buy' && offset === 'open') {
|
b = this.$t('开多')
|
} else if (direction === 'sell' && offset === 'open') {
|
b = this.$t('开空')
|
} else if (direction === 'buy' && offset === 'close') {
|
b = this.$t('平多')
|
} else {
|
b = this.$t('平空')
|
}
|
return a + '/' + b
|
},
|
changeIcon() {
|
this.iconShow = !this.iconShow;
|
},
|
goDetail(item) {
|
this.$router.push({
|
path: "/entrustDetail?order_no=" + item.order_no
|
});
|
// this.$emit('iszyzs', )
|
},
|
cancelSingle(order_no) {//撤销单个委托单
|
_recallOrder(order_no).then(() => {
|
this.$toast(this.$t('撤单成功'))
|
this.$emit('recall', order_no)
|
})
|
},
|
recallAll() { // 全部撤销
|
_recallOrderBatch().then(() => {
|
this.$toast(this.$t('撤单成功'))
|
this.$emit('recall')
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.btn-wrap {
|
display: flex;
|
justify-content: center;
|
align-content: center;
|
}
|
|
.order-btn {
|
font-size: 26px;
|
border-radius: 6px;
|
height: 53px;
|
line-height: 53px;
|
padding: 0 20px;
|
display: flex;
|
align-content: center;
|
justify-content: center;
|
|
@include themify() {
|
background: themed("btn_background1");
|
}
|
|
@include themify() {
|
border: themed("btn_background1");
|
}
|
|
color: #1194F7;
|
}
|
|
::v-deep .van-circle__text {
|
color: #DAD5DC;
|
}
|
|
.greyBg {
|
@include themify() {
|
background: themed("btn_background2");
|
}
|
|
color: #818181;
|
}
|
|
.border-b-color {
|
margin:0 20px;
|
@include themify() {
|
border-bottom: 1px solid themed("border_color") !important;
|
}
|
}
|
|
.w-100 {
|
min-width: 180px;
|
}
|
|
.ml-62 {
|
margin-left: 20px;
|
}
|
|
.buy-title {
|
width: 100px;
|
word-wrap: break-word;
|
word-break: break-all
|
}
|
</style>
|
