projectionscreenPc/src/views/coincoin/components/trade_form.vue

<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>