BiKing/pages/contract/sustainability/freight-space.vue

<template>
	<view class="">
		<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 :rise-fall="stocksColor">
					<view class="content-top">
						<view class="top-left">
							<view class="top-left-title">
								<text>{{ item.symbol }}</text>
								<text>{{ item.type_name }}</text>
								<text class="icon-size iconfont">&#xe8b0;</text>
								<text class="icon-size">分享</text>
							</view>
							<view class="top-left-b">
								<text>{{ item.multiple }}倍杠杆</text>
								<text class="top-left-b-tag">逐仓做多</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.origin_price }}</text>
						</view>
						<view class="info-item">
							<text class="info-item-lable">持仓数量(张)</text>
							<text class="info-item-val">{{ item.number }}</text>
						</view>
						<view class="info-item">
							<text class="info-item-lable">风险率(%)</text>
							<text class="info-item-val"></text>
							<!-- {{ item.caution_money }} -->
						</view>
						<view class="info-item">
							<text class="info-item-lable">预计强平价(USDT)</text>
							<text class="info-item-val"></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">预计创建时间(USDT)</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">
							反向开仓
						</view>
						<view class="content-btn-item">
							加仓
						</view>
					</view>
				</view>
				<gap />
			</template>
		</template>
		<template v-else>
			暂无数据
		</template>
		<unopen ref="unopenRef" @confirm="confirm" textAlign="left" title="平仓" cancelBtn :content="closeLeverContent" />
		<restrictPopup ref="restrictRef" @setSuccess="setSuccess" />
	</view>
</template>

<script>
	import {
		Api_setCloseLever
	} from "@/api/index.js"
	import {
		mapGetters
	} from 'vuex'
	import restrictPopup from "./../modules/restrict.vue"
	export default {
		name: 'freight-space',
		props: {
			closeLeverContent: {
				type: String,
				default: ''
			},
			leverTransaction: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		components: {
			restrictPopup
		},
		computed: {
			...mapGetters([
				"stocksColor"
			])
		},
		data() {
			return {
				title: '平仓',
				closeLeverItem: null,
				restrict: ''
			};
		},
		mounted() {

		},
		methods: {
			setCloseLever(item) {
				this.title = '平仓';
				this.closeLeverItem = item;
				this.$refs.unopenRef.open();
			},
			setCloseLeverAll() {
				this.title = '全部平仓';
				this.closeLeverItem = null;
				this.$refs.unopenRef.open();
			},
			confirm() {
				if (this.leverTransaction.length > 0) {
					if (this.closeLeverItem) {
						// 平仓
						Api_setCloseLever({
							id: this.closeLeverItem.id
						}).then(res => {
							this.$emit('closeLeverSuccess')
						})
					} else {
						// 全部平仓
					}

				}

			},
			setRestrict(item) {
				this.$nextTick(() => {
					this.$refs.restrictRef.open(item)
				})
			},
			setSuccess() {
				this.$emit('closeLeverSuccess')
			}
		}

	}
</script>

<style lang="scss" scoped>
	// <view class="lable-title">
	// 	<text class="lable-title-text">仓位信息</text>
	// 	<text class="lable-title-btn">全部平仓</text>
	// </view>
	.lable-title {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid $border-color;
		padding: 0 $pages-padding;
		font-size: 24rpx;
		color: #000;
		font-weight: bold;

		.lable-title-btn {
			color: $Theme-Color;
		}
	}

	.content-top {
		padding: 30rpx $pages-padding;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
		border-bottom: 1rpx solid $border-color;

		.top-left,
		.top-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.top-left-title {
			font-size: 34rpx;
			font-weight: bold;

			.iconfont {
				margin: 0 10rpx 0 20rpx;
			}

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

		.top-left-b {
			font-size: 24rpx;
		}

		.top-left-b-tag {
			padding: 4rpx 6rpx;
			border-radius: 3rpx;
			background-color: $Theme-Color;
			color: #fff;
			margin-left: 20rpx;
		}

		.top-right {
			flex-shrink: 0;
			text-align: right;
			color: $Theme-Color;
			font-size: 28rpx;
			font-weight: bold;

			.top-right-float {
				padding-top: 20rpx;
				font-weight: normal;
				font-size: 22rpx;

				text {
					border-bottom: 1rpx dashed $Theme-Color;
				}
			}
		}
	}

	.content-info {
		padding: 0 $pages-padding;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;

		.info-item {
			width: 30%;
			display: flex;
			flex-direction: column;

			font-size: 24rpx;

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

			.info-item-lable {
				padding: 30rpx 0 20rpx;
				color: $SizeColor;
			}

			.info-item-val {
				color: #000;

				.iconfont {
					font-size: 24rpx;
					color: $Theme-Color;
					margin-left: 20rpx;
				}
			}
		}
	}

	.content-btns {
		width: 100%;

		padding: 40rpx $pages-padding 30rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.content-btn-item {
			width: calc((100% - 40rpx) / 3);
			height: 70rpx;
			line-height: 70rpx;
			background-color: $Theme-Color;
			text-align: center;
			color: #fff;
			border-radius: 6rpx;
			font-size: 28rpx;

			&:nth-child(n + 2) {
				background-color: $Theme-Color04;
				color: $Theme-Color;
			}
		}
	}
</style>