[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