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.
420 lines
12 KiB
420 lines
12 KiB
<template>
|
|
<view class="transaction">
|
|
<view class="tab" :class="type == 'buy' ? 'buy' : ''">
|
|
<view class="buy" :class="type == 'buy' ? 'select' : ''" @click="onChangeType('buy')">{{ i18n.LONG }}</view>
|
|
<view class="sell" :class="type == 'sell' ? 'select' : ''" @click="onChangeType('sell')">{{ i18n.SHORT }}
|
|
</view>
|
|
</view>
|
|
<view class="priceSelectBody">
|
|
<view class="priceTypeInput" @click="priceSelectListShow = true">{{ priceTypeList[priceTypeValue].text }}
|
|
</view>
|
|
<view class="shade" v-show="priceSelectListShow" @click="priceSelectListShow = false"></view>
|
|
<view class="priceTypeList" v-show="priceSelectListShow">
|
|
<view class="selectItem" :class="{ select: priceTypeValue === index }"
|
|
v-for="(item, index) in priceTypeList" :key="index" @click="selectChange(index)">
|
|
{{ item.text }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coinPrice">
|
|
<view class="noInput" v-show="priceTypeValue === 0">{{ i18n.MarketOptimalPrice }}</view>
|
|
<u-input class="input" v-show="priceTypeValue !== 0" v-model="coinPrice" color="#A1A0A8" fontSize="20rpx"
|
|
border="none" :placeholder="i18n.enterAddressTips">
|
|
</u-input>
|
|
<view class="currencyName">{{ currency }}</view>
|
|
</view>
|
|
|
|
<view class="twoInput">
|
|
<view class="leverageSelectBody">
|
|
<view class="leverageInput" @click="leverageListShow = true">{{ leverageValue }}</view>
|
|
<view class="shade" v-show="leverageListShow" @click="leverageListShow = false"></view>
|
|
<view class="leverageList" v-show="leverageListShow">
|
|
<view class="selectItem" :class="{ select: leverageValue === item }"
|
|
v-for="(item, index) in leverageList" :key="index" @click="leverageSelectChange(item)">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coinAmount">
|
|
<u-input class="input" v-model="coinAmount" color="#A1A0A8" fontSize="20rpx" border="none"
|
|
:placeholder="i18n.enterAddressTips">
|
|
</u-input>
|
|
<view class="currencyName">{{ coin }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 可用 Usable-->
|
|
<key-value-row class="text" :keyName="i18n.Usable" :value="`${coinPrice * coinAmount}${currency}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
<!-- 总计 Total-->
|
|
<key-value-row class="text" :keyName="i18n.Total" :value="`${coinPrice * coinAmount}${currency}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
<!-- 债券 Bond-->
|
|
<key-value-row class="text" :keyName="i18n.Bond" :value="`${coinPrice * coinAmount}${currency}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
<!-- 手续费 -->
|
|
<key-value-row class="text" :keyName="i18n.Fee" :value="`${coinPrice * coinAmount}${currency}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
|
|
<u-button class="button" :color="type == 'buy' ? '#00E8A2' : '#F4506A'" throttleTime="500" @click="btnClick">
|
|
{{ type === 'buy' ? `${i18n.buyLong}${coin}` : `${i18n.sellSHORT}${coin}` }}
|
|
</u-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import KeyValueRow from '../KeyValueRow/KeyValueRow.vue'
|
|
const COMPONENT_NAME = 'transaction'
|
|
export default {
|
|
components: { KeyValueRow },
|
|
name: COMPONENT_NAME,
|
|
props: {
|
|
coin: { // 数字货币名称
|
|
type: String,
|
|
default() {
|
|
return 'BTC'
|
|
}
|
|
},
|
|
currency: { // 货币名称
|
|
type: String,
|
|
default() {
|
|
return 'USDT'
|
|
}
|
|
},
|
|
type: { // 货币名称
|
|
type: String,
|
|
default() {
|
|
return 'buy'
|
|
}
|
|
},
|
|
coinPrice: { // 数字货币价格
|
|
type: Number,
|
|
default() {
|
|
return 0
|
|
}
|
|
},
|
|
coinAmount: { // 货币数量
|
|
type: Number,
|
|
default() {
|
|
return 1
|
|
}
|
|
},
|
|
bgTransparent: { // 背景是否透明
|
|
type: Boolean,
|
|
default() {
|
|
return false
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
priceSelectListShow: false,
|
|
priceTypeValue: 0,
|
|
priceTypeList: [
|
|
{ value: 0, text: this.$t("markets").MarketPrice },
|
|
{ value: 1, text: this.$t("markets").LimitPrice },
|
|
],
|
|
leverageListShow: false,
|
|
leverageValue: 10,
|
|
leverageList: [
|
|
10,
|
|
20,
|
|
30,
|
|
50,
|
|
100,
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("markets");
|
|
},
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
onChangeType(type = 'buy') {
|
|
this.type = type
|
|
},
|
|
selectChange(index) {
|
|
this.priceTypeValue = index;
|
|
this.priceSelectListShow = false;
|
|
console.log(e);
|
|
},
|
|
leverageSelectChange(item) {
|
|
this.leverageValue = item;
|
|
this.leverageListShow = false;
|
|
console.log(e);
|
|
},
|
|
btnClick(){
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.transaction {
|
|
width: 444rpx;
|
|
|
|
.tab {
|
|
display: flex;
|
|
border-radius: 16rpx;
|
|
background-color: rgba($color: #F4506A, $alpha: 0.1);
|
|
|
|
&.buy {
|
|
background-color: rgba($color: #00E8A2, $alpha: 0.1);
|
|
}
|
|
|
|
.buy {
|
|
flex: 1;
|
|
text-align: center;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
color: #F4506A;
|
|
border-radius: 16rpx;
|
|
|
|
&.select {
|
|
color: #15141F;
|
|
background-color: #00E8A2;
|
|
}
|
|
}
|
|
|
|
.sell {
|
|
flex: 1;
|
|
text-align: center;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
color: #00E8A2;
|
|
border-radius: 16rpx;
|
|
|
|
&.select {
|
|
color: #15141F;
|
|
background: #F4506A;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.priceSelectBody {
|
|
position: relative;
|
|
height: 64rpx;
|
|
margin-top: 24rpx;
|
|
background: #323045;
|
|
border-radius: 16rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.priceTypeInput {
|
|
position: relative;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
font-size: 20rpx;
|
|
color: #A1A0A8;
|
|
|
|
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/maskets/ic_ma_arrow_down.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 16rpx;
|
|
right: 0rpx;
|
|
}
|
|
}
|
|
|
|
.shade {
|
|
position: fixed;
|
|
top: 220rpx;
|
|
left: 0;
|
|
width: 750rpx;
|
|
height: 70vh;
|
|
background: transparent;
|
|
// background: #fff;
|
|
z-index: 0;
|
|
}
|
|
|
|
.priceTypeList {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 60rpx;
|
|
left: 0rpx;
|
|
z-index: 2;
|
|
background: #15141F;
|
|
border-radius: 10rpx;
|
|
width: 100%;
|
|
|
|
.selectItem {
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
font-size: 28rpx;
|
|
padding-left: 20rpx;
|
|
|
|
&.select {
|
|
background: #3f3e48;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.coinPrice {
|
|
position: relative;
|
|
margin-top: 20rpx;
|
|
height: 64rpx;
|
|
|
|
.noInput {
|
|
height: 64rpx;
|
|
background: #323045;
|
|
border-radius: 16rpx;
|
|
color: #A1A0A8;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.input {
|
|
height: 64rpx;
|
|
background: #323045;
|
|
border-radius: 16rpx;
|
|
color: #A1A0A8;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
padding-left: 20rpx !important;
|
|
}
|
|
|
|
.currencyName {
|
|
position: absolute;
|
|
height: 32rpx;
|
|
top: 0rpx;
|
|
right: 20rpx;
|
|
color: #A1A0A8;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.twoInput {
|
|
margin-top: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
display: flex;
|
|
|
|
.leverageSelectBody {
|
|
position: relative;
|
|
width: 212rpx;
|
|
height: 64rpx;
|
|
background: #323045;
|
|
border-radius: 16rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.leverageInput {
|
|
position: relative;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
font-size: 20rpx;
|
|
color: #A1A0A8;
|
|
|
|
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/maskets/ic_ma_arrow_down.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 16rpx;
|
|
right: 0rpx;
|
|
}
|
|
}
|
|
|
|
.shade {
|
|
position: fixed;
|
|
top: 220rpx;
|
|
left: 0;
|
|
width: 750rpx;
|
|
height: 70vh;
|
|
background: transparent;
|
|
// background: #fff;
|
|
z-index: 0;
|
|
}
|
|
|
|
.leverageList {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 60rpx;
|
|
left: 0rpx;
|
|
z-index: 2;
|
|
background: #15141F;
|
|
border-radius: 10rpx;
|
|
width: 100%;
|
|
|
|
.selectItem {
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
font-size: 28rpx;
|
|
padding-left: 20rpx;
|
|
|
|
&.select {
|
|
background: #3f3e48;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.coinAmount {
|
|
position: relative;
|
|
height: 64rpx;
|
|
margin-left: 20rpx;
|
|
|
|
.input {
|
|
height: 64rpx;
|
|
background: #323045;
|
|
border-radius: 16rpx;
|
|
color: #A1A0A8;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
padding-left: 20rpx !important;
|
|
}
|
|
|
|
.currencyName {
|
|
position: absolute;
|
|
height: 32rpx;
|
|
top: 0rpx;
|
|
right: 20rpx;
|
|
color: #A1A0A8;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text {
|
|
margin: 0;
|
|
}
|
|
|
|
.button {
|
|
box-sizing: border-box;
|
|
height: 64rpx;
|
|
border-radius: 16rpx;
|
|
font-weight: 700;
|
|
font-size: 24rpx;
|
|
color: #15141F !important;
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|