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.
459 lines
11 KiB
459 lines
11 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">{{ symbol.baseSymbol }}</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 contractConfig.leverage" :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">{{ symbol.coinSymbol }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 可用 Usable-->
|
|
<key-value-row class="text" :keyName="i18n.Usable" :value="`${contractConfig.useCapital}${symbol.baseSymbol}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
<!-- 总计 Total-->
|
|
<key-value-row class="text" :keyName="i18n.Total"
|
|
:value="`${(priceTypeValue === 0?marketDetail.close*coinAmount:coinPrice*coinAmount).toFixed(4)}${symbol.baseSymbol}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
<!-- 债券 Bond-->
|
|
<key-value-row class="text" :keyName="i18n.Bond"
|
|
:value="`${(priceTypeValue === 0?coinAmount*marketDetail.close/leverageValue:coinAmount*coinPrice/leverageValue).toFixed(4)}${symbol.baseSymbol}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
<!-- 手续费 -->
|
|
<key-value-row class="text" :keyName="i18n.Fee"
|
|
:value="`${(priceTypeValue === 0?coinAmount*marketDetail.close/leverageValue*contractConfig.rate:coinAmount*coinPrice/leverageValue*contractConfig.rate).toFixed(4)}${symbol.baseSymbol}`"
|
|
lineHeight="30rpx" size="24rpx" rightColor="#A1A0A8">
|
|
</key-value-row>
|
|
|
|
<u-button class="button" :color="type == 'buy' ? '#00E8A2' : '#F4506A'" throttleTime="500" @click="contractOrder">
|
|
{{ type === 'buy' ? `${i18n.buyLong}${symbol.coinSymbol}` : `${i18n.sellSHORT}${symbol.coinSymbol}` }}
|
|
</u-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import KeyValueRow from '../KeyValueRow/KeyValueRow.vue'
|
|
const COMPONENT_NAME = 'transaction'
|
|
export default {
|
|
components: {
|
|
KeyValueRow
|
|
},
|
|
name: COMPONENT_NAME,
|
|
props: {
|
|
|
|
type: { // 货币名称
|
|
type: String,
|
|
default () {
|
|
return 'buy'
|
|
}
|
|
},
|
|
contractConfig: {
|
|
type: Object,
|
|
default: () => {
|
|
|
|
}
|
|
},
|
|
symbol: {
|
|
type: Object,
|
|
default () {
|
|
|
|
}
|
|
},
|
|
marketDetail: { // 数字货币价格
|
|
type: Object,
|
|
default () {
|
|
|
|
}
|
|
},
|
|
bgTransparent: { // 背景是否透明
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
math:null,
|
|
priceSelectListShow: false,
|
|
priceTypeValue: 0,
|
|
priceTypeList: [{
|
|
value: 0,
|
|
text: this.$t("markets").MarketPrice
|
|
},
|
|
{
|
|
value: 1,
|
|
text: this.$t("markets").LimitPrice
|
|
},
|
|
],
|
|
leverageListShow: false,
|
|
leverageValue: 10,
|
|
coinPrice: 0,
|
|
coinAmount: 0
|
|
}
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("markets");
|
|
},
|
|
},
|
|
watch: {
|
|
contractConfig: {
|
|
deep: true,
|
|
handler: function (n,i) {
|
|
this.leverageValue = n.leverage[0];
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.leverageValue = this.contractConfig.leverage[0];
|
|
this.coinPrice = this.marketDetail.close
|
|
},
|
|
methods: {
|
|
|
|
onChangeType(type) {
|
|
this.$emit('onChangeType', type);
|
|
},
|
|
selectChange(index) {
|
|
this.priceTypeValue = index;
|
|
this.priceSelectListShow = false;
|
|
this.coinPrice = this.marketDetail.low
|
|
},
|
|
leverageSelectChange(item) {
|
|
this.leverageValue = item;
|
|
this.leverageListShow = false;
|
|
},
|
|
contractOrder() {
|
|
var data={
|
|
// direction:this.type==='buy'?'long':'short',
|
|
direction:this.type,
|
|
amount:this.coinAmount,
|
|
pair:this.symbol.pair,
|
|
leverage:this.leverageValue,
|
|
tradeModel:this.priceTypeValue===0?'market':'limit',
|
|
price:this.priceTypeValue===0?this.marketDetail.low:this.coinPrice,
|
|
remarks:'1'
|
|
}
|
|
// #ifdef H5
|
|
data.source='H5'
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
data.source='android'
|
|
// #endif
|
|
console.log(data);
|
|
const contractOrder = this.$api.contractOrder(data);
|
|
contractOrder.then(res => {
|
|
uni.showToast({
|
|
title: this.$t("markets").Succeeded,
|
|
icon: 'success',
|
|
duration: 1500
|
|
})
|
|
setTimeout(()=>{
|
|
uni.$emit("upData",true)
|
|
},800)
|
|
//使用uni.$emit触发全局事件，并传参 触发这个给兄弟组件 刷新页面下面的订单列表
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</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>
|
|
|