wwbsr/pages/base/contract.vue

<template>
	<v-page>
		<view style="height: var(--status-bar-height)"></view>
		<!-- <view class="d-flex justify-center p-t-md">
			<view class="d-flex bg-form-panel-4 rounded-lg overflow-scroll">
				<view :class="{ 'bg-gradient-blue color-plain rounded-lg': tab1 == 0 }" @click="changeTab1(0)"
					class="p-y-xs p-x-lg min-w-60 fn-center">{{ $t('contract.title') }}</view>
				<view :class="{ 'bg-gradient-blue color-plain rounded-lg': tab1 == 1 }" @click="changeTab1(1)"
					class="p-y-xs p-x-lg min-w-60 fn-center">{{$t('miao.a1')}}</view>
			</view>
		</view> -->
		<!-- <v-header :left-arrow="false" :title="$t('contract.title')"></v-header> -->
		<template v-if="tab1 == 0">
			<van-tabs :ellipsis="false" :border="false" class="border-b" :active="tab"
				@change="tab = $event.detail.name">
				<van-tab :title="`${$t('contract.a0')}`" :name="0"></van-tab>
				<van-tab :title="`${$t('contract.a1')}(${symbolLeft})`" :name="1"></van-tab>
				<van-tab :title="$t('contract.a2')" :name="2"></van-tab>
				<van-tab :title="$t('contract.a3')" :name="3"></van-tab>
				<van-tab :title="`${$t('contract.a')}(${symbolLeft})`" :name="4"></van-tab>
			</van-tabs>
			<!-- 开仓 -->
			<view class="layout-main" v-if="tab == 0">
				<open-position :query="query" :collect="collect" @option="option" :isShow="isShow" ref="openposition"
					@symbol="symbolListShow = !symbolListShow" @getSymbolDetail="symbolDetail = $event" />
			</view>
			<!-- 持仓 -->
			<main class="layout-main" v-if="tab == 1">
				<position :isShow="isShow" :symbolDetail="symbolDetail" :symbolLeft="symbolLeft" />
			</main>
			<!-- 委托 -->
			<main class="layout-main" v-if="tab == 2">
				<contract-entrustment style="min-height: 100%" />
			</main>
			<!-- 历史 -->
			<main class="layout-main" v-if="tab == 3">
				<contract-history v-if="tab == 3" />
			</main>
			<!-- 流水 -->
			<main class="layout-main" v-if="tab == 4">
				<contract-bill :symbolLeft="symbolLeft" />
			</main>
		</template>
		<!-- 秒合约 -->
		<template v-if="tab1 == 1">
			<contract-miao  ref="miao"/>
		</template>

		<van-popup :show="symbolListShow" @close="symbolListShow = false" closeable close-on-popstate position="left"
			custom-style="height:100%;width:70%">
			<symbol-list :collect="collect" :title="$t('contract.a4')" :marketList="marketList"
				@check-symbol="checkSymbol" />
		</van-popup>
		<van-dialog use-slot :show="contractStatusShow" :title="contractAgreement.title" @confirm="openContract"
			show-cancel-button @cancel="contractStatusShow = false">
			<view class="p-md overflow-scroll">
				<rich-text class="p-md" :nodes="contractAgreement.body"></rich-text>
			</view>
		</van-dialog>
		<ComFooter tab="contract"></ComFooter>
	</v-page>
</template>
<script>
	import openPosition from "@/pages/exchange/open-position";
	import position from "@/pages/exchange/position";
	import contractEntrustment from "@/pages/exchange/contract-entrustment";
	import contractHistory from "@/pages/exchange/contract-history";
	import symbolList from "@/pages/exchange/symbol-list";
	import contractBill from "@/pages/exchange/contract-bill";
	import ComFooter from "./components/footer.vue";
	import Home from "@/api/home";
	import Contract from "@/api/contract";
	import contractMiao from "@/pages/exchange/contract-miao"
	import {
		mapState
	} from "vuex";
	export default {
		name: "contract",
		props: {
			// isShow: {
			//   default: false,
			//   type: Boolean,
			//   required: false,
			// },
		},
		components: {
			openPosition,
			position,
			contractEntrustment,
			contractHistory,
			symbolList,
			contractBill,
			ComFooter,
			contractMiao
		},
		data() {
			return {
				tab: 0,
				tab1: 0,
				collect: [],
				marketList: [],
				symbolListShow: false,
				contractStatusShow: false,
				contractAgreement: {},
				symbolDetail: {},
				query: {},
				isShow: false,
			};
		},
		onShow() {
			if(this.$refs.miao){
				if(this.tab1==0){
					this.linkSocket();
				}else{
					this.$refs.miao.linkSocket()
				}
			}else{
				this.$nextTick(()=>{
					if(this.tab1==0){
						this.linkSocket();
					}else{
						this.$refs.miao.linkSocket()
					}
				})
			}
			this.isShow = true;
		},
		onHide() {
			if(this.tab1==0){
				this.destroyed()
			}else{
				this.$refs.miao.destroyed()
			}
			this.isShow = false;
		},
		computed: {
			symbolLeft() {
				if (!this.query.symbol) return "";
				return this.query.symbol.split("/")[0];
			},
			isLogin() {
				return Boolean(uni.getStorageSync("token"));
			},
			...mapState({
				ws: "ws1",
			}),
		},
		methods: {
			changeTab1(cur){
				this.tab1 = cur
				if(cur==0){
					this.getMarketList();
					this.getCollect();
					this.linkSocket()
					this.$refs.miao.destroyed()
				}else{
					this.$nextTick(()=>{
						this.$refs.miao.linkSocket()
						this.destroyed()
					})
				}
			},
			// 获取市场行情
			getMarketList() {
				Contract.getMarketList().then((res) => {
					// 整理数据格式
					this.marketList = res.data.map((item) => {
						item.marketInfoList.forEach((el) => {
							el.coin_name = el.symbol;
						});
						return item;
					});

					if (!this.query.symbol) {
						let parentItem = this.marketList[0].marketInfoList[0];
						
						this.checkSymbol(parentItem);
						
					}
				});
			},
			//
			checkSymbol(obj) {
				this.symbolListShow = false;
				if (obj.pair_name != this.query.symbol)
					this.query = {
						symbol: obj.pair_name
					};
			},
			// 获取自选列表
			getCollect() {
				if (!this.isLogin) return;
				Home.getCollect()
					.then((res) => {
						this.collect = res.data || [];
					})
					.catch(() => {});
			},

			// 链接socket
			linkSocket() {
				let msg = "swapMarketList";
				this.ws.send({
					cmd: "sub",
					msg: msg,
				});
				this.ws.on("message", (res) => {
					if (!this.isShow) return;
					let {
						data,
						sub
					} = res;
					if (sub == msg) {
						this.marketList = data.map((item) => {
							item.marketInfoList.forEach((el) => {
								el.coin_name = el.symbol;
							});
							return item;
						});
					}
				});
			},
			// 添加自选
			option() {
				let data = {
					pair_name: this.query.symbol,
				};
				Home.option(data)
					.then((res) => {
						this.getCollect();
						if (res.data) {
							this.$toast(this.$t("exchange.a6"));
						} else {
							this.$toast(this.$t("exchange.a7"));
						}
					})
					.catch(() => {});
			},
			// 获取开通永续合约
			openStatus() {
				if (!this.isLogin) return;
				Contract.openStatus({}).then((res) => {
					if (!res.data.open) {
						this.contractAgreement = res.data.contractAgreement;
						this.contractStatusShow = true;
						this.$refs.openposition.getSymbolDetail();
					}
				});
			},
			// 开通永续合约
			openContract() {
				Contract.opening().then(() => {
					this.$toast(this.$t("contract.a5"));
					this.contractStatusShow = false;
				});
			},
			destroyed() {
				this.ws.send({
					cmd: "unsub",
					msg: "swapMarketList",
				});
			},
		},
		created() {
			if(this.tab1==0){
				this.getMarketList();
				this.getCollect();
			}
			// this.openStatus();
		},
	};
</script>