[liang]
3 years ago
17 changed files with 1132 additions and 128 deletions
@ -0,0 +1,475 @@ |
|||||
|
<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"> |
||||
|
<view class="card" v-for="(item, index) in dealList" :key="index"> |
||||
|
<view class="header"> |
||||
|
<text class="dealType" :class="{ long: item.dealType === 'long' }">long</text> |
||||
|
<text class="time">02-17 09:18:20</text> |
||||
|
<text class="closeTimeTitle" v-show="type === 2 || type === 3">{{ i18n.CloseTime }}</text> |
||||
|
<text class="closeTime" v-show="type === 2 || type === 3">02-17 16:11:35</text> |
||||
|
<view class="closeBtn" v-show="type === 0 || type === 1" @click="closeModalShow = true">{{ |
||||
|
i18n.close |
||||
|
}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="infoBody"> |
||||
|
<view class="item"> |
||||
|
<!-- 公共的 --> |
||||
|
<view class="left"> |
||||
|
<view class="title">{{ coin }}/{{ currency }}</view> |
||||
|
<view class="value">1 * 10</view> |
||||
|
<view class="title">{{ i18n.Bond }}</view> |
||||
|
<view class="value">4070.00</view> |
||||
|
<view class="title" v-show="type !== 3">{{ i18n.StyPrice }}</view> |
||||
|
<view class="value" v-show="type !== 3">0.00</view> |
||||
|
</view> |
||||
|
<!-- 公共的 --> |
||||
|
<view class="center"> |
||||
|
<view class="title">{{ i18n.AmountLeverage }}</view> |
||||
|
<view class="value">40700</view> |
||||
|
<view class="title">{{ i18n.Fee }}</view> |
||||
|
<view class="value">40.70</view> |
||||
|
<view class="title" v-show="type !== 3">{{ i18n.StsPrice }}</view> |
||||
|
<view class="value" v-show="type !== 3">0.00</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;">39952.64</view> |
||||
|
<view class="title" v-show="type === 0">{{ i18n.status }}</view> |
||||
|
<view class="value" v-show="type === 0">Closed</view> |
||||
|
<view class="title" v-show="type === 1">{{ i18n.do }}</view> |
||||
|
<view class="value" style="color:#00E8A2;" v-show="type === 1" |
||||
|
@click="stopModalShow = true"> |
||||
|
Stop/Limit</view> |
||||
|
<view class="title">{{ i18n.ExpectProfit }}</view> |
||||
|
<view class="value" style="color:#F4506A;">-730.45</view> |
||||
|
</view> |
||||
|
<!-- Closed --> |
||||
|
<view class="right" v-show="type === 2"> |
||||
|
<view class="title">{{ i18n.ClosePrice }}</view> |
||||
|
<view class="value" style="color:#00E8A2;">39952.64</view> |
||||
|
<view class="title">{{ i18n.status }}</view> |
||||
|
<view class="value">Closed</view> |
||||
|
<view class="title">{{ i18n.PL }}</view> |
||||
|
<view class="value" style="color:#00E8A2;">112.02</view> |
||||
|
</view> |
||||
|
<!-- Revoked --> |
||||
|
<view class="right" v-show="type === 3"> |
||||
|
<view class="title">{{ i18n.status }}</view> |
||||
|
<view class="value" style="color:#F4506A;">Closed</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"> |
||||
|
</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"> |
||||
|
<view class="stopModel"> |
||||
|
<view class="title"> |
||||
|
<text class="left">{{ i18n.StyPrice }}</text> |
||||
|
<text class="right">{{ i18n.ExpectProfit }} {{ 0.01 }}</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 }} {{ 0.01 }}</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> |
||||
|
|
||||
|
|
||||
|
</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: { |
||||
|
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 { |
||||
|
closeModalShow: false, |
||||
|
stopModalShow: false, |
||||
|
type: 0, |
||||
|
test: 0, |
||||
|
dealList: [ |
||||
|
{ |
||||
|
dealType: 'long' |
||||
|
}, |
||||
|
{ |
||||
|
dealType: 'long' |
||||
|
}, |
||||
|
], |
||||
|
styValue: 2.55, |
||||
|
stsValue: 0.3284974928739487, |
||||
|
stySubBtnDisabled: false, |
||||
|
stsSubBtnDisabled: false, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
i18n() { |
||||
|
return this.$t("markets"); |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
onHide() { |
||||
|
clearTimeout(timer2); |
||||
|
clearInterval(timer2); |
||||
|
timer1 = null; |
||||
|
timer2 = null; |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 类型改变 |
||||
|
* @param {*} type |
||||
|
*/ |
||||
|
onChangeType(type = 0) { |
||||
|
this.type = type |
||||
|
}, |
||||
|
/** |
||||
|
* close确认弹窗 |
||||
|
*/ |
||||
|
closeConfirm() { |
||||
|
this.closeModalShow = false |
||||
|
}, |
||||
|
/** |
||||
|
* stop确认弹窗 |
||||
|
*/ |
||||
|
stopConfirm() { |
||||
|
if (this.styValue < 0 || this.stsValue < 0) { |
||||
|
uni.showToast({ |
||||
|
title: this.i18n.lessThan, |
||||
|
icon: 'none', |
||||
|
duration: 2000 //持续时间为 |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
this.stopModalShow = false |
||||
|
}, |
||||
|
/** |
||||
|
* 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"> |
||||
|
.entrustOrderList { |
||||
|
.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> |
||||
@ -0,0 +1,177 @@ |
|||||
|
<template> |
||||
|
<view class="pmain"> |
||||
|
<view class="title"> |
||||
|
<view class="left">{{ i18n.UnitPrice }}</view> |
||||
|
<view class="num">{{ i18n.Number }}</view> |
||||
|
</view> |
||||
|
<view class="sell"> |
||||
|
<view class="item" v-for="(item, index) in sellList" :key="index" @click="depthClick(item)"> |
||||
|
<text class="price">47823.00</text> |
||||
|
<text class="num">{{ item }}</text> |
||||
|
<view class="sellbg" :style="`width: ${20 * index}%;`"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="currentPriceBody" @click="depthClick(item)"> |
||||
|
<view class="currentPrice">34985.93</view> |
||||
|
<view class="transition">≈$28767.23</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="buy"> |
||||
|
<view class="item" v-for="(item, index) in buyList" :key="index" @click="depthClick(item)"> |
||||
|
<text class="price">47823.00</text> |
||||
|
<text class="num">{{ item }}</text> |
||||
|
<view class="bg buybg" :style="`width: ${20 * index}%;`"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
item: Object |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
popoverVisible: false, |
||||
|
depthValue: 1, |
||||
|
sellList: 9, |
||||
|
buyList: 6, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
i18n() { |
||||
|
return this.$t("markets"); |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
depthClick(e) { |
||||
|
this.popoverVisible = !this.popoverVisible; |
||||
|
}, |
||||
|
depthChange(e) { |
||||
|
this.depthValue = e; |
||||
|
this.$emit('depthChange', e); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.pmain { |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
justify-content: space-between; |
||||
|
text-align: left; |
||||
|
color: #A1A0A8; |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
margin-bottom: 16rpx; |
||||
|
font-size: 24rpx; |
||||
|
|
||||
|
.left { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sell { |
||||
|
overflow: hidden; |
||||
|
height: 180rpx; |
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 30rpx; |
||||
|
display: flex; |
||||
|
font-size: 24rpx; |
||||
|
|
||||
|
.price { |
||||
|
display: block; |
||||
|
width: 50%; |
||||
|
text-align: left; |
||||
|
z-index: 1; |
||||
|
color: #F4506A; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
display: block; |
||||
|
width: 50%; |
||||
|
text-align: center; |
||||
|
padding-right: 10rpx; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.sellbg { |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
z-index: 0; |
||||
|
background: rgba($color: #F4506A, $alpha: 0.1) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.buy { |
||||
|
overflow: hidden; |
||||
|
height: 180rpx; |
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 30rpx; |
||||
|
display: flex; |
||||
|
font-size: 24rpx; |
||||
|
|
||||
|
.price { |
||||
|
display: block; |
||||
|
width: 50%; |
||||
|
text-align: left; |
||||
|
z-index: 1; |
||||
|
color: #00E8A2; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
display: block; |
||||
|
width: 50%; |
||||
|
text-align: center; |
||||
|
padding-right: 10rpx; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.buybg { |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
z-index: 0; |
||||
|
background: rgba($color: #00E8A2, $alpha: 0.1) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.currentPriceBody { |
||||
|
margin: 32rpx 0; |
||||
|
|
||||
|
.currentPrice { |
||||
|
font-size: 35rpx; |
||||
|
color: #00E8A2; |
||||
|
} |
||||
|
|
||||
|
.transition { |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 295 B |
|
After Width: | Height: | Size: 257 B |
|
After Width: | Height: | Size: 196 B |
Loading…
Reference in new issue