BiKing/pages/contract/index.vue

<template>
	<view class="contract">
		<headContent :showleftRight="false">
			<template #content>
				<view class="navigation-box">
					<view :class="['navigation-item hide_1' , contractIndex === index ? 'active-navigation-item' : '']"
						v-for="(item , index) in contractArr" :key="`navigation_${index}`"
						@click.stop="contractIndex = index">
						{{ item }}
					</view>
				</view>
			</template>
		</headContent>

		<!-- 永续合约 -->
		<template v-if="contractIndex === 0">
			<sustainability ref="sustainabilityRef" :currency-info="currencyVal" :myTransaction="my_transaction"
				:pagesInfo="pagesInfo" :my-peding-transaction="my_peding_transaction" @refreshData="init"
				@setContract="setContract" @setProfitLoss="setProfitLoss" @setHighInfo="setHighInfo" @shareContent="val => $refs.shareRef.openShare(val)"/>
		</template>
		<!-- 永续合约 -->
		<template v-if="contractIndex === 1">
			<shortcut :myFast="my_fast" :rate-profits-total="rate_profits_total"
				:pagesInfo="pagesInfo" @refreshData="init" @shareContent="val => $refs.shareRef.openShare(val)"/>
		</template>
		<!-- 赠金交易 -->
		<template v-if="contractIndex === 2">
			<grants />
		</template>
		<notarize />

		<!-- 永续合约设置 -->
		<contract-set ref="contractSetRef" @confirm="openSet" />
		<!-- 偏好设置 -->
		<preference ref="preferenceRef" />
		<!-- 设置盈亏 -->
		<restrictPopup ref="restrictPopupRef" @setSuccess="setRestrictSuccess" />
		<!-- 分享 -->
		<sharePage ref="shareRef" :shareType="2"></sharePage>
	</view>
</template>

<script>
	import notarize from "./modules/notarize.vue"
	import sustainability from "./sustainability/index.vue"
	import grants from "./grants/index.vue"
	import shortcut from "./shortcut/index.vue"
	import preference from "@/components/contract-set/preference.vue"
	import {
		Api_getLeverDeal,
		Api_getRegister
	} from "@/api/index.js"
	import {
		Way_getUserInfo
	} from "@/utils/common-request.js"
	import {
		mapGetters
	} from 'vuex'
	import {
		startSocket,
		closeSocket
	} from "@/utils/websocket.js"
	import restrictPopup from "./modules/restrict.vue"
	import {
		getCurrencyMarket
	} from "@/utils/currency-market.js"
	export default {
		name: 'contract',
		components: {
			notarize,
			sustainability,
			grants,
			shortcut,
			preference,
			restrictPopup
		},
		data() {
			return {
				contractIndex: 0,
				contractArr: [
					'永续合约',
					'快捷合约',
					'赠金交易'
				],
				currency: {},
				UserInfo: {},
				pagesInfo: {},
				my_transaction: [],			// 永续 当前持仓
				my_peding_transaction:[],	// 永续 限价持仓
				my_fast:[],// 快捷合约 持仓
				
				rate_profits_total: {}
			};
		},
		onLoad() {
			
		},

		computed: {
			...mapGetters([
				'currencyVal'
			]),
		},
		watch: {
			currencyVal: {
				handler(newCurrency) {
					if (newCurrency && newCurrency?.legal_id) {
						this.init();
					}
				},
				deep: true,
				immediate: true
			},
		},
		onShow() {
			const nu = this.$getStorageSync('contractIndex');
			this.contractIndex = [0, 1, 2].includes(nu) ? nu : this.contractIndex
			this.$removeStorageSync('contractIndex')

			this.init()
			// this.setSocket();
		},
		onHide() {
			this.close()
		},
		mounted() {
			// 设置盈亏
			// setProfitLoss(item) {
			// 	console.log('setProfitLoss')
			// 	this.$nextTick(() => {
			// 		this.$refs.restrictPopupRef.open(item)
			// 	})
			// },
			// this.$on('setProfitLoss', (val) => {
			// 	console.log('setProfitLoss' , val);
			// });
		},
		methods: {
			close(){
				closeSocket() // 停止 Socket
				this.$store.commit('websocket/set_currencySuspend', false) // 停止币种刷新
			},
			init() {
				// if ([0, 1].includes(this.contractIndex)) {
				// 	// 永续 / 快捷 需要获取持仓信息
				// 	this.getRegister()
				// }
				this.getAccountInfo();
				getCurrencyMarket('contract', {onceRefresh:true})
				// this.$store.dispatch('websocket/getQuotationNew', {
				// 	noRefresh: true
				// })
				// 运行 socket 实时更新
				// this.$store.commit('websocket/set_socket_update_status', true)
				if (this.currencyVal && this.currencyVal?.legal_id) {
					this.getLeverDeal();
					this.setSocket();
				}

			},
	
			setSocket() {
				startSocket();
			},
			getLeverDeal() {
				Api_getLeverDeal({
					legal_id: this.currencyVal.legal_id,
					currency_id: this.currencyVal.currency_id
				}).then(res => {
					this.pagesInfo = res
					this.my_transaction = res.my_transaction || [];   // 永续合约 - 持仓信息
					this.my_peding_transaction = res.my_peding_transaction || []; // 永续合约 - 限价委托
					this.my_fast = res.my_fast || [];				  // 快捷合约 - 持仓信息
					console.log('my_transaction' , this.my_transaction)
				}).catch(err => {
					// this.getLeverDeal()
				})
			},

			getAccountInfo() {
				this.$store.dispatch('possession/getPossession').then(res => {
					console.log('获取成功')
				}).catch(err => {
					console.log('获取shibai ')
				})
			},
			setContract() {
				// setContract
				this.$nextTick(() => {
					this.$refs.contractSetRef.open()
				})
			},
			// 设置盈亏
			setProfitLoss(item) {
				this.$nextTick(() => {
					this.$refs.restrictPopupRef.open(item)
				})
			},
			// 设置盈亏成功
			setRestrictSuccess() {
				this.getRegister();
				this.getLeverDeal();
			},

			// 永续合约 设置
			openSet(type) {
				return false
				switch (type) {
					case 1:
						// 偏好设置
						this.$nextTick(() => {
							this.$refs.preferenceRef.open()
						})
						break;
					case 2:
						// 合约计算器
						uni.navigateTo({
							url: '/pages/contract/calculator'
						})
						break;
						// 
				}
			},
			setHighInfo(){
				this.$refs.restrictPopupRef.open()
				
				
			}

		}
	}
</script>


<style lang="scss" scoped>
	.navigation-box {
		width: 100%;
		height: 100%;
		padding: 0 $pages-padding 11rpx;
		display: flex;
		align-items: flex-end;

		.navigation-item {
			// width: 25%;
			flex: 1;
			flex-shrink: 0;
			text-align: center;
			height: 60rpx;
			border: 2rpx solid #27ae83;
			line-height: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #05c175;

			&:nth-child(n + 2) {
				border-left: none;
			}

			&:last-child {
				border-radius: 0 6rpx 6rpx 0;
			}

			&:first-child {
				border-radius: 6rpx 0 0 6rpx;
			}
		}

		.active-navigation-item {
			background-color: #05C175;
			color: #FFFFFF;
		}
	}
</style>