pbl-teacher-table/src/App.vue

<template>
	<div id="app" :class="{appNoWidth:$route.path == '/data' || $route.path == '/note'}">
		<!-- <div class="app_head" :class="{stuWidth:$route.path == '/student'}"> -->
		<!-- <div class="logo" @click="goTo('/course')"></div>
      <span style="margin-left: 10px; color: #fff; font-weight: 600" @click="goTo('/course')"
        >PBL项目管理平台</span
      >
      <div class="user_head" v-if="this.$store.state.isLogin">
        <div class="noticeBox">
          <i class="noticeI" @click="goTo('/works')"></i>
          <span v-if="this.$store.state.nCount != 0">{{
            this.$store.state.nCount > 99 ? "99+" : this.$store.state.nCount
          }}</span>
        </div>
        <span class="user_name">{{
          this.$store.state.userInfo ? this.$store.state.userInfo.name : "用户"
        }}</span>
        <div @click="exit">
          <i class="exitI"></i>
          <el-button type="text" style="color: white" 
            >退出</el-button
          >
        </div>
      </div> -->
		<!-- </div> -->
		<div :class="{gHeight: $route.path == '/Grid'}" style="width:100%;height:100%">
			<!-- main 内容 -->
			<keep-alive v-if="$route.meta.keepAlive">
				<!-- 这里是会被缓存的视图组件 -->
				<router-view
					v-if="$route.meta.keepAlive"
					:class="{ pb_body: isShowNav }"
				/>
			</keep-alive>
			<!-- 这里是不被缓存的视图组件 -->
			<router-view
				v-if="!$route.meta.keepAlive"
				:class="{ pb_body: isShowNav }"
			/>

			<!-- 底部导航 -->
			<!-- <footer-nav
				v-if="isShowNav"
				:luyou="this.$store.state.luyou"
			></footer-nav> -->
		</div>
	</div>
</template>

<script>
	// import leftBar from "./components/tools/leftBar";
	import { Message } from "element-ui";
	export default {
		name: "App",
		data() {
			return {
				isShowNav: true, // 是否显示导航 Tab
				navTabs: [
					"/class",
					"/course",
					"/data",
					"/notice",
					"/student",
					"/works",
					"/worksDetail",
					"/course/courseDetail",
					"/library",
					// "/course/addCourse",
					// "/ask",
					// "/ask/askList",
				], // 导航
			};
		},
		// components: {
		//   "footer-nav": leftBar,
		// },
		created: function () {
			this.routerP();
			// this.getnCount();
			setInterval(() => {
				// this.getnCount();
			}, 60000);
		},
		methods: {
			isLogin() {
				const loading = this.$loading.service({
					background: "rgba(255, 255, 255)",
					target: document.querySelector("body"),
				});
				var _isLogin = this.$cookies.get("tlogin");
				var userInfo = this.$cookies.get("teacherInfo");
				// if (_isLogin == "1" && userInfo) {
				loading.close();
				this.$store.commit("update", ["isLogin", true]);
				// var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
				this.$store.commit("update", ["userInfo", userInfo]);
				let router_path = this.$route.path;
				if (router_path == "/") {
					this.$router.push("/course");
				}
				// } else {
				//   this.$store.commit("update", ["isLogin", false]);
				//   Message({
				//     message: "未登录，请登录",
				//     type: "warning",
				//   });
				//   setTimeout(() => {
				//     loading.close();
				//     this.$router.push("/login");
				//   }, 2000);
				// }
			},
			getnCount() {
				let params = {
					bid: this.$store.state.userInfo.userid,
				};
				this.ajax
					.get(this.$store.state.api + "getNcount", params)
					.then((res) => {
						console.log(res);
						if (res.data[0].length > 0) {
							this.$store.commit("update", ["nCount", res.data[0][0].num]);
						} else {
							this.$store.commit("update", ["nCount", 0]);
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
			routerP() {
				const { navTabs } = this.$data;
				let router_path = this.$route.path;
				console.log(router_path);
				if (router_path != "/login") {
					this.isLogin();
				}
				var a = 0;
				for (var i = 0; i < navTabs.length; i++) {
					if (router_path == navTabs[i]) {
						this.isShowNav = true;
						a = 1;
						break;
					}
				}
				if (a == 0) {
					this.isShowNav = false;
				}
			},
			exit() {
				sessionStorage.clear();
				this.$cookies.remove("tlogin");
				this.$cookies.remove("teacherInfo");
				this.$store.commit("update", ["isLogin", false]);
				this.$store.commit("update", ["userInfo", {}]);
				Message({
					message: "退出成功",
					type: "success",
				});
				this.$router.push("/login");
			},
			goTo(path) {
				this.$router.push(path);
			},
		},
		watch: {
			$route(to, from) {
				const { navTabs } = this.$data;
				const toPath = to.path;
				const fromName = from.name;
				var a = 0;
				for (var i = 0; i < navTabs.length; i++) {
					if (toPath == navTabs[i]) {
						this.isShowNav = true;
						a = 1;
						break;
					}
				}
				if (a == 0) {
					this.isShowNav = false;
				}
			},
		},
	};
</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; */
		min-width: 1250px;
	}
	
	.appNoWidth{
		min-width: unset !important;
		display: inline-block !important;
		min-width: 550px;
	}

	.app_head {
		height: 67.5px;
		width: 100%;
		background-color: rgb(61, 103, 188);
		display: flex;
		align-items: center;
		min-width: 1000px;
	}
	.logo {
		height: 48px;
		width: 73px;
		background: url("./assets/logo.png");
		background-size: 100% 100%;
		margin-left: 20px;
	}
	.pb_body {
		margin: 20px;
		width: 98%;
		min-width: 745px;
		/* display: inline-block; */
		height: 95%;
		min-height: 750px;
		background: #fff;
		border-radius: 5px;
		/* position: absolute; */
	}
	.pb_head {
		font-size: 26px;
		/* font-weight: 600; */
		width: 95%;
		margin: 10px auto;
		padding: 10px 5px;
		border-bottom: 1px solid #eee;
	}
	.pb_content {
		/* height: 100%; */
	}
	.pb_content_body {
		width: 94%;
		margin: 10px auto;
		/* overflow: auto;
	  height: calc(100% - 120px); */
	}
	.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 .exitI {
		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;
	}
	.noticeBox {
		position: relative;
		margin-right: 10px;
	}

	.user_head .noticeI {
		background-image: url("./assets/icon/noticeA.png");
		width: 25px;
		height: 25px;
		background-size: 100% 100%;
		margin-top: 1px;
		line-height: 25px;
		vertical-align: text-top;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.noticeBox span {
		position: absolute;
		background: red;
		width: 15px;
		height: 15px;
		border-radius: 30px;
		color: #fff;
		text-align: center;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		top: -3px;
		right: -3px;
	}
	.stuWidth {
		min-width: 1180px;
	}
	.gHeight{
		height: 100%;
	}
</style>