Investment-data-system/src/App.vue

<template>
	<div class="p-app g_flex_row_start" :class="pageMeta == 'largeScreen' ? '' : 'p-app-base'">
		<aside
			class="g_flex_none"
			v-if="isShow"
			:style="{
				opacity: showPage ? 1 : 0,
			}"
		>
			<Maside />
		</aside>
		<main class="g_flex_1 g_flex_column_start">
			<header
				class="g_flex_none"
				v-if="isShow"
				:style="{
					opacity: showPage ? 1 : 0,
				}"
			>
				<Mheader />
			</header>
			<main class="g_flex_1">
				<a-config-provider :locale="locale" :autoInsertSpaceInButton="false">
					<RouterView class="g_flex_1" :style="{ 'max-width': 'calc(100vw - ' + _width + 'px)' }" :isLogin="isLogin" />
				</a-config-provider>
			</main>
		</main>
	</div>
</template>

<script setup>
import { ref, onMounted, onUpdated, onBeforeMount, getCurrentInstance, watch, createApp } from "vue";
import Mheader from "./layout/m-header.vue";
import Maside from "./layout/m-aside.vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

import { useRoute, useRouter } from "vue-router";
import { useStore } from "./stores/counter";
import { mockNotificationList } from "./utils/mock.js";
import { checkTokenApi } from "./api/base";
const showPage = ref(false);
const isShow = ref(false);
const locale = ref(zhCN);
const route = useRoute();
const router = useRouter();
const storeJS = useStore();
const isLogin = ref(false);
onBeforeMount(() => {
	// 仅在本地运行
	if (import.meta.env.MODE == "development") {
		if (route.meta.name == "largeScreen" || route.meta.name == "delivery" || route.meta.name == "noPage" || route.meta.name == "main" || route.meta.name == "login") {
			showPage.value = false;
			isShow.value = false;
		} else {
			showPage.value = true;
			isShow.value = true;
		}
	}
});
const getUrlParams = () => {
	let that = this,
		$str = window.location.href,
		_list = $str.split("?"),
		arr = _list[1],
		newArr = [],
		_arrs = [],
		_params = {};
	if (arr == undefined) {
	} else {
		newArr = arr.split("&");
		newArr.forEach((item, index) => {
			_arrs.push({
				$key: item.split("=")[0],
				$value: item.split("=")[1],
			});
		});
		_arrs.forEach((item, index) => {
			_params[item.$key] = item.$value;
		});
	}
	return _params;
};
onMounted(() => {
	if (localStorage.getItem("daotian_to_admin_token")) {
		localStorage.setItem("DAOTIAN_token", localStorage.getItem("daotian_to_admin_token"));
		localStorage.setItem("DAOTIAN_userinfo", localStorage.getItem("LOGIN_DATA"));
		localStorage.setItem("DAOTIAN_userinfo_name", localStorage.getItem("daotian_to_admin_username"));
		localStorage.setItem("DAOTIAN_userinfo_avatar", localStorage.getItem("daotian_to_admin_avatar"));
		localStorage.setItem("DAOTIAN_userinfo_roleid", localStorage.getItem("daotian_to_admin_roleid"));
		localStorage.setItem("DAOTIAN_userinfo_agencyid", localStorage.getItem("daotian_to_admin_agencyid"));
		router.push("/merchantManagement/homePage");
	} else {
		console.log("getUrlParams().token", getUrlParams().token);
		if (getUrlParams().token) {
			console.log("getUrlParams().userInfo", getUrlParams().userInfo);
			// console.log(decodeURIComponent(getUrlParams().userInfo));
			localStorage.setItem("DAOTIAN_token", getUrlParams().token);
			localStorage.setItem("DAOTIAN_userinfo_name", getUrlParams().username);
			localStorage.setItem("DAOTIAN_userinfo_avatar", getUrlParams().avatar);
			localStorage.setItem("DAOTIAN_userinfo_agencyid", getUrlParams().agencyid);
			localStorage.setItem("DAOTIAN_userinfo", decodeURIComponent(getUrlParams().userInfo));
			localStorage.setItem("DAOTIAN_userinfo_roleid", getUrlParams().roleid.split("#/")[0]);
			router.push("/merchantManagement/homePage");
		}
	}
	// checkToken();
	if (localStorage.getItem("DAOTIAN_token")) {
		isLogin.value = true;
	} else {
		isLogin.value = false;
	}
});
const checkToken = () => {
	checkTokenApi().then((res) => {
		console.log(res);
	});
};
onUpdated(() => {
	if (route.meta.name == "largeScreen" || route.meta.name == "delivery" || route.meta.name == "noPage" || route.meta.name == "main" || route.meta.name == "login") {
		showPage.value = false;
		isShow.value = false;
	} else {
		showPage.value = true;
		isShow.value = true;
	}
	if (localStorage.getItem("DAOTIAN_token")) {
		isLogin.value = true;
	} else {
		isLogin.value = false;
	}
});
onMounted(() => {
	console.log("获取path信息：", window.location);
	if (import.meta.env.MODE == "development") {
		setTimeout(() => {
			showPage.value = true;
		}, 300);
	} else {
		showPage.value = true;
	}
	getInit(route);
});
watch(route, (val) => {
	if (val.meta.name == "largeScreen" || route.meta.name == "delivery" || route.meta.name == "noPage" || route.meta.name == "main" || route.meta.name == "login") {
		isShow.value = false;
	} else {
		isShow.value = true;
	}
	getInit(val);
});
const _width = ref(200);
const pageMeta = ref("");
watch(storeJS.$state.layoutData, (val) => {
	if (route.name == "delivery" || route.name == "largeScreen" || route.meta.name == "noPage" || route.meta.name == "main" || route.meta.name == "login") {
		_width.value = 0;
	} else {
		if (val.isToggle) {
			_width.value = 80;
		} else {
			_width.value = 200;
		}
	}
});

const getInit = ($data) => {
	console.log("app.vue meta信息: ", $data);
	if ($data.meta.title) {
		document.title = $data.meta.title;
	}
	pageMeta.value = $data.meta.name;
	if (localStorage.getItem("DAOTIAN_notification_list")) {
	} else {
		localStorage.setItem("DAOTIAN_notification_list", JSON.stringify(mockNotificationList));
	}
	if ($data.name == "delivery" || $data.name == "largeScreen" || $data.name == "noPage" || route.meta.name == "main" || route.meta.name == "login") {
		_width.value = 0;
	} else {
		_width.value = 200;
	}
};
</script>

<style>

@import url(./assets/css/iconfont.css);
</style>
<style lang="less">
.anticon:before {
	display: block !important;
}
@font-face {
	font-family: "DingTalk_JinBuTi_Regular";
	src: url("./assets/font/DingTalk_JinBuTi_Regular.woff") format("truetype");
}

.p-app {
	height: 100vh;
}
.p-app-base {
	min-width: 1270px;
}

.g_family_dingding {
	font-family: "DingTalk_JinBuTi_Regular";
}
</style>