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

<template>
	<view class="">
		<template v-if="myTransaction && myTransaction.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 myTransaction">
				<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>
								<view class="top-left-share" @click.stop="$emit('shareContent' , item)">
									<text class="icon-size iconfont">&#xe8b0;</text>
									<text class="icon-size">分享</text>
								</view>
							</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>{{ $getChange(item , 1) }}%</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.origin_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">{{ $getChange(item , 2) }}</text>
							<!-- {{ item.caution_money }} -->
						</view>
						<view class="info-item">
							<text class="info-item-lable">预计强平价(USDT)</text>
							<text class="info-item-val">{{ $getChange(item , 3) }}</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">{{ item.transaction_time }}</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: {

			myTransaction: {
				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.myTransaction.length > 0) {
					uni.showLoading({
						title: '',
						mask: true
					})
					if (this.closeLeverItem && this.closeLeverItem !== -1) {
						// 平仓
						Api_setCloseLever({
							id: this.closeLeverItem.id
						}).then(res => {
							setTimeout(() => {
								uni.showToast({
									title: '平仓成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.hideToast()
									this.$emit('closeLeverSuccess')
								}, 300)
							}, 201)
							
						}).finally(() => {
							setTimeout(() => {
								uni.hideLoading()
							}, 200)
						})
					} else if (this.closeLeverItem == -1) {
						// 反向开仓

					} else {
						// 全部平仓
						Api_setBatchClose({
							type: 0,
							currency_id: this.currency.currency_id
						}).then(res => {
							setTimeout(() => {
								uni.showToast({
									title: '平仓成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.hideToast()
									this.$emit('closeLeverSuccess')
								}, 300)
							}, 201)
						}).finally(() => {
							setTimeout(() => {
								uni.hideLoading()
							}, 200)
						})
					}

				}

			},
			// 设置止盈止损
			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>