realty/virgo.wzfrontend/console/src/layout/website.vue

<template>
	<div class="website-layout">
		<div class="layout-title">
			<div class="title-box">
				<div class="title-logo">
					<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3156449b8a1a4874981b2a76d5947721"
						alt="logo.png" @click="$router.push('/website/home')">
					<div class="title-label" @click="$router.push('/website/home')">
						<div class="title-name">有极智慧园区</div>
						<div class="title-sub-name">SMART PARK SYSTEM</div>
					</div>
					<div class="location" @click="$router.push('/website/city')">
						<i class="el-icon-location"></i>
						<span class="location-name">{{$store.getters.city.cityName}}</span>
					</div>
				</div>
				<div class="login" v-if="user.userId">
					<div class="login-avatar">
						<avatar :user="user"></avatar>
					</div>
					<span class="login-name">{{user.userName}}</span>
					<span class="color-blue loginout" @click="loginout">退出</span>
					<span class="admin-system" @click="$router.push('/')">管理系统</span>
				</div>
				<div class="login" v-else>
					<div class="login-icon">
						<i class="el-icon-s-custom"></i>
					</div>
					<span class="login-name" @click="login">登录 / 注册</span>
					<span class="admin-system" @click="$router.push('/')">管理系统</span>
				</div>
			</div>
		</div>
		<router-view :key="key" />
		<div class="login-toggle" v-if="visible">
			<login @callback="callback"></login>
		</div>
	</div>
</template>

<script>
	import city from '@/uitls/citys.js';
	import login from '@/components/website/login';
	import avatar from '@/components/common/avatar'
	import {
		removeToken
	} from '@/uitls/auth';
	import {
		getToken
	} from '@/uitls/auth'
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				visible: false,
				user: {}
			}
		},
		created() {
			this.init();
		},
		mounted() {
			document.getElementById('body').style.overflow = 'auto'
		},
		methods: {
			init() {
				if (this.$store.getters.user) this.user = this.$store.getters.user;
				this.initLocation();
			},
			initLocation() {
				if (this.$store.getters.city && this.$store.getters.city.cityCode) return;
				$.getJSON("https://restapi.amap.com/v3/ip?key=36b8970fe5bcfd92fe9e34e32d0e7461", res => {
					for (let i = 0; i < city.length; i++) {
						if (city[i].cityCode == res.adcode) {
							this.$store.dispatch('app/changeCity', city[i]);
						}
					}
				}).fail(error => {
					this.$store.dispatch('app/changeCity', city[0]);
				});
			},
			login() {
				this.visible = true;
			},
			callback(type) {
				if (type === 'init') {
					if (this.$route.path == '/website/homeDetail') {
						this.$store.dispatch('app/changeEvent', {
							type: 'homeDetailReload'
						})
					} else if (this.$route.path == '/website/search') {
						this.$store.dispatch('app/changeEvent', {
							type: 'searchReload'
						})
					}
					this.init();
				}
				this.visible = false;
			},
			loginout() {
				this.$confirm('是否要退出登录?', () => {
					removeToken();
					this.$store.dispatch('projectBase/changeProject', {});
					this.$store.dispatch('app/changeUser', {});
					this.$store.dispatch('app/changeOrganization', {});
					this.$message.success('退出成功');
					this.init();
				});
			},
		},
		computed: {
			key() {
				if ((this.$route.path == '/website/homeDetail' || this.$route.path == '/website/search') && !getToken())
					this.login();
				return this.$route.path;
			},
			...mapGetters(['event'])
		},
		watch: {
			event() {
				let event = this.$store.getters.event;
				if (event.type == 'login') this.login();
			}
		},
		components: {
			login,
			avatar
		}
	}
</script>

<style lang="scss">
	.website-layout {
		width: 100%;
		position: relative;

		.login-toggle {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 998;
			background: rgba(0, 0, 0, 0.5);
		}

		.layout-title {
			position: absolute;
			width: 100%;
			min-width: 1200px;
			left: 0;
			top: 0;
			height: 60px;
			color: #fff;
			z-index: 9;
			background: rgba(0, 0, 0, 0.5);

			.title-box {
				width: 1200px;
				height: 100%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

			}

			.title-logo {
				display: flex;
				align-items: center;

				img {
					width: 44px;
					height: 44px;
					border-radius: 4px;
					margin-right: 10px;
					cursor: pointer;
				}

				.title-label {
					width: 130px;
					cursor: pointer;
				}

				.title-name {
					font-size: 16px;
					line-height: 22px;
					font-weight: 500;
				}

				.title-sub-name {
					font-size: 12px;
					transform: scale(.68) translateX(-28px);
					opacity: .75;
				}

				.location {
					border: 2px solid #fff;
					border-radius: 26px;
					height: 26px;
					padding: 0 10px;
					display: flex;
					align-items: center;
					cursor: pointer;
				}

				.location-name {
					font-size: 12px;
					margin-left: 3px;
				}
			}

			.login {
				display: flex;
				align-items: center;

				.loginout {
					font-size: 12px;
					margin-left: 5px;
					cursor: pointer;
				}

				.login-avatar {
					width: 32px;
					height: 32px;
					border-radius: 32px;
					margin-right: 10px;
					overflow: hidden;
				}

				.login-icon {
					width: 32px;
					height: 32px;
					border: 2px solid #fff;
					border-radius: 32px;
					text-align: center;
					line-height: 32px;
					margin-right: 10px;

					.el-icon-s-custom {
						font-size: 20px;
					}
				}

				.login-name {
					cursor: pointer;
					font-weight: 500;
				}

				.admin-system {
					padding: 5px 10px;
					border-radius: 4px;
					border: 1px solid #fff;
					margin-left: 10px;
					cursor: pointer;

					&:hover {
						border-color: $--color-primary;
						color: $--color-primary;
					}
				}
			}
		}
	}
</style>