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>
						<!-- @click.stop="setInversion(item)" -->
						<view class="content-btn-item" >
							反向开仓
						</view>
						<view class="content-btn-item">
							加仓
						</view>
					</view>
				</view>
				<gap />
			</template>
		</template>
		<template v-else>
			<empty class="empty-content" />
		</template>
		
	</view>
</template>

<script>
	import {
		Api_setCloseLever,
		Api_setBatchClose
	} from "@/api/index.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'freight-space',
		props: {
		 
			leverTransaction: {
				type: Array,
				default: () => {
					return []
				}
			},
			currency: {
				type: Object,
				default: () => {
					return {}
				}
			},
		}, 
		computed: {
			...mapGetters([
				"stocksColor"
			])
		},
		data() {
			return {
				closeLeverItem: null,
				
			};
		},
		mounted() {

		},
		methods: {
			setCloseLever(item) {
				this.closeLeverItem = item;
				const obj = {
					title : '平仓',
					closeLeverContent : '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定平仓吗？'
				}
				this.$emit('setDepot' , obj)
			},
			setInversion(){
		 
				this.closeLeverItem = -1; 
				const obj = {
					title : '反向开仓',
					closeLeverContent : '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定反向开仓吗？',
				}
				this.$emit('setDepot' , obj)
			},
			setCloseLeverAll() {
				this.closeLeverItem = null;
				const obj = {
					title : '全部平仓',
					closeLeverContent : '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定全部平仓吗？',
				}
				this.$emit('setDepot' , obj)
				// this.title = '全部平仓';
				// this.closeLeverContent = '';
				// this.closeLeverItem = null;
				// 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.$emit('closeLeverSuccess')
						})
					} else if (this.closeLeverItem == -1){
						// 反向开仓
						 
					}else {
						// 全部平仓
						Api_setBatchClose({
							type: 0,
							currency_id:this.currency.currency_id
						}).then(res => {
							this.$emit('closeLeverSuccess')
						})
					}

				}

			},
			// 设置止盈止损
			setRestrict(item) {
				
				console.log('setRestrict = ' , item )
				this.$emit('setProfitLoss' , item)
 
				// this.$nextTick(() => {
				// 	this.$refs.restrictRef.open(item)
				// })
			},
			setSuccess() {
				this.$emit('closeLeverSuccess')
			}
		}

	}
</script>

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