csi-financial-front/src/App.vue

<template>
	<!-- <el-button style="position: fixed;top: 30px;left: 300px;z-index: 999;" @click="go">123</el-button> -->
	<el-config-provider :size="getGlobalComponentSize" :locale="getGlobalI18n">
		<router-view v-show="setLockScreen" :key="route.path + Math.random()" />
		<LockScreen v-if="themeConfig.isLockScreen" />
		<!-- <Setings ref="setingsRef" v-show="setLockScreen" />
		<CloseFull v-if="!themeConfig.isLockScreen" /> -->

		<bindPhone ref="bindPhoneRef"></bindPhone>
		<RestPwdDialog ref="restPwdDialog" :intoType="3" @handleClose="configDialogClose"></RestPwdDialog>
	</el-config-provider>
</template>

<script setup lang="ts" name="app">
import { h, defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';
import { Local, Session } from '/@/utils/storage';
import mittBus from '/@/utils/mitt';
import setIntroduction from '/@/utils/setIconfont';
import { ElNotification } from 'element-plus';
import bindPhone from '/@/components/dialog/bindPhone.vue';
import RestPwdDialog from '/@/components/dialog/restPwdDialog.vue';

// import { useWebSocketStore } from "/@/stores/websocket";
// import { createWebSocket } from "/@/utils/websocket";
// const webSocket = useWebSocketStore();
// const studentId = ref(localStorage.getItem('loginuserId'))
// // 消息的方法
// const mes = ref();
// const global_callback = (msg) => {
// 	console.log("websocket的回调函数收到服务器信息：" + JSON.stringify(msg));
// 	// console.log("收到服务器信息：" + msg);
// 	mes.value = JSON.parse(JSON.stringify(msg));
// 	// console.log(mes.value,'这里有没有数据先',);
// 	webSocket.addMsg(mes);
// 	ElNotification({
// 		title: mes.value.title,
// 		message: mes.value.content,
// 		offset: 110,
// 		// position: 'bottom-right',
// 		type: 'warning',
// 		duration: 0,
// 	});
// };

// 创建WebSocket实例，替换为你的实际服务器地址
// const ws = new WebSocket('ws://124.222.224.186:8800');

function go() {
	// ws.send("12341234");
	// messageShow.value = true
}

// 引入组件
const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
// const Setings = defineAsyncComponent(() => import('/@/layout/navBars/topBar/setings.vue'));
// const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/topBar/closeFull.vue'));

// 定义变量内容
const { messages, locale } = useI18n();
const setingsRef = ref();
const route = useRoute();
const router = useRouter();
const stores = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

// 设置锁屏时组件显示隐藏
const setLockScreen = computed(() => {
	// 防止锁屏后，刷新出现不相关界面
	// https://gitee.com/lyt-top/vue-next-admin/issues/I6AF8P
	return themeConfig.value.isLockScreen ? themeConfig.value.lockScreenTime > 1 : themeConfig.value.lockScreenTime >= 0;
});

// 获取全局组件大小
const getGlobalComponentSize = computed(() => {
	return other.globalComponentSize();
});
// 获取全局 i18n
const getGlobalI18n = computed(() => {
	return messages.value[locale.value];
});

// 设置初始化，防止刷新时恢复默认
onBeforeMount(() => {
	// 设置批量第三方 icon 图标
	setIntroduction.cssCdn();
	// 设置批量第三方 js
	setIntroduction.jsCdn();
});

const bindPhoneRef = ref();
// 页面加载时
onMounted(() => {
	nextTick(() => {
		// 监听布局配'置弹窗点击打开
		mittBus.on('openSetingsDrawer', () => {
			setingsRef.value.openDrawer();
		});
		// 获取缓存中的布局配置
		if (Local.get('themeConfig')) {
			storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') });
			document.documentElement.style.cssText = Local.get('themeConfigStyle');
		}
		// 获取缓存中的全屏配置
		if (Session.get('isTagsViewCurrenFull')) {
			stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
		}
	});
});
import Cookies from 'js-cookie';
// 页面销毁时，关闭监听布局配置/i18n监听
onUnmounted(() => {
	mittBus.off('openSetingsDrawer', () => {});
});
const restPwdDialog = ref();
// 监听路由的变化，设置网站标题
watch(
	() => route.path,
	(val) => {
		// if (route.path != '/example' && route.path != '/login' && Session.get('userData').loginType == 0 ) {
		// 	bindPhoneRef.value.showModal()
		// }
		console.log('🚀 ~ router.query:', route.query);

		// 如果路径中包含token参数，存入本地，并重定向
		if (route.query?.token) {
			Session.set('userData', {
				...Session.get('userData'),
				token: route.query.token,
			});

			// 解构路由参数，排除token
			const { token, phone, ...otherQuery } = route.query;
			// 若存在token，替换路由清除参数
			if (token) {
				router.replace({
					path: route.path, // 保持当前路径不变
					query: otherQuery, // 保留其他参数
				});

				Session.set('token', token);
				Cookies.set('token', token);
				Cookies.set('phone', phone);
				window.token = token;
				window.phone = phone;
				
				Session.set('roleName', 'common');
				Session.set('userData', {
					...Session.get('userData'),
					userType: 0,
					type: 0,
				});

				// else if (Session.get('userData').userType == 0 && Session.get('userData').type == 0) {
				// 	// 普通企业 common
				// 	Session.set('roleName', 'common');
				// 	rolesLocal = 'common';
				// } else if (Session.get('userData').userType == 0 && Session.get('userData').type == 1) {
				// 	// 普通企业子账号 subCommon
				// 	Session.set('roleName', 'subCommon');
				// 	rolesLocal = 'subCommon';
				// }
				console.log('🚀 ~ window.token :', window.token);
			}
		}

		if (
			route.path != '/example' &&
			route.path != '/contract' &&
			route.path != '/loginReal' &&
			route.path != '/login' &&
			Session.get('userData')?.showFlag == 0
		) {
			restPwdDialog.value.showModal();
		}
		other.useTitle();
	},
	{
		deep: true,
	}
);
</script>

<style>
.edit_anim {
	animation-name: scrollBottomAnimForBuildPage;
	animation-duration: 1.5s;
}

@keyframes scrollBottomAnimForBuildPage {
	0% {
		background-color: white;
	}

	50% {
		background-color: rgb(255, 0, 60, 0.1);
	}

	100% {
		background-color: white;
	}
}
</style>