cocoroboBlockly/src/App.vue

<template>
	<div id="app">
		<div class="head">
			<div class="logo">
				<img
					style="height: 40px; margin-top: 10px"
					class="left nav-icon"
					src="https://x.cocorobo.cn/icons/logo.png"
					@click="goto()"
				/>
				<!-- <span
          style="
            font-size: 28px;
            font-family: 'GT Walsheim Pro Trial Bold';
            font-weight: bold;
            color: #fff;
          "
          >CocoBlockly</span
        > -->
			</div>
			<div class="user_head" v-if="this.$store.state.userId">
				<span class="user_name">{{ this.$store.state.userName }}</span>
				<div>
					<i></i>
					<el-button type="text" style="color: white" @click="logout"
						>退出</el-button
					>
				</div>
			</div>
		</div>

		<div style="background: #e5e5e5; height: calc(100% - 88.5px); width: 100%">
			<!-- main 内容 -->
			<keep-alive v-if="$route.meta.keepAlive">
				<!-- 这里是会被缓存的视图组件 -->
				<router-view v-if="$route.meta.keepAlive" />
			</keep-alive>
			<!-- 这里是不被缓存的视图组件 -->
			<router-view v-if="!$route.meta.keepAlive" />
		</div>
	</div>
</template>

<script>
	export default {
		name: "App",
		created() {
			//在页面加载时读取sessionStorage里的状态信息
			if (sessionStorage.getItem("store")) {
				this.$store.replaceState(
					Object.assign(
						{},
						this.$store.state,
						JSON.parse(sessionStorage.getItem("store"))
					)
				);
			}

			//在页面刷新时将vuex里的信息保存到sessionStorage里
			window.addEventListener("beforeunload", () => {
				sessionStorage.setItem("store", JSON.stringify(this.$store.state));
			});
			this.login();
		},
		methods: {
			goto() {
				this.$router.push("/");
			},
			login() {
				//debugger;
				// console.log("1");
				var _this = this;
				_this.ajax
					.get(`${_this.$store.state.server}getcookieuserid`)
					.then((res) => {
						var userid = res.data[0][0].userid;
						// var userid = "4be5e344-ce1a-11e9-a839-028edca3b798";
						_this.$store.commit("update", ["userId", userid]);
						_this.ajax
							.get(
								`${_this.$store.state.edu}admin/userinfo/userinfoById/${userid}/`
							)
							.then((r) => {
								let data = r.data[0][0];
								console.log(data);
								_this.$store.commit("update", [
									"userName",
									data.alias || data.username,
								]);
							});
					})
					.catch((err) => {
						// _this.props.history.push("/login");
						// window.alert(err.response.data)
						// window.location.href = "https://edu.cocorobo.cn/course/login?type=1";
					});
			},
			logout() {
				this.ajax
					.post(`${this.$store.state.server}logout`)
					.then((res) => {
						if (res.data) {
							window.location.href =
								"https://edu.cocorobo.cn/course/login?type=1";
						}
					})
					.catch((err) => {});
			},
		},
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
			"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}
	#app {
		height: 100%;
		width: 100%;
		/* background: #e6eaf0; */
		/* min-width: 1380px; */
		/* background: #fff; */
		background: #e5e5e5;
		min-width: 1000px;
	}
	.head {
		height: 67.5px;
		width: 100%;
		background-color: #2c4fcd;
		display: flex;
		align-items: center;
		min-width: 1000px;
	}
	.logo {
		margin-left: 20px;
		cursor: pointer;
	}
	.user_head {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: 20px;
		font-size: 18px;
		font-weight: 600;
	}
	.user_head .user_name {
		color: #fff;
		margin-right: 10px;
	}
	.user_head div {
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	.user_head i {
		background-image: url("./assets/exit.png");
		width: 25px;
		height: 25px;
		background-size: 100% 100%;
		margin-top: 1px;
		line-height: 25px;
		vertical-align: text-top;
		background-repeat: no-repeat;
	}
</style>