dd_pc/src/index.vue

<template>
	<el-container class="box-all" v-loading="loading">
		<el-header>
			<div class="flex-box">
				<div class="logo-box flex-box flex-center-center">
					<img src="./assets/image/logo.png" class="logo" />
					<div>功道云积分制</div>
				</div>
				<div class="flex-1 hea-right flex-box flex-v-ce">
					<div class="name flex-1">{{ info.name }}</div>
					<div class="flex-box flex-v-ce">
						<div>您当前的版本：15~20人（剩余231天）</div>
						<el-button size="small" @click="tz" class="upgrade" type="primary" icon="el-icon-upload">续费升级</el-button>
						<span class="wn">?</span>
						<userImage :user_name="userData.name" :img_url="userData.img_url" width="44px" height="44px"></userImage>
					</div>
				</div>
			</div>
		</el-header>
		<el-container class="main">
			<el-aside>
				<el-menu default-active="1" class="el-menu-vertical-demo" :router="true">
					<el-menu-item :index="(index + 1).toString()" :route="item.path" v-for="(item, index) in routers" :key="index">
						<span class="iconfont" :class="item.meta.icon"></span>
						<span slot="title" style="margin-left: 10px;">{{ item.name }}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main><router-view /></el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			userData: '',
			routers: [],
			info: ''
		};
	},
	created() {
		this.routers = this.$router.options.routes[0].children;
	},
	mounted() {
		// var url = window.location.href;
		// var str = this.GetRequest(url).corpId || '123';
		// var corpId = str.split('#')[0];
		// if (corpId) {
		// 	this.login(corpId);
			this.getTypes();
		// }
	},
	methods: {
		tz(){},
		login(corpId) {
			var that = this;
			this.loading=true;
			this.$dd.runtime.permission.requestAuthCode({
				corpId: corpId, // 企业id
				onSuccess: function(info) {
					that.$axios.post('api/ding/login', { authCode: info.code, corpId: corpId }).then(res => {
						var is=false;
						if (res.data.code == 1) {
							var { token, user } = res.data.data;
							user.employee_detail.role_list.forEach(item=>{
								if(user.is_official==1){
									if(item.name=='admin'||item.name=='creator'||item.name=='point_manager'){
										is=true;
									}
								}
							})
							if(is){
								that.$setUserData(user);
								that.userData = user;
								that.getInfo();
							}else{
								that.$router.replace({path:'/noAccess'})
							}
						}
					}).finally(() => {
						that.loading = false;
					});
				}
			});
		},
		getInfo() {
			var that = this;
			this.$axios.get('api/site/info').then(res => {
				that.info = res.data.data;
			});
		},
		getTypes() {
			var that = this;
			this.$axios.get('api/integral/types').then(res => {
				that.$setTyps(res.data.data.list);
			});
		},
		GetRequest(urlStr) {
			if (typeof urlStr == 'undefined') {
				var url = decodeURI(location.search); //获取url中"?"符后的字符串
			} else {
				var url = '?' + urlStr.split('?')[1];
			}
			var theRequest = new Object();
			var strs;
			if (url.indexOf('?') != -1) {
				var str = url.substr(1);
				strs = str.split('&');
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return theRequest;
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 180px;
	min-height: 400px;
}
.el-header {
	background-color: #fff;
	line-height: 60px;
	padding: 0 !important;
	border-bottom: 1px solid #f1f1f1;
}
.el-menu {
	overflow: hidden;
	border: none;
}
.el-aside {
	transition: width 0.28s;
	width: 180px !important;
	background-color: #fff;
	height: calc(100vh - 60px);
}
.el-aside::-webkit-scrollbar {
	width: 0px;
	background-color: #fff;
}

.el-aside::-webkit-scrollbar-thumb {
	background-color: #ccc;
}
.con_nav_left {
	background: #fff;
	overflow-y: scroll;
}
.box-all {
	height: 100%;
	overflow: hidden;
}
.el-main {
	background-color: #f4f6f9;
	height: calc(100vh - 60px);
	overflow-y: scroll;
	padding: 10px;
}
.el-main::-webkit-scrollbar{
	width: 3px;
	height: 10px;
	background-color: #fff;
}
.el-main::-webkit-scrollbar-thumb {
	background-color: #D9D9D9;
}
.logo-box {
	width: 200px;
}
.logo-box .logo {
	width: 30px;
	height: 30px;
	margin-right: 5px;
}
.logo-box div {
	font-size: 16px;
	font-weight: 600;
}
.wn {
	height: 26px;
	width: 26px;
	border: 1px solid #c0c4cc;
	line-height: 26px;
	text-align: center;
	border-radius: 50px;
	margin: 0 10px;
	font-size: 18px;
	color: #c0c4cc;
}
.hea-right {
	padding: 0 20px;
}
.upgrade {
	margin-left: 10px;
}
</style>