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  class="content-box" :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,
		Api_setBatchClose
	} 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 {
						// 全部平仓
						Api_setBatchClose({
							type: 0
						}).then(res => {
							this.$emit('closeLeverSuccess')
						})
					}

				}

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

	}
</script>

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