You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
608 lines
15 KiB
608 lines
15 KiB
<template>
|
|
<view class="entrustOrderList">
|
|
<!-- 四个tab -->
|
|
<view class="tab">
|
|
<view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">{{ i18n.CurrentEntrust }}
|
|
</view>
|
|
<view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">{{ i18n.Position }}
|
|
</view>
|
|
<view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">{{ i18n.Closed }}
|
|
</view>
|
|
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">{{ i18n.Revoked }}
|
|
</view>
|
|
</view>
|
|
<!-- 卡片列表 -->
|
|
<view class="content" v-if="list.length">
|
|
<view class="card" v-for="(item, index) in list" :key="index">
|
|
<view class="header">
|
|
<text class="dealType" :class="{ long: item.direction === 'long' }">{{item.direction}}</text>
|
|
<text class="time">{{item.timestr}}</text>
|
|
<text class="closeTimeTitle" v-show="type === 2 || type === 3">{{ i18n.CloseTime }}</text>
|
|
<text class="closeTime" v-show="type === 2 || type === 3">{{item.timestr2}}</text>
|
|
<view class="closeBtn" v-show="type === 0 || type === 1" @click="closeItem(item,index)">{{
|
|
i18n.close
|
|
}}</view>
|
|
</view>
|
|
|
|
<view class="infoBody">
|
|
<view class="item">
|
|
<!-- 公共的 -->
|
|
<view class="left">
|
|
<view class="title">{{ item.pair }}</view>
|
|
<view class="value">{{item.openedPrice}}</view>
|
|
<view class="title">{{ i18n.Bond }}</view>
|
|
<view class="value">{{item.bondAmount}}</view>
|
|
<view class="title" v-show="type !== 3">{{ i18n.StyPrice }}</view>
|
|
<view class="value" v-show="type !== 3">{{item.winStopPrice}}</view>
|
|
</view>
|
|
<!-- 公共的 -->
|
|
<view class="center">
|
|
<view class="title">{{ i18n.AmountLeverage }}</view>
|
|
<view class="value">{{getHand(item)}}</view>
|
|
<view class="title">{{ i18n.Fee }}</view>
|
|
<view class="value">{{item.fee}}</view>
|
|
<view class="title" v-show="type !== 3">{{ i18n.StsPrice }}</view>
|
|
<view class="value" v-show="type !== 3">{{item.lossStopPrice}}</view>
|
|
</view>
|
|
<!-- Current Entrust 和 Position-->
|
|
<view class="right" v-show="type === 0 || type === 1">
|
|
<view class="title">{{ i18n.CurrentPrice }}</view>
|
|
<view class="value" style="color:#F4506A;">{{item.currentPrice}}</view>
|
|
<view class="title" v-show="type === 0">{{ i18n.status }}</view>
|
|
<view class="value" v-show="type === 0">{{item.status}}</view>
|
|
<view class="title" v-show="type === 1">{{ i18n.do }}</view>
|
|
<view class="value" style="color:#00E8A2;" v-show="type === 1" @click="getStopLimit(item)">
|
|
Stop/Limit</view>
|
|
<view class="title">{{ i18n.ExpectProfit }}</view>
|
|
<view class="value" v-show="type === 1" :style="parseFloat(getItem(item.direction=='buy'?(marketDetail.close-item.openedPrice)*item.hand:(item.openedPrice-marketDetail.close)*item.hand))>=0?'color:#00E8A2':'color:#F4506A'">
|
|
{{getItem(item.direction=='buy'?(marketDetail.close-item.openedPrice)*item.hand:(item.openedPrice-marketDetail.close)*item.hand)}}
|
|
</view>
|
|
<view class="value" style="color:#00E8A2;" v-show="type === 2">0</view>
|
|
</view>
|
|
<!-- Closed -->
|
|
<view class="right" v-show="type === 2">
|
|
<view class="title">{{ i18n.ClosePrice }}</view>
|
|
<view class="value" style="color:#00E8A2;">{{item.currentPrice}}</view>
|
|
<view class="title">{{ i18n.status }}</view>
|
|
<view class="value">{{item.status}}</view>
|
|
<view class="title">{{ i18n.PL }}</view>
|
|
<view class="value" :style="item.profitAmount-item.fee>=0?'color:#00E8A2;':'color:#F4506A'">{{item.profitAmount-item.fee}}</view>
|
|
</view>
|
|
<!-- Revoked -->
|
|
<view class="right" v-show="type === 3">
|
|
<view class="title">{{ i18n.status }}</view>
|
|
<view class="value" style="color:#F4506A;">{{item.status}}</view>
|
|
<view class="title">{{ i18n.PL }}</view>
|
|
<view class="value" style="color:#00E8A2;"><!-- {{item.currentPl}} --> 0</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- close确认框 -->
|
|
<u-modal :show="closeModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
|
|
:title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="closeConfirm" @cancel="closeModalShow = false"
|
|
confirmColor="#00E8A2" cancelColor="#96959E">
|
|
</u-modal>
|
|
|
|
<!-- stop确认框 -->
|
|
<u-modal :show="stopModalShow" :confirmText="i18n.Confirm" :cancelText="i18n.Cancel" :showCancelButton="true"
|
|
:title="i18n.StopLimit" :content='i18n.WarmTipsText' @confirm="stopConfirm" @cancel="stopModalShow = false"
|
|
confirmColor="#00E8A2" cancelColor="#96959E">
|
|
<view class="stopModel">
|
|
<view class="title">
|
|
<text class="left">{{ i18n.StyPrice }}</text>
|
|
<text class="right">{{ i18n.ExpectProfit }} {{ stopLimitData.winStopPrice }}</text>
|
|
</view>
|
|
<view class="numberInput">
|
|
<button class="btn sub" :class="{ disabled: stySubBtnDisabled || styValue <= 0 }"
|
|
:disabled="stySubBtnDisabled" @click="styValueChange('sub')"></button>
|
|
<input class="number" type="number" v-model="styValue" />
|
|
<button class="btn add" @click="styValueChange('add')"></button>
|
|
</view>
|
|
<view class="title">
|
|
<text class="left">{{ i18n.StsPrice }}</text>
|
|
<text class="right">{{ i18n.ExpectLoss }} {{ stopLimitData.lossStopPrice }}</text>
|
|
</view>
|
|
<view class="numberInput">
|
|
<button class="btn sub" :class="{ disabled: stsSubBtnDisabled || stsValue <= 0 }"
|
|
:disabled="stsSubBtnDisabled" @click="stsValueChange('sub')"></button>
|
|
<input class="number" type="number" v-model="stsValue" />
|
|
<button class="btn add" @click="stsValueChange('add')"></button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</u-modal>
|
|
|
|
<u-empty :text="i18n.Dataisempty" mode="data" v-if="!list.length"></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import KeyValueRow from '../KeyValueRow/KeyValueRow.vue'
|
|
const COMPONENT_NAME = 'transaction'
|
|
let timer1 = null;
|
|
let timer2 = null;
|
|
export default {
|
|
components: {
|
|
KeyValueRow
|
|
},
|
|
name: COMPONENT_NAME,
|
|
props: {
|
|
|
|
marketDetail: {
|
|
type: Object,
|
|
default () {
|
|
|
|
}
|
|
},
|
|
symbol: {
|
|
type: Object,
|
|
default () {
|
|
|
|
}
|
|
},
|
|
coin: { // 数字货币名称
|
|
type: String,
|
|
default () {
|
|
return 'BTC'
|
|
}
|
|
},
|
|
currency: { // 货币名称
|
|
type: String,
|
|
default () {
|
|
return 'USDT'
|
|
}
|
|
},
|
|
coinAmount: { // 货币数量
|
|
type: Number,
|
|
default () {
|
|
return 1
|
|
}
|
|
},
|
|
bgTransparent: { // 背景是否透明
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
status: 'undone',
|
|
closeModalShow: false,
|
|
stopModalShow: false,
|
|
type: 0,
|
|
test: 0,
|
|
dealList: [{
|
|
dealType: 'long'
|
|
},
|
|
{
|
|
dealType: 'long'
|
|
},
|
|
],
|
|
styValue: 0,
|
|
stsValue: 0,
|
|
stySubBtnDisabled: false,
|
|
stsSubBtnDisabled: false,
|
|
// 撤销订单数据
|
|
itemData: {},
|
|
// 设置止盈数据
|
|
stopLimitData: {},
|
|
}
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("markets");
|
|
},
|
|
},
|
|
watch: {
|
|
symbol: {
|
|
handler: function() {}
|
|
},
|
|
|
|
},
|
|
mounted() {
|
|
this.getContractOrderList()
|
|
},
|
|
onHide() {
|
|
clearTimeout(timer2);
|
|
clearInterval(timer2);
|
|
timer1 = null;
|
|
timer2 = null;
|
|
},
|
|
methods: {
|
|
getItem(i) {
|
|
i = parseFloat(i.toPrecision(10))
|
|
i = String(i)
|
|
return i.substring(0, i.indexOf(".") + 9);
|
|
},
|
|
// 获取设置止盈数据
|
|
getStopLimit(i) {
|
|
this.stopLimitData = i
|
|
this.stopModalShow = true
|
|
},
|
|
getHand(e) {
|
|
let i = e.leverage * e.hand
|
|
// i = '' + i
|
|
// i = parseFloat(i)
|
|
// let eformat = i.toExponential() // 转换为标准的科学计数法形式（字符串）
|
|
// let tmpArray = eformat.match(/\d(?:\.(\d*))?e([+-]\d+)/) // 分离出小数值和指数值
|
|
// let number = i.toFixed(Math.max(0, (tmpArray[1] || '').length - tmpArray[2]))
|
|
i = parseFloat(i.toPrecision(10))
|
|
// number = String(number)
|
|
i = String(i)
|
|
// return number.substring(0, number.indexOf(".") + 9);
|
|
return i.substring(0, i.indexOf(".") + 9);
|
|
},
|
|
// 获取撤销订单
|
|
closeItem(item, i) {
|
|
this.itemData = item
|
|
this.closeModalShow = true
|
|
},
|
|
// 合约订单列表
|
|
getContractOrderList() {
|
|
const orderList = this.$api.contractOrderList({
|
|
"pair": this.symbol.pair,
|
|
"status": this.status,
|
|
});
|
|
orderList.then(res => {
|
|
this.list = res.data
|
|
for (var i = 0; i < this.list.length; i++) {
|
|
if (this.list[i].addTime) {
|
|
this.list[i].timestr = this.$index.getformatyymmddhhmmss(this.list[
|
|
i].addTime)
|
|
}
|
|
if (this.list[i].closedTime) {
|
|
this.list[i].timestr2 = this.$index.getformatyymmddhhmmss(this.list[
|
|
i].closedTime)
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 类型改变
|
|
* @param {*} type
|
|
*/
|
|
onChangeType(type = 0) {
|
|
this.type = type
|
|
if (this.type == 0) {
|
|
this.status = 'undone'
|
|
}
|
|
if (this.type == 1) {
|
|
this.status = 'opened'
|
|
}
|
|
if (this.type == 2) {
|
|
this.status = 'closed'
|
|
}
|
|
if (this.type == 3) {
|
|
this.status = 'revoked'
|
|
}
|
|
this.getContractOrderList()
|
|
},
|
|
/**
|
|
* close确认弹窗
|
|
*/
|
|
closeConfirm() {
|
|
// 类型是undo调用 订单撤销
|
|
if (this.type == 0) {
|
|
const orderList = this.$api.contractCancel({
|
|
"orderNo": this.itemData.orderNo,
|
|
});
|
|
orderList.then(res => {
|
|
uni.$u.toast(this.$t("markets").Succeeded)
|
|
this.closeModalShow = false
|
|
this.getContractOrderList()
|
|
});
|
|
}
|
|
// 类型是opened 调用 合约订单平仓
|
|
if (this.type == 1) {
|
|
const orderList = this.$api.contractClosed({
|
|
"orderNo": this.itemData.orderNo,
|
|
});
|
|
orderList.then(res => {
|
|
uni.$u.toast(this.$t("markets").Succeeded)
|
|
this.closeModalShow = false
|
|
setTimeout(() => {
|
|
this.getContractOrderList()
|
|
}, 600)
|
|
});
|
|
}
|
|
},
|
|
/**
|
|
* stop确认弹窗
|
|
*/
|
|
stopConfirm() {
|
|
if (this.styValue < 0 || this.stsValue < 0) {
|
|
uni.showToast({
|
|
title: this.i18n.lessThan,
|
|
icon: 'none',
|
|
duration: 2000 //持续时间为
|
|
})
|
|
return;
|
|
}
|
|
const orderList = this.$api.setWinOrLossStopPrice({
|
|
"orderNo": this.stopLimitData.orderNo,
|
|
"winStopPrice": this.styValue,
|
|
"lossStopPrice": this.stsValue,
|
|
});
|
|
orderList.then(res => {
|
|
uni.$u.toast(this.$t("markets").Succeeded)
|
|
this.stopModalShow = false
|
|
setTimeout(() => {
|
|
this.getContractOrderList()
|
|
}, 600)
|
|
});
|
|
},
|
|
/**
|
|
* styValue值变化
|
|
*/
|
|
styValueChange(type = 'sub') {
|
|
if (type === 'sub') { // 减操作
|
|
this.styValue = parseInt(this.styValue) // 取整
|
|
this.styValue -= 1;
|
|
if (this.styValue <= 0) {
|
|
this.stySubBtnDisabled = true;
|
|
this.styValue = 0
|
|
} else {
|
|
this.stySubBtnDisabled = false;
|
|
}
|
|
} else { // 加操作
|
|
this.styValue = parseInt(this.styValue) // 取整
|
|
this.styValue += 1;
|
|
if (this.styValue <= 0) {
|
|
this.stySubBtnDisabled = true;
|
|
this.styValue = 0
|
|
} else {
|
|
this.stySubBtnDisabled = false;
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* stsValue值变化
|
|
*/
|
|
stsValueChange(type = 'sub') {
|
|
if (type === 'sub') { // 减操作
|
|
this.stsValue = parseInt(this.stsValue) // 取整
|
|
this.stsValue -= 1;
|
|
if (this.stsValue <= 0) {
|
|
this.stsSubBtnDisabled = true;
|
|
this.stsValue = 0
|
|
} else {
|
|
this.stsSubBtnDisabled = false;
|
|
}
|
|
} else { // 加操作
|
|
this.stsValue = parseInt(this.stsValue) // 取整
|
|
this.stsValue += 1;
|
|
if (this.stsValue <= 0) {
|
|
this.stsSubBtnDisabled = true;
|
|
this.stsValue = 0
|
|
} else {
|
|
this.stsSubBtnDisabled = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
/deep/ .u-empty {
|
|
top: 500% !important;
|
|
}
|
|
/deep/ .u-modal__content__text {
|
|
color: #96959E !important;
|
|
}
|
|
.entrustOrderList {
|
|
position: relative;
|
|
.tab {
|
|
display: flex;
|
|
background: #211F32;
|
|
|
|
.item {
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
|
|
&.select {
|
|
background: #323045;
|
|
color: #00E8A2;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.content {
|
|
padding: 32rpx;
|
|
|
|
.card {
|
|
position: relative;
|
|
font-size: 24rpx;
|
|
color: #A1A0A8;
|
|
background: #211F32;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx 32rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.header {
|
|
.dealType {
|
|
color: #00E8A2;
|
|
margin-right: 28rpx;
|
|
}
|
|
|
|
.time {
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.closeTimeTitle {
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.closeBtn {
|
|
position: absolute;
|
|
right: 32rpx;
|
|
top: 20rpx;
|
|
display: inline-block;
|
|
width: 98rpx;
|
|
height: 48rpx;
|
|
border-radius: 8rpx;
|
|
line-height: 48rpx;
|
|
background-color: rgba($color: #F4506A, $alpha: 0.1);
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
color: #F4506A;
|
|
}
|
|
}
|
|
|
|
.infoBody {
|
|
.item {
|
|
display: flex;
|
|
|
|
.title {
|
|
margin-top: 30rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.value {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
// flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
/deep/.u-popup__content {
|
|
background: #323045;
|
|
|
|
.u-modal__title {
|
|
color: #fff;
|
|
}
|
|
|
|
.u-modal__content__text {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.stopModel {
|
|
width: 560rpx;
|
|
font-size: 24rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 560rpx;
|
|
margin: 24rpx 0;
|
|
|
|
.left {}
|
|
|
|
.right {
|
|
color: #A1A0A8;
|
|
}
|
|
}
|
|
|
|
.numberInput {
|
|
display: flex;
|
|
height: 88rpx;
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
overflow: hidden;
|
|
|
|
.btn {
|
|
width: 80rpx;
|
|
|
|
background: #16141f;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
|
|
&.sub {
|
|
background-image: url(../../static/maskets/sub.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
background-position: 24rpx 28rpx;
|
|
}
|
|
|
|
&.add {
|
|
background-image: url(../../static/maskets/add.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
background-position: 24rpx 28rpx;
|
|
}
|
|
|
|
&.button-hover {
|
|
background: #211F32;
|
|
|
|
&.sub::after {
|
|
background-image: url(../../static/maskets/sub.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 64rpx;
|
|
background-position: 46rpx 56rpx;
|
|
|
|
}
|
|
|
|
&.add::after {
|
|
background-image: url(../../static/maskets/add.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 64rpx;
|
|
background-position: 46rpx 56rpx;
|
|
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
background: #211F32;
|
|
|
|
&.sub::after {
|
|
background-image: url(../../static/maskets/sub.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 64rpx;
|
|
background-position: 46rpx 56rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.number {
|
|
flex: 1;
|
|
border-left: 2rpx solid #323045;
|
|
border-right: 2rpx solid #323045;
|
|
text-align: center;
|
|
height: 88rpx;
|
|
;
|
|
line-height: 88rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
|