BiKing/pages/contract/shortcut/index.vue

<template>
	<view>
		<view class="contract-title" :rise-fall="stocksColor">
			<view class="contract-item" @click.stop="openDrawer">
				<view class="title-iocn">
					<text class="title-iocn-item"></text>
					<text class="title-iocn-item"></text>
					<text class="title-iocn-item"></text>
				</view>
				<!-- <image class="title-iocn" src="../../../static/logo.png" mode="aspectFit"></image> -->
				<text class="title-text">{{currencyVal.currency_name}}/{{currencyVal.legal_name}}</text>

			</view>
			<view class="contract-price" :class="$setColor(daymarket.now_price)">
				<text class="color">{{ daymarket.now_price }}</text>
				<text class="color" v-show="daymarket.change">{{ daymarket.change }}%</text>
			</view>
			<view class="contract-item">
				<text class="iconfont">&#xe625;</text>
			</view>
		</view>

		<view class="iframe-box">
			<template v-if="currencyVal.legal_id">
				<iframe
					:src="`https://doc.okenx.com/biking/kline.html?legal_id=${currencyVal.legal_id}&currency_id=${currencyVal.currency_id}&symbol=${currencyVal.currency_name}/${currencyVal.legal_name}`"
					frameborder="0"></iframe>
			</template>

		</view>
		<gap />

		<view class="swiper-title">
			<template v-for="(item , index) in lableList">
				<text @click.stop="lableIndex = index"
					:class="['swiper-item', lableIndex === index ? 'active-swiper-item' : '' ]">{{ item }}</text>
			</template>
		</view>
		<!-- {{  pagesInfo }} -->
		<view class="shortcut">
			<swiper class="swiper-content" :current="lableIndex"
				:style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
				<swiper-item class="swiper-item-box">
					<u-list>
						<view class="shortcut-open">
							<view class="shortcut-type">
								<view class="type-box">
									<text class="type-item active-type-item">市价委托</text>
									<text class="type-item">计划委托</text>
								</view>
								<view class="type-times"  @click.stop="adjustLever()">
									{{leverName}}{{ multiple }}x
									<text class="iconfont">&#xeb6d;</text>
								</view>
							</view>

							<view class="shortcut-price">
								<view class="price-box">
									<text class="price-lable">价格</text>
									<view class="price-info">
										<text class="price-num">{{ daymarket.now_price }}</text>
										<text class="price-tag">USDT</text>
									</view>
								</view>
								<view class="price-box">
									<text class="price-lable">保证金</text>
									<input class="price-inp" type="number" v-model="caution_money">
									<view class="price-info">
										USDT
									</view>
								</view>
							</view>

							<view class="shortcut-usable">
								<view class="usable-info">
									可用：{{ pagesInfo.user_lever }} USDT
								</view>
								<view class="usable-btn">
									充值
								</view>
							</view>

							<view class="shortcut-btns">
								<view class="shortcut-btn" @click.stop="setSubmitLever(2)">
									买入/做多
								</view>
								<view class="shortcut-btn" @click.stop="setSubmitLever(1)">
									卖出/做空
								</view>
							</view>
						</view>

					</u-list>
				</swiper-item>
				<swiper-item>
					<u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
						<template v-if="leverTransaction && leverTransaction.length > 0">
							<view class="lable-title">
								<text class="lable-title-text">仓位信息</text>
								<text class="lable-title-btn" @click.stop="setCloseLeverAll()">全部平仓</text>
							</view>
							<template v-for="item in leverTransaction">
								<view class="content-box" :rise-fall="stocksColor">
									<view class="content-top">
										<view class="top-left">
											<view class="top-left-title">
												<text>{{ item.symbol }}</text>
												<text v-if="item.settled == 0">永续</text>
												<text v-else-if="item.settled == 9">快捷合约</text>

											</view>
											<view class="top-left-b">
												<text>{{ item.multiple }}倍杠杆</text>
												<text class="top-left-b-tag">{{ item.type_name }}</text>
											</view>
										</view>

										<view class="top-right">
											<text>{{ item.profits }}</text>
											<text
												class="top-right-float"><text>浮动盈亏</text>{{ item.fact_profits }}%</text>
										</view>
									</view>
									<view class="content-info">
										<view class="info-item">
											<text class="info-item-lable">保证金(USDT)</text>
											<text class="info-item-val">{{ item.caution_money }}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">开仓价格(USDT)</text>
											<text class="info-item-val">{{ item.price }}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">预估平仓价格(USDT)</text>
											<text class="info-item-val">{{item.update_price}}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">过夜费</text>
											<text class="info-item-val">{{item.overnight_money}}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">风险率(%)</text>
											<text class="info-item-val">0%</text>
											<!-- {{ item.caution_money }} -->
										</view>

										<!-- <view class="info-item">
											<text class="info-item-lable">预计止损(USDT)</text>
											<text class="info-item-val"
												@click.stop="setRestrict(item)">{{ item.stop_loss_price || '--' }} <text
													class="iconfont">&#xe610;</text></text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">预计止盈(USDT)</text>
											<text class="info-item-val"
												@click.stop="setRestrict(item)">{{ item.target_profit_price || '--' }} <text
													class="iconfont">&#xe610;</text> </text>
										</view> -->
										<view class="info-item">
											<text class="info-item-lable">创建时间</text>
											<text class="info-item-val">{{ $getData_(item.create_time , false) }}</text>
										</view>
									</view>
									<view class="content-btns">
										<view class="content-btn-item" @click.stop="setCloseLever(item)">
											平仓
										</view>
										<view class="content-btn-item" @click.stop="setInversion(item)">
											反向开仓
										</view>
										<!-- 	<view class="content-btn-item">
											加仓
										</view> -->
									</view>
									<view class="set-stop">
										<view class="stop-left" @click.stop="setRestrict(item)">
											<text>止盈/止损</text>
											<text
												class="stop-num">{{ item.target_profit_price || '--' }}/{{ item.stop_loss_price || '--'}}</text>
											<text class="iconfont">&#xe610;</text>
										</view>
										<view class="stop-right">
											<text class="icon-size iconfont">&#xe8b0;</text>
											<text class="icon-size">分享</text>
										</view>
									</view>
								</view>
								<gap />
							</template>
						</template>
					</u-list>
				</swiper-item>
			</swiper>



		</view>

		<drawer ref="drawerRef" />
		<restrictPopup ref="restrictRef" @setSuccess="setSuccess" />
		<lever ref="leverRef" :leverNum.sync="multiple" :leverName.sync="leverName" />
		<unopen ref="placeOrderRef" @confirm="confirmPlaceOrder" title="下单确认" cancelBtn content="确定要下单吗？" />
		<unopen ref="unopenRef" @confirm="confirm" textAlign="left" :title="unopenSolt.title" cancelBtn
			:content="unopenSolt.closeLeverContent" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		Api_setSubmitLever,
		Api_getLeverDeal,
		Api_getRegister,
		Api_setBatchClose,
		Api_setCloseLever
	} from "@/api/index.js"

	import lever from "../sustainability/lever.vue"
	import drawer from "./../modules/drawer.vue"
	import {
		startWebSocket
	} from "@/utils/websock.js"
	import restrictPopup from "./../modules/restrict.vue"
	export default {
		name: 'shortcut',
		components: {
			lever,
			drawer,
			restrictPopup
		},
		data() {
			return {
				closeLeverItem: null,
				lableList: [
					'开仓',
					'当前持仓'
				],
				lableIndex: 1,
				leverName: '逐仓',
				multiple: 100, // 逐仓倍数
				caution_money: '',

				status: 1, // 状态，填1. 1市价交易,为0则是挂单交易
				scrollHeight: 0,
				unopenSolt: {
					title: '',
					content: ''
				}
			};
		},
		props: {
			leverTransaction: {
				type: Array,
				default: () => {
					return []
				}
			},
			pagesInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			...mapGetters([
				'currencyVal',
				'daymarket',
				'stocksColor',
				'PageContentHeight',
				'tabBarHeight'
			]),
		},
		mounted() {
			// startWebSocket()
		},
		watch: {
			currencyVal: {
				handler(newCurrency) {
					if (newCurrency && newCurrency?.legal_id) {

					}
				},
				deep: true,
				immediate: true
			},
			PageContentHeight: {
				handler(newHeigth) {
					if (newHeigth) {
						console.log('newHeigth = ', newHeigth)
						this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			init() {
				this.getLeverDeal()
				this.getRegister()
			},
			getRegister() {
				Api_getRegister({
					status: 1,
					legal_id: this.currencyVal.legal_id,
					currency_id: this.currencyVal.currency_id,
					settled: 9,
					limit: 1000
				}).then(res => {
					console.log('Api_getRegister = ', res)
				})
			},

			openDrawer() {
				this.$nextTick(() => {
					this.$refs.drawerRef.open();
				})
			},
			setSubmitLever() {
				this.$nextTick(() => {
					this.$refs.placeOrderRef.open()
				})
			},
			// 确认下单
			confirmPlaceOrder(type) {
				const obj = {
					legal_id: this.currencyVal.legal_id,
					currency_id: this.currencyVal.currency_id,
					multiple: this.multiple,
					caution_money: this.caution_money,
					status: this.status
				}

				Api_setSubmitLever(obj).then(res => {
					this.setSuccess()
				})
			},
			// 设置止盈止损
			setRestrict(item) {
				this.$nextTick(() => {
					this.$refs.restrictRef.open(item)
				})
			},
			setSuccess() {
				this.$emit('refreshData')
			},
			setCloseLever(item) {
				this.closeLeverItem = item;
				this.unopenSolt = {
					title: '平仓',
					closeLeverContent: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定平仓吗？'
				}
				this.setDepot();
			},
			setInversion() {

				this.closeLeverItem = -1;
				this.unopenSolt = {
					title: '反向开仓',
					closeLeverContent: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定反向开仓吗？',
				}
				this.setDepot();
			},
			setCloseLeverAll() {
				this.closeLeverItem = null;
				this.unopenSolt = {
					title: '全部平仓',
					closeLeverContent: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定全部平仓吗？',
				}
				this.setDepot();
				// this.title = '全部平仓';
				// this.closeLeverContent = '';
				// this.closeLeverItem = null;
				// this.$refs.unopenRef.open();
			},
			// 平仓 - 反向开仓
			setDepot(obj) {
				this.$nextTick(() => {
					this.$refs.unopenRef.open()
				})
			},

			confirm() {
				if (this.leverTransaction.length > 0) {
					if (this.closeLeverItem && this.closeLeverItem !== -1) {
						// 平仓
						Api_setCloseLever({
							id: this.closeLeverItem.id
						}).then(res => {
							this.setSuccess()
						})
					} else if (this.closeLeverItem == -1) {
						// 反向开仓

					} else {
						// 全部平仓
						Api_setBatchClose({
							type: 0,
							currency_id: this.currencyVal.currency_id
						}).then(res => {
							this.setSuccess()
						})
					}

				}
			},
			adjustLever() {
				this.$nextTick(() => {
					this.$refs.leverRef.open()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "~../sustainability/index.scss";

	.contract-title {
		padding: 5rpx $pages-padding 0;
		min-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid $border-color;

		.contract-price {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 0 20rpx;
			font-size: 28rpx;
		}

		.contract-item {
			flex-shrink: 0;
			display: flex;
			align-items: center;

			.title-iocn {
				width: 28rpx;
				height: 24rpx;
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: space-between;

				.title-iocn-item {
					width: 100%;
					height: 5rpx;
					border-radius: 3rpx;
					background: #111111;

					&:first-child {
						width: 50%;
					}
				}
			}

			.title-text {
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #141213;
				line-height: 1.2;
				letter-spacing: 0.74rpx;
				padding-left: 19rpx;
			}

			.title-ratio {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #808080;
				line-height: 33rpx;
			}

			.ratio-icon {
				width: 31rpx;
				height: 33rpx;
				margin-left: 22rpx;
			}
		}
	}

	// <view class="lable-title">
	// 	<template v-for="(item , index) in lableList">
	// 		<text class="lable-item">{{ item }}</text>
	// 	</template>
	// </view>
	.swiper-title {
		padding: 0 $pages-padding;
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid $border-color;
		display: flex;
		align-items: stretch;

		.swiper-item {
			font-size: 28rpx;
			display: flex;
			align-items: center;

			&:nth-child(n + 2) {
				margin-left: 60rpx;
			}
		}

		.active-swiper-item {
			font-size: 34rpx;
			color: $Theme-Color;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 30rpx;
				height: 5rpx;
				background-color: $Theme-Color;
				border-radius: 3rpx;
				transform: translateX(-50%);
			}
		}
	}

	.shortcut {

		.shortcut-open {
			padding: 30rpx $pages-padding;
		}

		.shortcut-type {
			width: 100%;
			display: flex;
			align-items: stretch;
			justify-content: space-between;

			.type-box {
				flex: 1;
				display: flex;
				align-items: stretch;
				border-radius: 6rpx;
				overflow: hidden;

				.type-item {
					font-size: 24rpx;
					flex-shrink: 0;
					flex: 1;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx solid $border-color6;
					color: $SizeColor;
				}

				.active-type-item {
					color: #fff;
					background-color: $Theme-Color;
					border: 1rpx solid $Theme-Color;
				}
			}

			.type-times {
				margin-left: 20rpx;
				width: 230rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid red;
				text-align: center;
				font-size: 26rpx;
				position: relative;
				color: $SizeColor;
				border: 1rpx solid $border-color6;
				border-radius: 6rpx;

				.iconfont {
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 20rpx;
					color: $Theme-Color;
				}
			}
		}
	}

	.shortcut-price {
		width: 100%;
		padding-top: 60rpx;

		.price-box {
			width: 100%;
			height: 80rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			background-color: $box-bg;
			font-size: 24rpx;
			color: $SizeColor2;

			.price-lable,
			.price-info {
				flex-shrink: 0;
			}

			.price-info {
				.price-num {
					color: #000;
					padding-right: 20rpx;
				}
			}

			.price-inp {
				flex: 1;
				height: 100%;
				padding: 0 10rpx;
				font-size: 24rpx;
				color: #000;
				text-align: right;
			}

			// <view class="price-box">
			// 	<text class="price-lable">价格</text>
			// 	<input class="price-inp" type="number">
			// 	<view class="price-info">
			// 		USDT
			// 	</view>
			// </view>
		}

		.price-box+.price-box {
			background-color: #fff;
			margin-top: 20rpx;
			border: 1rpx solid $box-bg;
		}
	}

	// <view class="shortcut-usable">
	// 	<view class="usable-info">
	// 		可用：2927.81 USDT
	// 	</view>
	// 	<view class="usable-btn">
	// 		充值
	// 	</view>
	// </view>
	.shortcut-usable {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: $SizeColor2;
		padding: 20rpx 0 40rpx;

		.usable-btn {
			color: $Theme-Color;
		}
	}

	// <view class="shortcut-btns">
	// 	<view class="shortcut-btn">
	// 		买入/做多
	// 	</view>
	// 	<view class="shortcut-btn">
	// 		卖出做空
	// 	</view>
	// </view>
	.shortcut-btns {
		display: flex;
		align-items: center;

		.shortcut-btn {
			flex: 1;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-color: $Theme-Color;

			&:nth-child(n + 2) {
				margin-left: 30rpx;
				background-color: $Theme-Color2;
			}
		}
	}

	.iframe-box {
		width: 100%;
		height: 50vh;

		iframe {
			width: 100%;
			height: 100%;
		}
	}

	// <view class="set-stop">
	// 	<view class="stop-left">
	// 		<text>止盈/止损</text>
	// 		<text class="stop-num">{{ item.target_profit_price || '--' }}/{{ item.stop_loss_price || '--'}}</text>
	// 		<text class="iconfont">&#xe610;</text>
	// 	</view>
	// 	<view class="stop-right">
	// 		<text class="icon-size iconfont">&#xe8b0;</text>
	// 		<text class="icon-size">分享</text>
	// 	</view>
	// </view>
	.set-stop {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 30rpx $pages-padding 0;

		.stop-left {
			font-size: 24rpx;
			color: $SizeColor2;

			.stop-num {
				padding: 0 10rpx;
			}

			.iconfont {
				color: $Theme-Color;
			}
		}

		.stop-right {

			color: $Theme-Color;
			font-size: 26rpx;

			.iconfont {
				margin-right: 6rpx;
			}
		}
	}
</style>