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.origin_price }}
					</view>
				</view>
				<view class="content-item">
					<text class="content-lable">标记价格(USDT)</text>
					<view class="content-val">
						{{ content.update_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">{{ content.share }}</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="setCloseLeverAll()">
							市价全平
						</view>
						<view class="content-btn" @click.stop="setCloseLever()">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>


	</uni-popup>
</template>

<script>
	import {
		Api_setCloseLever,

		Api_setBatchClose
	} from "@/api/index.js"
	export default {



		data() {
			return {
				content: {},
				percent: 0,
				numsk: '',
				priceType: 1, // 1 : 市价  2: 限价 
				// target_profit_price: '',
				// stop_loss_price: '',
				unopenInfo: {
					title: '平仓',
					content: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定平仓吗？'
				}

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

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

			},
			// const obj = {
			// 				title: '市价全平',
			// 				closeLeverContent: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定平仓吗？'
			// 			}


			// <view class="content-btn cancel-btn" @click.stop="setCloseLeverAll()">
			// 	市价全平
			// </view>
			// <view class="content-btn" @click.stop="setCloseLever()">
			// 	确定
			// </view>
			// 市价全平
			setCloseLeverAll() {
				this.unopenInfo = {
					title: '平仓',
					content: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定平仓吗？'
				};
				this.$emit('setCloseLeverAll' , this.unopenInfo)
				// this.$nextTick(() => {
				// 	this.$refs.unopenRef.open();
				// })

			},

			setCloseLever() {
				// id	是	number	订单id
				// share	否	number	【5-25】张数
				if (this.numsk && this.numsk <= this.content.share) {
					this.closeLever({
						id: this.content.id,
						share: this.numsk
					})

				}

			},


			confirm() {

				// id	是	number	订单id
				// share	否	number	【5-25】张数
				this.closeLever({
					id: this.content.id,
					share: this.content.share
				})

			},

			closeLever(obj) {
				uni.showLoading({
					title: '',
					mask: true
				});
				Api_setCloseLever(obj).then(res => {
					setTimeout(() => {
						uni.showToast({
							icon: 'none',
							title: '平仓成功'
						})
						this.$emit('refreshData')
					}, 201)
				}).catch(err => {}).finally(() => {
					setTimeout(() => {
						this.close()
					}, 200)
				})



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