BiKing/pages/contract/modules/restrict.vue

<template>
	<uni-popup ref="popupRef" type="bottom" @change="change">

		<view class="popups-box" :rise-fall="stocksColor">
			<view class="popups-title">
				{{ restrictOrder ? '持仓止盈止损修改' : '设置止盈止损' }}
				<text class="close-icon iconfont" @click.stop="close()">&#xeca0;</text>
			</view>
			<view class="popups-content">
				<template v-if="restrictOrder">
					<view class="content-item">
						<text class="content-lable">合约名称</text>
						<view class="content-val">
							<text class="val-name">{{ restrictOrder.symbol }}</text>
							<text class="val-lever">{{ restrictOrder.multiple }}倍杠杆</text>
							<text class="val-tag">{{ restrictOrder.type_name }}</text>
						</view>
					</view>
					<view class="content-item">
						<text class="content-lable">开仓价格(USDT)</text>
						<view class="content-val">
							{{ restrictOrder.origin_price }}
						</view>
					</view>
					<view class="content-item">
						<text class="content-lable">标记价格(USDT)</text>
						<view class="content-val">
							{{ restrictOrder.update_price }}
						</view>
					</view>
				</template>
				<view class="content-restrict">
					<view class="restrict-item">
						<text class="restrict-lable">止盈</text>
						<view class="restrict-btn" v-if="restrictOrder">
							<text class="iconfont">&#xe672;</text>
							<text>按比例设置</text>
						</view>
					</view>
					<view class="restrict-input-box">
						<input class="restrict-input" v-model="target_profit_price" type="number"
							placeholder-class="placeholder-class" placeholder="请输入触发价">
						<text class="restrict-tag">USDT</text>
						<text class="restrict-btn" @click.stop="target_profit_price = ''">清空</text>
					</view>
					<view class="restrict-input-box input-type">
						<text class="restrict-input">市价</text>
						<text class="restrict-tag">USDT</text>
						<text class="restrict-btn">市价</text>
					</view>
					<view class="restrict-hint">
						<text class="iconfont">&#xe8ec;</text>
						<text>市价单的成交价格可能偏离用户下单时看到的成交价格</text>
					</view>
					<view class="restrict-hint2" v-if="restrictOrder" :class="$setColor(profitPrice)">
						<text>当标价价格触达{{ target_profit_price || '--'}}时，将会触发市价委托平仓</text>
						<text>预计盈亏 <text class="color">{{ profitPrice || '--'}}</text> </text>
					</view>
					<view class="restrict-item">
						<text class="restrict-lable">止损</text>
						<view class="restrict-btn" v-if="restrictOrder">
							<text class="iconfont">&#xe672;</text>
							<text>按比例设置</text>
						</view>
					</view>
					<view class="restrict-input-box">
						<input class="restrict-input" v-model="stop_loss_price" type="number"
							placeholder-class="placeholder-class" placeholder="请输入触发价">
						<text class="restrict-tag">USDT</text>
						<text class="restrict-btn" @click.stop="stop_loss_price = ''">清空</text>
					</view>
					<view class="restrict-input-box input-type">
						<text class="restrict-input">市价</text>
						<text class="restrict-tag">USDT</text>
						<text class="restrict-btn">市价</text>
					</view>
					<view class="restrict-hint">
						<text class="iconfont">&#xe8ec;</text>
						<text>市价单的成交价格可能偏离用户下单时看到的成交价格</text>
					</view>
					<view class="restrict-hint2" v-if="restrictOrder" :class="$setColor(lossPrice)">
						<text>当标价价格触达{{ stop_loss_price || '--'}}时，将会触发市价委托平仓</text>
						<text>预计盈亏 <text class="color">{{ lossPrice || '--'}}</text></text>
					</view>
					<view class="content-btns">
						<view class="content-btn cancel-btn" @click.stop="close()">
							取消
						</view>
						<view class="content-btn" @click.stop="setLeverStop()">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		Api_setLeverStop
	} from "@/api/index.js"
	import {
		mapGetters
	} from 'vuex'
	export default {



		data() {
			return {
				content: null, // null : 下单时设置 ， 否则为但是仓位设置
				target_profit_price: '',
				stop_loss_price: '',
				profitPrice: "",
				lossPrice: ''
			};
		},
		watch: {
			restrictOrder: {
				handler(newOrder) {
					console.log('this.stop_loss_price  restrictOrder ' , newOrder)
					if (newOrder) {
						this.calculateProfitPrice(this.target_profit_price)
						this.calculateLossPrice(this.stop_loss_price)
					}
				},
				immediate: true,
				deep: true
			},
			target_profit_price: {
				handler(newPrice) {
					this.calculateProfitPrice(newPrice)
				},
				immediate: true
			},
			stop_loss_price: {
				handler(newPrice) {
					this.calculateLossPrice(newPrice)
				},
				immediate: true
			},

		},
		computed: {
			...mapGetters([
				"stocksColor",
				'restrictOrder'
			])
		},
		mounted() {
			// this.open()
		},
		methods: {
			calculateProfitPrice(newPrice) {
				if (newPrice && this.restrictOrder && newPrice > Number(this.restrictOrder
						.update_price)) {
					this.profitPrice = ((newPrice - this.restrictOrder.update_price) * 100 / this
						.restrictOrder.update_price * this.restrictOrder.caution_money).toFixed(2);
				} else {
					this.profitPrice = ''
				}
			},

			calculateLossPrice(newPrice) {
				if (newPrice && this.restrictOrder && newPrice < Number(this.restrictOrder.update_price)) {
					// console.log('this.calculateLossPrice = ' , newPrice , this.restrictOrder.update_price)
					this.lossPrice = ((newPrice - this.restrictOrder.update_price) * 100 / this
						.restrictOrder.update_price * this.restrictOrder.caution_money).toFixed(2);
				} else {
					this.lossPrice = ''
				}
			},
			open(item = null) {
				this.target_profit_price = '';
				this.stop_loss_price = '';
				// this.content = item;
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			close() {
				this.$refs.popupRef.close()
			},
			change(e) {
				if (!e.show) {
					this.$store.commit('websocket/set_restrictOrder', null)
				}
			},
			// this.$emit('change', {
			// 				show: false,
			// 				type: this.type
			// 			})
			// confirm() {
			// 	this.close();
			// 	this.$emit('confirm')
			// },
			// 
			setLeverStop() {
				if (this.restrictOrder) {
					// 单个持仓修改
					Api_setLeverStop({
						id: this.restrictOrder.id,
						target_profit_price: this.target_profit_price,
						stop_loss_price: this.stop_loss_price
					}).then(res => {
						this.close();
						this.$emit('setSuccess')
					})
				} else {
					// 全局下单设置
					this.close();
					this.$eventBus.$emit('placeOrder', {
						target_profit_price: this.target_profit_price,
						stop_loss_price: this.stop_loss_price
					});

				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.popups-box {
		width: 100%;

		.popups-title {
			text-align: center;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background-color: $box-bg;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			border-radius: 40rpx 40rpx 0 0;

			.close-icon {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

	}

	.popups-content {
		width: 100%;
		background-color: #fff;

		.content-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx $pages-padding;
			font-size: 22rpx;

			.content-lable {
				color: $SizeColor;
			}

			.content-val {
				color: #000;
				font-weight: bold;

				// <text class="val-name">LTC/USDT</text>
				// <text class="val-lever">100倍杠杆</text>
				// <text class="val-tag">逐仓做多</text>
				.val-name {}

				.val-tag,
				.val-lever {
					padding: 5rpx 4rpx;
					color: #fff;
					font-size: 20rpx;
					border-radius: 4rpx;
					margin-left: 6rpx;
				}

				.val-lever {

					background-color: $Theme-Color;
				}

				.val-tag {

					background-color: $Theme-Color1;
				}
			}

			&:last-child {
				border-bottom: 10rpx solid $border-color;
			}
		}

		.content-restrict {
			width: 100%;
			padding: 0 $pages-padding;

			.restrict-item {
				width: 100%;
				padding-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				font-weight: bold;

				.restrict-btn {
					.iconfont {
						font-size: 28rpx;
						color: $Theme-Color;
						margin-right: 10rpx;
					}
				}
			}

			.restrict-input-box {
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				height: 80rpx;
				border: 1rpx solid $border-color;
				border-radius: 10rpx;
				padding-right: 20rpx;

				text {
					flex-shrink: 0;
				}

				.restrict-input {
					flex: 1;
					height: 100%;
					border: none;
					padding: 0 20rpx;
				}

				.placeholder-class {
					font-size: 26rpx;
					font-weight: bold;
				}

				.restrict-tag {
					color: $SizeColor2;
				}

				.restrict-btn {
					color: $Theme-Color;
					padding-left: 20rpx;
				}
			}

			.input-type {
				background-color: $box-bg;

				.restrict-input {
					flex: 1;
					height: auto;
					padding: 0 20rpx;
					color: #000;
					font-weight: bold;

				}

				.restrict-btn {
					line-height: 1;
					border-left: 1px solid $Theme-Color;
					margin-left: 10rpx;
					padding-left: 10rpx;
				}
			}

			// <view class="restrict-hint">
			// 	<text class="iconfont">&#xe8ec;</text>
			// 	<text>市价单的成交价格可能偏离用户下单时看到的成交价格</text>
			// </view>
			// <view class="restrict-hint2">
			// 	<text>当标价价格触达{{ target_profit_price || '--'}}时，将会触发市价委托平仓</text>
			// 	<text>预计盈亏--</text>
			// </view>
			.restrict-hint {
				width: 100%;
				display: flex;
				align-items: center;
				padding-top: 10rpx;

				text {
					font-size: 22rpx;
				}

				.iconfont {
					font-size: 26rpx;
					margin-right: 6rpx;
					color: #000;
				}
			}

			.restrict-hint2 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				color: $SizeColor;
				padding-top: 10rpx;

				text+text {
					flex-shrink: 0;
					padding-left: 10px;
				}
			}
		}
	}

	.content-btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding-top: 60rpx;

		.content-btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			background-color: $Theme-Color;
			margin-bottom: 40rpx;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
			letter-spacing: 1px;
			border-radius: 6rpx;
		}

		.cancel-btn {
			margin-right: 20rpx;
			border: 1rpx solid $Theme-Color;
			background-color: #fff;
			color: $Theme-Color;
		}
	}
</style>