BiKing/pages/contract/modules/close-out.vue

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

		<view class="popups-box">
			<view class="popups-title">
				平仓
				<text class="close-icon iconfont" @click.stop="close()">&#xeca0;</text>
			</view>
			<view class="popups-content">
				<view class="content-item">
					<text class="content-lable">合约名称</text>
					<view class="content-val">
						<text class="val-name">{{ content.symbol }}</text>
						<text class="val-lever">{{ content.multiple }}倍杠杆</text>
						<text class="val-tag">{{ content.type_name }}</text>
					</view>
				</view>
				<view class="content-item">
					<text class="content-lable">开仓价格(USDT)</text>
					<view class="content-val">
						{{ content.price }}
					</view>
				</view>
				<view class="content-item">
					<text class="content-lable">标记价格(USDT)</text>
					<view class="content-val">
						{{ content.origin_price }}
					</view>
				</view>




				<view class="content-restrict">
					<view class="restrict-item">
						<text class="restrict-lable">平仓价格(USDT)</text>
						<!-- <view class="restrict-btn" v-if="content">
							<text class="iconfont">&#xe672;</text>
							<text>按比例设置</text>
						</view> -->
					</view>
					<view class="restrict-input-box input-type">
						<text class="restrict-input" v-show="priceType === 1">市价</text>
						<input class="restrict-input" type="number" v-show="priceType === 2" placeholder-class="placeholder-class" placeholder="请输入委托价">
						<text class="restrict-tag">USDT</text>
						<view class="restrict-switch" @click.stop="priceType === 1 ? priceType = 2 : priceType = 1">
							<text class="restrict-btn">{{ priceType === 1 ? '市价' : '限价' }}</text>
							<text class=" iconfont">&#xe672;</text>
						</view>
					</view>
					<view class="restrict-item">
						<text class="restrict-lable">平仓数量(USDT)</text>
						<view class="restrict-btn">
							<text class="restrict-nums-text">可平仓位数量(张):</text>
							<text class="restrict-nums">{{ numss }}</text>
						</view>
					</view>
					<view class="restrict-input-box">
						<input class="restrict-input" v-model="numsk" @focus="numsFocus" type="number">
						<text class="restrict-tag">张</text>
					</view>
					<view class="step-content">
						<step :percent.sync="percent" />
					</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"
	export default {



		data() {
			return {
				content: {},
				percent: 0,
				numss: 196,
				numsk: '',
				priceType: 1, // 1 : 市价  2: 限价 
				// target_profit_price: '',
				// stop_loss_price: '',


			};
		},
		watch: {
			percent: {
				handler(newNum) {
					if (newNum) {
						let num = Math.ceil(this.numss * newNum / 100)
						this.numsk = num > this.numss ? this.numss : num
					} else {
						this.numsk = ''
					}
				}
			}
		},
		mounted() {
			// this.open()
		},
		methods: {
			open(item = {}) {
				this.content = item;
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			close() {
				this.$refs.popupRef.close()
			},

			// 平仓数量获取焦点时,根据情况复原百分比进度条
			numsFocus() {
				if (this.percent) {
					this.percent = 0;
					this.numsk = ''
				}

			},









			// confirm() {
			// 	this.close();
			// 	this.$emit('confirm')
			// },
			// 
			setLeverStop() {
				if (this.content) {
					// 单个持仓修改
					Api_setLeverStop({
						id: this.content.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;
				font-size: 24rpx;
			}

			.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;
			border-top: 1rpx solid $border-color2;

			.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-nums-text {
						font-size: 26rpx;
						color: $SizeColor3;
						border-bottom: 1rpx dashed $border-color12;
					}

					.restrict-nums {
						font-size: 24rpx;
						color: $Theme-Color;
					}
				}
			}

			.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;
				}

				.restrict-switch {
					flex-shrink: 0;
					.iconfont {
						font-size: 22rpx;
						color: #c29032;
						padding-left: 10rpx;
					}
				}
			}

			.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;
			}
		}
	}

	.step-content {
		padding-top: 40rpx;
	}

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