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">
			<view class="swiper-lable">
				<template v-for="(item , index) in lableList">
					<text @click.stop="lableIndex = index"
						:class="['swiper-item', lableIndex === index ? 'active-swiper-item' : '' ]">{{ item }}</text>
				</template>
			</view>
			<view class="iconfont" @click.stop="getHistory()">&#xe613;</view>
		</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" @click.stop="PayCurrency()">
									充值
								</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>
							<view class="account-box">
								<view class="account-item">
									<view class="account-title">
										<text class="text">持仓保证金USDT)</text>
									</view>
									<text class="account-num">{{ contractAccount.usdt_totle || '--' }}</text>
								</view>
								<view class="account-item">
									<view class="account-title">
										<text class="text">可用保证金(USDT)</text>
									</view>
									<text class="account-num">{{ contractAccount.totle || '--'  }}</text>
								</view>
								<view class="account-item" :class="[$setColor(rateProfitsTotal.hazard_rate || '0.00')]">
									<view class="account-title">
										<text class="text">未实现亏盈(USDT)</text>
									</view>
									<text class="account-num color">{{ rateProfitsTotal.hazard_rate }}</text>
								</view>
							</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" />
		<popupHint ref="hintRef" title="快捷合约">
			<template #hintContent>
				<view class="">
					快捷合约是币王交易所为用户带来的新型区块链合约衍生品，有闪电开平仓、持仓稳定、抗市场干扰的优势，主要特点如下：
				</view>
				<!-- <view class="">
					赠金获取方式:
				</view> -->

				<view class="content-list">
					<text>1. 开仓/平仓流程及功能与永续一致</text>
					<text>2. 五交割期</text>
					<text>3. 市价开仓100%快速成交</text>
					<text>4. 开平仓价即为预估成交价</text>
					<text>5. 每天4：00（UTC+8）收取0.02%过夜费</text>
				</view>
				<view class="">
					更多内容请点击<text class="explain" @click.stop="readPactInfo(189)">《快捷合约》</text>
				</view>

				<view class="hite-box" @click.stop="readPact = !readPact">
					<text class="box">
						<text v-show="readPact" class="iconfont2">&#xe6c5;</text>
					</text>
					<text>不在提示</text>
				</view>
				<view class="confirm-btn" @click.stop="confirmHiteBtn">
					确定
				</view>
			</template>
		</popupHint>
	</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 popupHint from "../modules/popup-hint.vue"
	import {
		startWebSocket
	} from "@/utils/websock.js"
	import restrictPopup from "./../modules/restrict.vue"
	export default {
		name: 'shortcut',
		components: {
			lever,
			drawer,
			restrictPopup,
			popupHint
		},
		data() {
			return {
				readPact: false,
				closeLeverItem: null,
				lableList: [
					'开仓',
					'当前持仓'
				],
				lableIndex: 0,
				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 {}
				}
			},

			rateProfitsTotal: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		computed: {
			...mapGetters([
				'currencyVal',
				'daymarket',
				'stocksColor',
				'PageContentHeight',
				'tabBarHeight',
				'contractAccount'
			]),
		},
		mounted() {
			// startWebSocket()
		},
		watch: {
			currencyVal: {
				handler(newCurrency) {
					if (newCurrency && newCurrency?.legal_id) {
						this.init()
					}
				},
				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
			},
		},
		created() {
			this.openPactPopup()
		},
		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)
			// 	})
			// },
			confirmBtn() {

			},
			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()
				})
			},
			openPactPopup() {
				const readPactObj = this.$getStorageSync('contractReadPact');
				if (!readPactObj || !readPactObj.rapidPact) {
					this.readPact = false
					this.$nextTick(() => {
						this.$refs.hintRef.open()
					})
				}

			},
			// 提示弹框确认按钮
			confirmHiteBtn() {
				// t.readPact
				const readPactObj = this.$getStorageSync('contractReadPact') || {}

				readPactObj.rapidPact = this.readPact
				this.$setStorageSync('contractReadPact', readPactObj)
				this.$refs.hintRef.close();
			},
			// 阅读合约
			readPactInfo(id) {
				this.$readArticleInfo(id)
			},
			// 充值
			PayCurrency() {
				uni.navigateTo({
					url: '/pages/content/select-currency?type=recharge'
				})
			},
			// 获取历史
			getHistory(){
				uni.navigateTo({
					url: '/pages/contract/history/fast-history'
				})
			}
		}
	}
</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: center;
		justify-content: space-between;

		// width: 100%;
		// 	height: 100rpx;
		// 	border-bottom: 1rpx solid $border-color;
		// 	padding: 0 $pages-padding;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
		.swiper-lable {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.swiper-item {
			height: 100%;
			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%);
			}
		}
		.iconfont{
			font-size: 30rpx;
			color: $SizeColor1;
		}
	}

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

	// <view class="account-box">
	// 	<view class="account-item">
	// 		<view class="account-title">
	// 			<text class="text">持仓保证金USDT)</text>
	// 		</view>
	// 		<text class="account-num">{{ contractAccount.usdt_totle }}</text>
	// 	</view>
	// 	<view class="account-item">
	// 		<view class="account-title">
	// 			<text class="text">可用保证金(USDT)</text>
	// 		</view>
	// 		<text class="account-num">{{ contractAccount.totle }}</text>
	// 	</view>
	// 	<view class="account-item">
	// 		<view class="account-title">
	// 			<text class="text">未实现亏盈(USDT)</text>
	// 		</view>
	// 		<text class="account-num">{{ rateProfitsTotal.hazard_rate }}</text>
	// 	</view>
	// </view>

	.account-box {
		width: 100%;
		min-height: 120rpx;
		display: flex;
		align-items: stretch;

		width: 100%;
		padding: 30rpx $pages-padding;
		border-bottom: 1rpx solid $border-color4;

		.account-item {

			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			flex: 1;

			&:nth-child(3n) {
				text-align: right;
			}

			// 	&:nth-child(3n - 1) {
			// 		width: 35%;

			// 	}

			// 	&:nth-child(3n - 2) {
			// 		width: 30%;
			// 	}

			// 	&:nth-child(n + 4) {
			// 		margin-top: 20rpx;
			// 	}

			.account-title {

				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 600;
				color: #807e89;
				line-height: 30rpx;
			}

			.account-num {
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #1a1a1a;
				line-height: 33rpx;
				margin-top: 11rpx;
			}
		}
	}
</style>