wwbsr/pages/exchange/position.vue

<template>
	<view>
		<view class="p-x-md p-t-md fn-right d-flex justify-between">
			<view>
				<v-button type="green" class="rounded-lg opt-btn m-b-xs"
					@click="onekeyAllFlat">{{ $t("contract.k7") }}</v-button>
			</view>
			<view class="d-flex align-center" @click="
          checked = !checked;
          holdPosition();
        ">
				{{ $t("contract.g3") }}
				<van-checkbox class="m-l-xs" :value="checked"></van-checkbox>
			</view>
		</view>

		<van-empty v-if="!list.length" :description="$t('contract.d0')" />
		<view class="item bg-panel-4 m-md rounded-sm box-shadow" v-for="item in list" :key="item.id">
			<view class="head d-flex align-center border-b p-x-md p-y-xs justify-between">
				<view class="d-flex">
					<view>
						<view class="color-light fn-20">{{ item.pair_name }} </view>
					</view>
				</view>
				<text class="fn-20" :class="item.side == 1 ? 'color-success' : 'color-danger'">
					{{ item.side == 1 ? $t("contract.e8") : $t("contract.e9") }}
				</text>
				<view class="d-flex color-light">
					<span>{{ item.lever_rate }}X</span>
				</view>
			</view>
			<view class="p-x-md p-y-xs data-list">
				<view class="row d-flex m-y-xs">
					<view class="label fn-sm">{{ $t("contract.a1") }}/{{ $t("contract.g5") }}/{{
              $t("contract.g4")
            }}</view>
					<view class="color-light fn-right flex-fill">{{ item.hold_position }}/{{ item.freeze_position }}/{{
              item.avail_position
            }}</view>
				</view>

				<view class="d-flex">
					<view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("contract.b1") }}</view>
						<view class="color-light">{{ item.position_margin }}</view>
					</view>
					<view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("contract.h1") }}/{{ $t("contract.h2") }}</view>
						<view class="color-light">
							{{ item.tpPrice || "--" }}/{{ item.slPrice || "--" }}
						</view>
					</view>
				</view>
				<view class="d-flex">
					<view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("contract.g6") }}</view>
						<view class="color-light">{{ item.avg_price }}</view>
					</view>
					<view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("contract.h0") }}</view>
						<view class="color-light">{{ item.profitRate }}</view>
					</view>
				</view>
				<view class="d-flex">
					<view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("contract.g8") }}</view>
						<view class="color-light">{{ item.flatPrice }}</view>
					</view>
					<view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("contract.c7") }}</view>
						<view class="color-light">{{ item.unRealProfit }}</view>
					</view>
				</view>
				<!-- 买入&市场 -->
				<view class="d-flex">
					<view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("exchange.d7") }}</view>
						<view class="color-light">{{ item.realtimePrice }}</view>
					</view>
					<!-- <view class="row w-6/12 d-flex m-y-xs justify-between">
						<view class="label fn-sm">{{ $t("contract.h0") }}</view>
						<view class="color-light">{{ item.profitRate }}</view>
					</view> -->
				</view>
				<view class="row d-flex m-y-xs justify-between">
					<!-- 平仓 -->
					<v-button type="green" size="small" class="opt-btn rounded-xs m-b-xs"
						@click="closePositionShow(item)">{{ $t("contract.h3") }}</v-button>
					<!-- 一建反向 -->
					<!-- <v-button type="green" size="small" class="opt-btn rounded-xs m-b-xs m-l-xs"
						@click="onekeyReverse(item)">{{ $t("contract.k8") }}</v-button> -->
					<!-- <v-button
              type="danger"
              class="opt-btn m-l-xs m-b-xs"
              plain
              size="small"
              @click="ifCloseAllPosition(item)"
              >{{ $t("contract.h4") }}</v-button
            > -->
					<!-- 止盈止损 -->
					<v-button type="blue" class="opt-btn m-l-xs m-b-xs rounded-xs" size="small"
						@click="toStoploss(item)">{{ $t("contract.h5") }}</v-button>
					<v-button type="green-plain" class="m-l-xs m-b-xs d-inline-block rounded-xs" size="small" plain :to="{
                path: '/pages/income/index',
                query: {
                  symbol: item.symbol,
                  side: item.side,
                  profitRate: item.profitRate,
                  lever_rate: item.lever_rate,
                  pair_name: item.pair_name,
                  avg_price: item.avg_price,
                  newPrice: newPrice,
                  position_side: item.side,
                },
              }">{{ $t("contract.c8") }}</v-button>
				</view>
			</view>
		</view>
		<van-popup :show="show" @close="show = false" closeable position="bottom"
			custom-style="height:55%;width:100%;overflow:auto;">
			<view>
				<view class="p-y-xs p-x-md border-b d-flex align-center">
					<view class="p-xs rounded-xs fn-bold" :class="
              activeItem.side != 1
                ? 'bg-danger-transparent color-danger'
                : 'bg-success-transparent color-success'
            ">
						{{ $t("contract.h6")
            }} {{ activeItem.side == 1 ? $t("contract.e8") : $t("contract.e9") }}
					</view>
					<view class="fn-bold m-x-sm">{{ activeItem.pair_name }}</view>
					<view>{{ activeItem.lever_rate }}X</view>
				</view>

				<view class="p-md">
					<v-input class="p-sm rounded border" :placeholder="$t('contract.h7')" type="number"
						v-model="form.entrust_price" v-if="activeItem.closeType == 1">
						<template #right>
							<v-button size="mini" type="theme"
								@click="activeItem.closeType = 2">{{ $t("contract.h8") }}</v-button>
						</template>
					</v-input>
					<v-input class="p-sm rounded border bg-panel-1 fn-center color-sell" disabled
						:value="$t('contract.d7')" v-else>
						<template #right>
							<v-button size="mini" type="theme"
								@click="activeItem.closeType = 1">{{ $t("contract.d7") }}</v-button>
						</template>
					</v-input>
					<v-input class="p-sm rounded border m-t-sm" :placeholder="$t('contract.h9')" type="number"
						v-model="form.amount">
						<template #right>
							<span class="color-default" style="padding-right: 10rpx;">{{ $t("contract.d8") }}</span>
							<v-button size="mini" type="theme" @click="toall">{{ $t("base.d4") }}</v-button>
						</template>
					</v-input>
					<view class="fn-sm m-y-xs">
						{{ $t("contract.i0") }} {{ activeItem.avail_position }}
						{{ $t("contract.d8") }}
					</view>
					<!-- 平仓 -->
					<v-button type="blue" class="rounded-lg" block @click="closePosition" ref="btn">
						{{ $t("contract.h3") }}
					</v-button>
					<view class="h-55"></view>
				</view>
			</view>
		</van-popup>
		<van-popup :show="stoplossShow" @close="stoplossShow = false" closeable position="bottom"
			custom-style="height:55%;width:100%:overflow:auto;">
			<view>
				<view class="p-y-xs p-x-md border-b d-flex align-center">
					<view class="p-xs rounded-sm fn-bold" :class="
              activeItem.side == 2
                ? 'bg-danger-transparent color-danger'
                : 'bg-success-transparent color-success'
            ">
						{{ activeItem.side == 1 ? $t("contract.e8") : $t("contract.e9") }}
					</view>
					<view class="fn-bold m-x-sm">{{ activeItem.pair_name }}</view>
					<view>{{ activeItem.lever_rate }}X</view>
				</view>
				<view class="p-x-md p-t-md d-flex">
					<view class="m-r-md">
						<span>{{ $t("contract.a0") }}：</span><span
							class="color-light">{{ activeItem.avg_price * 1 }}</span>
					</view>
					<view>
						<span>{{ $t("contract.i2") }}：</span><span
							class="color-light">{{ activeItem.realtimePrice }}</span>
					</view>
				</view>
				<view class="p-x-md p-t-0">
					<input class="p-sm rounded border m-t-sm" :placeholder="$t('contract.i3')" type="digit"
						v-model="strategyForm.tp_trigger_price">
					<template #left>
						<span class="color-default">{{ $t("contract.i4") }}：</span>
					</template>
					</input>
					<view class="p-t-xs fn-sm color-tips" v-if="strategyForm.tp_trigger_price">
						{{ $t("contract.i5") }}{{ strategyForm.tp_trigger_price
            }}{{ $t("contract.i6") }}
						{{
              activeItem.side == 1
                ? many(activeItem, strategyForm.tp_trigger_price)
                : air(activeItem, strategyForm.tp_trigger_price)
            }}
						USDT
					</view>
					<input class="p-sm rounded border m-t-sm" :placeholder="$t('contract.i3')" type="digit"
						v-model="strategyForm.sl_trigger_price">
					<template #left>
						<span class="color-default">{{ $t("contract.i7") }}：</span>
					</template>
					</input>
					<view class="p-t-xs fn-sm color-tips" v-if="strategyForm.sl_trigger_price">
						{{ $t("contract.i5") }}{{ strategyForm.sl_trigger_price
            }}{{ $t("contract.i8") }}
						{{
              activeItem.side == 1
                ? many(activeItem, strategyForm.sl_trigger_price)
                : air(activeItem, strategyForm.sl_trigger_price)
            }}
						USDT
					</view>
					<view class="h-10"></view>
					<v-button class="m-t-md rounded-lg" type="blue" block @click="stoploss" ref="strateBtn">
						{{ $t("contract.i9") }}
					</v-button>
					<view class="h-55"></view>
				</view>
			</view>
		</van-popup>
	</view>
</template>
<script>
	import Contract from "@/api/contract";
	import {
		mapState
	} from "vuex";
	import math from "@/utils/class/math";
	export default {
		name: "position",
		props: {
			symbolLeft: {
				default: "",
				type: String,
				required: false,
			},
			symbolDetail: {
				default: () => {},
				type: Object,
			},
			isShow: {
				default: false,
				type: Boolean,
				required: false,
			},
		},
		data() {
			return {
				list: [],
				checked: false,
				show: false,
				activeItem: {},
				newPrice: 0,
				form: {
					entrust_price: "",
					amount: "",
				},
				strategyForm: {
					symbol: "",
					position_side: "",
					tp_trigger_price: "",
					sl_trigger_price: "",
				},
				stoplossShow: false,
				dtime: null,
			};
		},
		watch: {
			symbolLeft(n) {
				if (n) this.holdPosition();
			},
			isShow(n) {
				if (n) {
					this.holdPosition();
				} else {
					this.ws.send({
						cmd: "unsub",
						msg: `swapTradeList_${this.symbolLeft}`,
					});
				}
			},
		},
		computed: {
			...mapState({
				ws: "ws1",
			}),
		},
		methods: {
			toall() {
				this.form.amount = this.activeItem.avail_position
			},
			// 多仓盈亏
			many(item, newPrice) {
				let face = this.symbolDetail.unit_amount;
				return math.omitTo(
					newPrice - item.avg_price,
					4
				);
			},
			// 空仓盈亏
			air(item, newPrice) {
				let face = this.symbolDetail.unit_amount;
				return math.omitTo(
					(item.avg_price - newPrice),
					4
				);
			},
			holdPosition(boo) {
				let data = {
					symbol: (this.checked && this.symbolLeft) || "",
				};
				Contract.holdPosition(data, {
					loading: !boo
				}).then((res) => {
					this.list = res.data.filter((item) => item.hold_position);
					this.list = Object.assign([], this.list)
					if (!boo) {
						this.sendPrice();
					}
				});
			},
			// 限价平仓
			closePositionShow(item) {
				this.activeItem = item;
				this.$set(this.activeItem, "closeType", 1);
				this.show = true;
			},
			// 获取买卖盘
			getMarketInfo() {
				let data = {
					symbol: this.symbolLeft,
				};
				Contract.getMarketInfo(data).then((res) => {
					this.newPrice = res.data.swapTradeList[0].price;
				});
			},
			closePosition() {

				if (!this.form.amount) {
					return this.$toast(this.$t('contract.h9'))
				}
				let data = {
					entrust_id: this.activeItem.entrust_id,
					side: this.activeItem.side == 1 ? 2 : 1,
					type: this.activeItem.closeType,
					symbol: this.activeItem.symbol,
					entrust_price: this.form.entrust_price || 0,
					amount: this.form.amount,
				};
				// console.log(data);
				Contract.closePosition(data, {
					btn: this.$refs.btn
				}).then(() => {
					this.show = false;
					this.form.entrust_price = "";
					this.form.amount = "";
					this.holdPosition();
					this.$toast(this.$t("contract.j0"));
				});
			},
			// 一键平仓
			ifCloseAllPosition(item) {
				this.$dialog
					.confirm({
						title: this.$t("contract.c4"),
						message: `${this.$t("contract.j1")}${item.pair_name}?`,
						confirmButtonText: this.$t("common.confirm"),
						cancelButtonText: this.$t("common.cancel")
					})
					.then(() => {
						this.closeAllPosition(item);
					});
			},
			closeAllPosition(item) {
				let data = {
					symbol: item.symbol,
					side: item.side == 1 ? 2 : 1,
				};
				Contract.closeAllPosition(data, {
					loading: true,
				}).then(() => {
					this.$toast(
						`${this.$t("contract.j2")}${item.pair_name}${this.$t("contract.j3")}`
					);
					this.holdPosition();
				});
			},
			// 获取最新价格
			sendPrice() {
				this.ws.send({
					cmd: "sub",
					msg: `swapTradeList_${this.symbolLeft}`,
				});
			},
			socketMessage() {
				this.ws.on("message", (res) => {
					let symbol = this.symbolLeft;
					let {
						data,
						sub
					} = res;
					switch (sub) {
						case `swapTradeList_${symbol}`:
							this.newPrice = data.price;
							break;
					}
				});
			},
			// 止盈止损
			toStoploss(item) {
				this.activeItem = item;
				this.strategyForm.symbol = this.activeItem.symbol;
				this.strategyForm.position_side = this.activeItem.side;
				this.strategyForm.entrust_id = item.entrust_id
				this.stoplossShow = true;
			},
			stoploss() {
				Contract.setStrategy(this.strategyForm, {
					btn: this.$refs.strateBtn,
				}).then(() => {
					this.strategyForm.tp_trigger_price = "";
					this.strategyForm.sl_trigger_price = "";
					this.stoplossShow = false;
					this.$toast(this.$t("contract.j4"));
				});
			},
			// 一键全平
			onekeyAllFlat() {
				this.$dialog
					.confirm({
						title: this.$t("contract.c4"),
						message: this.$t("contract.k9") + `?`,
						cancelButtonText: this.$t('common.cancelButtonText'),
						confirmButtonText: this.$t('common.confirmButtonText')
					})
					.then(() => {
						Contract.onekeyAllFlat({}).then(() => {
							this.holdPosition(true);
							this.$toast(this.$t("contract.l0"));
						});
					});
			},
			// 一键反向
			onekeyReverse(item) {
				this.$dialog
					.confirm({
						title: this.$t("contract.c4"),
						message: this.$t("contract.l1") + `?`,
						cancelButtonText: this.$t('common.cancelButtonText'),
						confirmButtonText: this.$t('common.confirmButtonText')
					})
					.then(() => {
						Contract.onekeyReverse({
							entrust_id: item.entrust_id,
							symbol: item.symbol,
							position_side: item.side,
						}).then(() => {
							this.holdPosition(true);
							this.$toast(this.$t("contract.l2"));
						});
					});
			},
		},
		mounted() {
			if (this.symbolLeft) {
				this.getMarketInfo();
				this.holdPosition();
			}
			this.dtime = setInterval(() => {
				if (this.symbolLeft) {
					this.holdPosition(true);
				}
			}, 3000);
		},
		beforeDestroy() {
			clearInterval(this.dtime);
			this.ws.send({
				cmd: "unsub",
				msg: `swapTradeList_${this.symbolLeft}`,
			});
		},
	};
</script>
<style lang="scss" scoped>
	.data-list {
		.row:first-of-type {
			margin-right: $padding-sm;
		}
	}
</style>