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.
409 lines
14 KiB
409 lines
14 KiB
<template>
|
|
<div class="exchange-warp">
|
|
<div class="titlebox">
|
|
<div class="el-tabs-title">
|
|
<span :class="{'active': dealType == 'E_I_P_T_ASTRICT'}" @click="chooseDealType('E_I_P_T_ASTRICT')">{{$t('限价交易')}}</span>
|
|
<span :class="{'active': dealType == 'E_I_P_T_MARKET'}" @click="chooseDealType('E_I_P_T_MARKET')">{{$t('市价交易')}}</span>
|
|
<span :class="{'active': dealType == 'E_I_P_T_DYNAMIC'}" @click="chooseDealType('E_I_P_T_DYNAMIC')">{{$t('止盈止损')}}</span>
|
|
</div>
|
|
|
|
<router-link to="/" class="feilv-aa">{{$t('费率')}}</router-link>
|
|
</div>
|
|
|
|
<div class="el-tab-pane">
|
|
<div class="exchange-div1">
|
|
<div class="list1-div1">
|
|
<div class="available">{{$t('可用')}}: {{mainCoinBalance}} {{currentPair.convertType}}</div>
|
|
<div class="btn" @click="$router.push('/assets/charge/' + currentPair.convertType)">{{$t('充币')}}</div>
|
|
</div>
|
|
|
|
<!-- 买入表单 -->
|
|
<div class="exchange-box1 hc-bgColor2">
|
|
<div class="inputbox" style="margin-bottom: 10px" v-if="dealType == 'E_I_P_T_DYNAMIC'">
|
|
<span class="buy-span">{{$t('触发价')}}</span>
|
|
<el-input :placeholder="$t('请输入触发价')" v-model="buyTriggerPrice" type="text" clearable autocomplete="off" @keyup.enter.native="submitBuy"></el-input>
|
|
<span class="bz-span">{{currentPair.convertType}}</span>
|
|
</div>
|
|
|
|
<div class="inputbox">
|
|
<span class="buy-span">{{$t('买入价')}}</span>
|
|
<el-input :placeholder="$t('请输入买入价格')" v-model="buyPrice" type="text" clearable autocomplete="off" @input="enterBuyPrice" :disabled="dealType == 'E_I_P_T_MARKET'" @keyup.enter.native="submitBuy"></el-input>
|
|
<span class="bz-span">{{currentPair.convertType}}</span>
|
|
</div>
|
|
|
|
<div class="text-Price">
|
|
<span>≈ 65826.98 CNY</span>
|
|
</div>
|
|
|
|
<div class="inputbox">
|
|
<span class="buy-span">{{$t('买入量')}}</span>
|
|
<el-input :placeholder="$t('请输入买入数量')" v-model="buyVolumn" type="text" clearable autocomplete="off" @input="enterBuyVolumn" @keyup.enter.native="submitBuy"></el-input>
|
|
<span class="bz-span">{{currentPair.dealCoin}}</span>
|
|
</div>
|
|
|
|
<div class="sliderbox">
|
|
<el-slider v-model="buyPercent" :step="25" :marks="buyMarks" show-stops @change="buySlider"></el-slider>
|
|
</div>
|
|
|
|
<div class="textbox">
|
|
{{$t('交易额')}} <span>{{buySummary}} {{currentPair.convertType}}</span>
|
|
</div>
|
|
|
|
<div class="buy-btnbox" @click="submitBuy">
|
|
<el-button class="buy-btn" type="primary" :loading="true" v-if="loading1">{{$t('提交中...')}}</el-button>
|
|
<el-button class="buy-btn" type="primary" v-else>{{$t('买入')}} {{currentPair.dealCoin}}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 卖出表单 -->
|
|
<div class="exchange-div1">
|
|
<div class="list1-div1">
|
|
<div class="available">{{$t('可用')}}: {{tradeCoinBalance}} {{currentPair.dealCoin}}</div>
|
|
<div class="btn" @click="$router.push('/assets/charge/' + currentPair.dealCoin)">{{$t('充币')}}</div>
|
|
</div>
|
|
|
|
<div class="exchange-box1 hc-bgColor2">
|
|
<div class="inputbox" style="margin-bottom: 10px" v-if="dealType == 'E_I_P_T_DYNAMIC'">
|
|
<span class="buy-span">{{$t('触发价')}}</span>
|
|
<el-input :placeholder="$t('请输入触发价')" v-model="sellTriggerPrice" type="text" clearable autocomplete="off" @keyup.enter.native="submitSell"></el-input>
|
|
<span class="bz-span">{{currentPair.convertType}}</span>
|
|
</div>
|
|
|
|
<div class="inputbox">
|
|
<span class="buy-span">{{$t('卖出价')}}</span>
|
|
<el-input :placeholder="$t('请输入卖出价格')" v-model="sellPrice" type="text" clearable autocomplete="off" :disabled="dealType == 'E_I_P_T_MARKET'" @keyup.enter.native="submitSell"></el-input>
|
|
<span class="bz-span">{{currentPair.convertType}}</span>
|
|
</div>
|
|
|
|
<div class="text-Price">
|
|
<span>≈ 8512.98 CNY</span>
|
|
</div>
|
|
|
|
<div class="inputbox">
|
|
<span class="buy-span">{{$t('卖出量')}}</span>
|
|
<el-input :placeholder="$t('请输入卖出数量')" v-model="sellVolumn" type="text" clearable autocomplete="off" @input="enterSellVolumn" @keyup.enter.native="submitSell"></el-input>
|
|
<span class="bz-span">{{currentPair.dealCoin}}</span>
|
|
</div>
|
|
|
|
<div class="sliderbox">
|
|
<el-slider v-model="sellPercent" :step="25" :marks="sellMarks" show-stops @change="sellSlider"></el-slider>
|
|
</div>
|
|
|
|
<div class="textbox">
|
|
{{$t('交易额')}} <span>{{sellSummary}} {{currentPair.convertType}}</span>
|
|
</div>
|
|
|
|
<div class="buy-btnbox" @click="submitSell">
|
|
<el-button class="sell-button" type="primary" :loading="true" v-if="loading2">{{$t('提交中...')}}</el-button>
|
|
<el-button class="sell-button" type="primary" v-else>{{$t('卖出')}} {{currentPair.dealCoin}}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 验证支付密码的弹窗 -->
|
|
<el-dialog class="user-dialog" :title="$t('验证支付密码')" :visible.sync="showPassword" :before-close="closePassword">
|
|
<div class="title-tips">{{$t('支付密码')}}</div>
|
|
<div class="address-form-input">
|
|
<el-input :placeholder="$t('请输入支付密码')" v-model="payPassword" type="password" clearable autocomplete="off" @keyup.enter.native="submitTrade">
|
|
</el-input>
|
|
</div>
|
|
|
|
<div class="title-tips">{{$t('动态验证')}}</div>
|
|
<div class="address-form-input">
|
|
<el-input class="verify-input" :placeholder="$t('请输入验证码')" v-model="verifyCode" type="text" clearable autocomplete="off" @keyup.enter.native="submitTrade">
|
|
</el-input>
|
|
|
|
<span class="get-code" v-if="isCodeSend">{{iTime + $t('s后重新获取')}}</span>
|
|
<span class="get-code" @click="getCode" v-else>{{$t('获取验证码')}}</span>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" :loading="true" v-if="loading3">{{$t('提交中...')}}</el-button>
|
|
<el-button type="primary" @click="submitTrade" v-else>{{$t('确定')}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
let Countdown; //定时器
|
|
export default {
|
|
name: 'tradeForm',
|
|
props: {
|
|
mainCoinBalance: String, //主币余额
|
|
tradeCoinBalance: String, //交易币余额
|
|
},
|
|
data() {
|
|
return {
|
|
dealType: 'E_I_P_T_ASTRICT', //交易类型
|
|
dealDirection: 'E_I_D_T_BUY', //交易方向 E_I_D_T_BUY， E_I_D_T_SELL
|
|
|
|
//买入
|
|
buyPrice: '', //价格
|
|
buyVolumn: '', //数量
|
|
buyTriggerPrice: '', //止盈止损
|
|
buyMarks: {0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%'},
|
|
buyPercent: 0,
|
|
//卖出
|
|
sellPrice: '', //价格
|
|
sellVolumn: '', //数量
|
|
sellTriggerPrice: '', //止盈止损
|
|
sellMarks: {0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%'},
|
|
sellPercent: 0,
|
|
|
|
loading1: false, //买入提交
|
|
loading2: false, //卖出提交
|
|
loading3: false, //支付密码提交
|
|
showPassword: false, //密码弹框
|
|
payPassword: '', //支付密码
|
|
|
|
iTime: 60, //验证码倒计时
|
|
isCodeSend: false,
|
|
verifyCode: '', //验证码
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('user', ['userInfoData']),
|
|
...mapState('trend', ['allPairList', 'allTrendList', 'myCollectList', 'currentPair']),
|
|
|
|
maxBuyVolumn() { //最大买入数量
|
|
let val = 0;
|
|
if (this.buyPrice > 0 && this.buyPrice != '') {
|
|
val = this.common.accDiv(this.mainCoinBalance, this.buyPrice); //最大买入量=主币余额÷单价
|
|
}
|
|
return val;
|
|
},
|
|
buySummary() { //买入交易额
|
|
let val = 0;
|
|
if (this.buyPrice && this.buyVolumn) {
|
|
val = this.common.accMul(this.buyPrice, this.buyVolumn); //交易额=单价×数量
|
|
}
|
|
return val;
|
|
},
|
|
|
|
maxSellVolumn() { //最大卖出数量
|
|
let val = 0;
|
|
if (this.tradeCoinBalance) {
|
|
val = this.tradeCoinBalance; //最大卖出量=交易币余额
|
|
}
|
|
return val;
|
|
},
|
|
sellSummary() { //卖出交易额
|
|
let val = 0;
|
|
if (this.sellPrice && this.sellVolumn) {
|
|
val = this.common.accMul(this.sellPrice, this.sellVolumn); //交易额=单价×数量
|
|
}
|
|
return val;
|
|
},
|
|
},
|
|
watch: {
|
|
currentPair(newVal) {
|
|
if (newVal) {
|
|
this.buyPrice = this.currentPair.price;
|
|
this.sellPrice = this.currentPair.price;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
chooseDealType(val) { //切换交易方式
|
|
this.dealType = val;
|
|
if(val == 'E_I_P_T_MARKET') {
|
|
this.buyPrice = this.currentPair.price;
|
|
this.sellPrice = this.currentPair.price;
|
|
}
|
|
|
|
this.clearData();
|
|
},
|
|
|
|
enterBuyPrice() { //监听输入买入价格
|
|
if (this.buyPrice && this.buyPercent) {
|
|
let percent = this.common.accDiv(this.buyPercent, 100);
|
|
this.buyVolumn = this.common.accMul(this.maxBuyVolumn, percent);
|
|
}
|
|
},
|
|
enterBuyVolumn() { //监听输入买入数量
|
|
if (!this.buyPrice) {
|
|
this.$message.warning(this.$t('请先输入价格！'));
|
|
this.buyVolumn = '';
|
|
this.buyPercent = 0;
|
|
return;
|
|
} else if (parseFloat(this.buyVolumn) > this.maxBuyVolumn) {
|
|
this.$message.warning(this.$t('数量不能超过最大可买入量') + this.maxBuyVolumn);
|
|
this.buyVolumn = this.maxBuyVolumn;
|
|
this.buyPercent = 100;
|
|
} else {
|
|
let buy = parseFloat(this.buyVolumn);
|
|
this.buyPercent = parseFloat(this.common.accDiv(buy, this.maxBuyVolumn) * 100);
|
|
}
|
|
},
|
|
buySlider(val) { //买入滑块
|
|
if (!this.buyPrice) {
|
|
this.$message.warning(this.$t('请先输入价格！'));
|
|
this.buyVolumn = '';
|
|
this.buyPercent = 0;
|
|
return;
|
|
}
|
|
let percent = this.common.accDiv(val, 100);
|
|
this.buyVolumn = this.common.accMul(this.maxBuyVolumn, percent);
|
|
},
|
|
enterSellVolumn() { //监听输入卖出数量
|
|
if (parseFloat(this.sellVolumn) > this.maxSellVolumn) {
|
|
this.$message.warning(this.$t('数量不能超过最大可卖出量') + this.maxSellVolumn);
|
|
this.sellVolumn = this.maxSellVolumn;
|
|
this.sellPercent = 100;
|
|
} else if(this.sellVolumn) {
|
|
let sell = parseFloat(this.sellVolumn);
|
|
this.sellPercent = parseFloat(this.common.accDiv(sell, this.maxSellVolumn) * 100);
|
|
}
|
|
},
|
|
sellSlider(val) { //卖出滑块
|
|
let percent = this.common.accDiv(val, 100);
|
|
this.sellVolumn = this.common.accMul(this.maxSellVolumn, percent);
|
|
},
|
|
|
|
submitBuy() { //买入提交
|
|
if (this.loading1) {
|
|
return;
|
|
}
|
|
if(!this.userInfoData.initPayPwd) {
|
|
this.$message.error(this.$t('您还未设置支付密码!'));
|
|
return;
|
|
}
|
|
if (!this.buyPrice) {
|
|
this.$message.error(this.$t('请输入买入价格！'));
|
|
return;
|
|
}
|
|
if (!this.buyVolumn) {
|
|
this.$message.error(this.$t('请输入买入数量！'));
|
|
return;
|
|
}
|
|
if(this.dealType == 'E_I_P_T_DYNAMIC' && !this.buyTriggerPrice) {
|
|
this.$message.error(this.$t('请输入触发价！'));
|
|
return;
|
|
}
|
|
this.loading1 = true;
|
|
|
|
this.dealDirection = 'E_I_D_T_BUY';
|
|
this.showPassword = true;
|
|
},
|
|
submitSell() { //卖出提交
|
|
if (this.loading2) {
|
|
return;
|
|
}
|
|
if(!this.userInfoData.initPayPwd) {
|
|
this.$message.error(this.$t('您还未设置支付密码!'));
|
|
return;
|
|
}
|
|
if (!this.sellPrice) {
|
|
this.$message.error(this.$t('请输入买入价格！'));
|
|
return;
|
|
}
|
|
if (!this.sellVolumn) {
|
|
this.$message.error(this.$t('请输入买入数量！'));
|
|
return;
|
|
}
|
|
if(this.dealType == 'E_I_P_T_DYNAMIC' && !this.sellTriggerPrice) {
|
|
this.$message.error(this.$t('请输入触发价！'));
|
|
return;
|
|
}
|
|
this.loading2 = true;
|
|
|
|
this.dealDirection = 'E_I_D_T_SELL';
|
|
this.showPassword = true;
|
|
},
|
|
submitTrade() { //提交挂单
|
|
if (this.loading3) {
|
|
return;
|
|
}
|
|
if (!this.payPassword) {
|
|
this.$message.error(this.$t('请输入支付密码！'));
|
|
return;
|
|
}
|
|
if (!this.payPassword) {
|
|
this.$message.error(this.$t('请输入验证码！'));
|
|
return;
|
|
}
|
|
this.loading3 = true;
|
|
|
|
let params = {
|
|
symbolId: this.currentPair.symbolId, //交易对
|
|
caseCode: this.currentPair.caseCode,
|
|
dealType: this.dealDirection, //交易方向 买 卖
|
|
priceType: this.dealType, //交易类型 限价 市价 止盈止损
|
|
price: this.dealDirection == 'E_I_D_T_BUY' ? this.buyPrice : this.sellPrice, //单价
|
|
amount: this.dealDirection == 'E_I_D_T_BUY' ? this.buyVolumn : this.sellVolumn, //数量
|
|
triggerPrice: this.dealDirection == 'E_I_D_T_BUY' ? this.buyTriggerPrice : this.sellTriggerPrice,
|
|
payPwd: this.payPassword,
|
|
noteVerifyCode: this.verifyCode,
|
|
}
|
|
console.log(JSON.stringify(params))
|
|
|
|
this.postAxios('/api/entrust/info/putup', params)
|
|
.then(() => {
|
|
this.$message.success('挂单成功！');
|
|
this.closePassword();
|
|
this.clearData();
|
|
|
|
this.$emit('updateOrder');
|
|
})
|
|
.catch(() => {
|
|
this.loading3 = false;
|
|
})
|
|
},
|
|
|
|
closePassword() { //关闭密码弹窗
|
|
this.showPassword = false;
|
|
//清除数据
|
|
this.payPassword = '';
|
|
this.verifyCode = '';
|
|
|
|
this.loading1 = false;
|
|
this.loading2 = false;
|
|
this.loading3 = false;
|
|
},
|
|
clearData() { //清除数据
|
|
this.buyVolumn = '';
|
|
this.buyPercent = 0;
|
|
this.sellVolumn = '';
|
|
this.sellPercent = 0;
|
|
},
|
|
|
|
getCode() { //获取验证码
|
|
if (this.isCodeSend) {
|
|
this.$message.error(this.$t('请勿频繁获取验证码！'))
|
|
return;
|
|
}
|
|
this.isCodeSend = true;
|
|
|
|
this.getAxios(`/user/api/user/verify/get?verifyType=0`)
|
|
.then(() => {
|
|
this.$message.success(this.$t('验证码发送成功！'));
|
|
this.countdownTimer();
|
|
})
|
|
.catch(() => {
|
|
this.isCodeSend = false;
|
|
});
|
|
},
|
|
countdownTimer() { //短信发送开始计时60s
|
|
if (this.iTime === 0) {
|
|
clearTimeout(Countdown);
|
|
this.isCodeSend = false;
|
|
this.iTime = 60;
|
|
} else {
|
|
Countdown = setTimeout(this.countdownTimer, 1000);
|
|
this.iTime = this.iTime - 1;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.buyPrice = this.currentPair.price;
|
|
this.sellPrice = this.currentPair.price;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|