yizhizan-pc/src/views/home.vue

<template>
	<div>
		<el-affix :offset="0" :z-index="2001">
			<div class="headers">
				<headers ref="headers" />
			</div>
		</el-affix>
		<div class="content">
			<router-view></router-view>
		</div>
		<!-- 底部版权信息 -->
		<copyright />
		<!-- <div class="sidebars">
			<sidebars ref="sidebars" :userType="userType" />
		</div> -->
	</div>
</template>

<script>
	import {ElMessage} from 'element-plus'
	import {ROOTPATH2} from '../../comment/httpUrl.js'
	import headers from '../components/header/header.vue'
	import sidebars from '../components/sidebar/sidebar.vue'
	import copyright from '../components/copyright/copyright.vue'
	export default {
		components: {
			headers,
			sidebars,
			copyright
		},
		computed: {
			userType() {
				return this.$store.state.userType;
			}
		},
		data() {
			return {
				ws: null,
			}
		},
		mounted() {
			if (localStorage.getItem('token')) {
				this.getUserInfo();
			}
			const userId = localStorage.getItem('userId');
			// 连接websocket
			// this.connectSocket(userId);
			
		},
		beforeDestroy() {
			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
				console.log('♻️ 组件销毁前关闭 WebSocket');
				this.ws.close();
			}
		},
		methods: {
			connectSocket(userId) {
				if (!userId) return;
				// 若已有连接则关闭
				if (this.ws) {
					this.ws.close();
				}
				this.ws = new WebSocket(ROOTPATH2 + '' + userId)
				// 连接成功
				this.ws.onopen = () => {
					console.log('WebSocket 已连接:', ROOTPATH2 + '' + userId);
				};
				// 收到消息
				this.ws.onmessage = (event) => {
					console.log(event)
					if (event.data === 'HeartBeat') return;
					let msg;
					try {
						msg = JSON.parse(event.data);
					} catch (e) {
						console.warn('非JSON消息:', event.data);
						return;
					}
					if (msg.type === 'kickOut') {
						ElMessage({
							message: msg.content || '您的账号已在其他设备登录',
							type: 'warning',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						localStorage.removeItem('token');
						localStorage.removeItem('userId');
						localStorage.removeItem('userType');
						localStorage.removeItem('companyId');
						// 调用重置状态的函数  
						this.$store.dispatch('SET_DATA');
						this.$router.push({
							name: 'login'
						})
					}
				};
			},
			//获取用户信息
			getUserInfo() {
				this.$Request.get('/app/user/selectUserById').then(res => {
					if (res.code == 0) {
						// this.avatar = res.data.avatar
						//记录直属佣金比例
						localStorage.setItem('zhiRate', res.data.zhiRate)
						this.$store.commit('SET_ZHI_RATE', res.data.zhiRate)
						//设置手机号
						this.$store.commit('SET_PHONE', res.data.phone)
						//设置企业id
						// this.$store.commit('SET_COMPANY_ID', res.data.companyId)
						// localStorage.setItem('companyId', res.data.companyId)
						//设置邀请码
						this.$store.commit('SET_INVITATION_CODE', res.data.invitationCode)
						//设置头像
						this.$store.commit('SET_AVATAR', res.data.avatar);
						//设置昵称
						this.$store.commit('SET_NICK_NAME', res.data.userName);
						//设置微信号
						if (res.data.weChatNum) {
							this.$store.commit('SET_WE_CHAT_NUM', res.data.weChatNum);
						} else {
							this.$store.commit('SET_WE_CHAT_NUM', '');
						}

						if (res.data.userType == 1 || res.data.userType == null) {
							this.$store.commit('SET_USER_TYPE', 1);
							localStorage.setItem('userType', 1)
							if (res.data.isUserVip == 1) { //判断用户是否是vip
								this.$store.commit('SET_IS_VIP', true);
							} else {
								this.$store.commit('SET_IS_VIP', false);
							}
						} else {
							this.$store.commit('SET_USER_TYPE', 2);
							localStorage.setItem('userType', 2)
							if (res.data.isUserVip == 1) { //判断企业用户是否是vip
								this.$store.commit('SET_IS_COMPANY_VIP', true);
							} else {
								this.$store.commit('SET_IS_COMPANY_VIP', false);

							}
						}
					}
				})
			},
		},
	}
</script>

<style scoped>
	.headers {
		width: 100%;
	}

	.content {
		width: 1600px;
		margin: 0 auto;
	}

	.sidebars {
		position: fixed;
		right: 20px;
		top: 70%;
		transform: translate(0, -50%);
	}
</style>