dd_pc/src/index.vue

<template>
	<el-container class="box-all" v-loading="loading">
		<el-header>
			<div class="flex-box" style="height: 60px;">
				<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" v-if="info.name">
					<div class="name flex-1">{{ info.name }}</div>
					<div class="flex-box flex-v-ce">
						<div>您当前为 <span class="blue">"{{corpMessage.package_name}}"</span>,有效期至<span style="color:#FF9600">{{corpMessage.expire_time}}</span></div>
						<el-button size="small" @click="isTz=true" class="upgrade" type="primary" icon="el-icon-upload">续费升级</el-button>
						<el-tooltip class="item" effect="dark" content="设置向导" placement="bottom" v-if="!this.$authoritys('employee') && !this.$authoritys('dept_manager')">
							<img src="./assets/image/wn.png" class="wn" @click="showWn">
						</el-tooltip>
						<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="defaultActive" class="el-menu-vertical-demo" :router="true" @select="activeRouter" >
					<template v-for="(item, index) in routers">
						<div v-if="item.children.length!=0" :key="index">
							<el-submenu :index="index.toString()"  :key="index" v-if="item.children.length>=1 && item.name!='首页'">
								<template slot="title"><span class="iconfont titleIcon" :class="item.icon" style="font-size: 20px;"></span><span style="margin-left: 5px;">{{item.name}}</span></template>
								<template v-for="(item2, index2) in item.children">
									<el-menu-item :index="returnIndex(index,index2)" :ref="item2.path" :route="item2.path" :key="index2" class="font-flex-word">
										<span slot="title" style="margin-left: 10px;width:120px">{{ item2.name }}</span>
									</el-menu-item>
								</template>
							</el-submenu>
							<el-menu-item :index="returnIndex(index,index)" :route="item.children[0].path" :ref="item.children[0].path" v-else>
									<span class="iconfont titleIcon" :class="item.icon" style="font-size: 20px;"></span>
									<span slot="title" style="margin-left: 5px;">{{ item.children[0].name }}</span>
							</el-menu-item>
						</div>
					</template>	  
				</el-menu>
			</el-aside>
			<el-main>
				<router-view />
				<div class="fontColorF" style="text-align: center;margin: 20px 0;">Copyright © 2020 广东功道云数字科技有限公司 All Rights Reserved</div>
			</el-main>
		</el-container>
		<!-- 续费升级 -->
		<el-dialog class="续费升级"  :visible.sync="isTz" width="400px">
			<div style="border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px; width: 276px;box-sizing: border-box;margin: 0 auto;">
				<img src="./assets/image/code.png"/>
			</div>
			<div class="fontColorF" style="text-align: center;margin-top: 15px;font-size: 18px;">手机钉钉扫码，付费升级</div>
		</el-dialog>
		<el-dialog title="设置向导" :visible.sync="wn_show" width="600px">
			<div>
				<div class="wn-title fontColorF">三步轻松搭建积分管理体系：定人员、分责权、建制度</div>
				<div class="flex-box flex-v-ce wn-box">
					<div class="flex-1 flex-box-v flex-v-ce"  @click="openView(0)">
						<div><span class="iconfont " :class="routers_one[0].meta.icon"></span></div>
						<div>1、确定{{routers_one[0].name}}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce"  @click="openView(1)">
						<div><span class="iconfont " :class="routers_one[1].meta.icon"></span></div>
						<div>2、分配{{routers_one[1].name}}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce"  @click="openView(2)">
						<div><span class="iconfont " :class="routers_one[2].meta.icon"></span></div>
						<div>3、建立{{routers_one[2].name}}</div>
					</div>
				</div>
			</div>
			<div>
				<div class="wn-title fontColorF">更有效地做好积分激励和认可，你还可以设置以下3项</div>
				<div class="flex-box flex-v-ce wn-box">
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(3)">
						<div><span class="iconfont " :class="routers_one[3].meta.icon"></span></div>
						<div>{{routers_one[3].name}}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(4)">
						<div><span class="iconfont " :class="routers_one[4].meta.icon"></span></div>
						<div>{{routers_one[4].name}}</div>
					</div>
					<div class="flex-1 flex-box-v flex-v-ce" @click="openView(5)">
						<div><span class="iconfont " :class="routers_one[5].meta.icon"></span></div>
						<div>{{routers_one[5].name}}</div>
					</div>
				</div>
			</div>
		</el-dialog>
<!-- 		<el-drawer
		  title="我是标题"
		  :visible.sync="isTz"
		  :direction="direction"
		  >
		  <span>我来啦!</span>
		</el-drawer> -->
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			userData: {},
			routers:[],
			routers_one:[],
			info: {},
			wn_show:false,
			defaultActive:"0-0",
			isShowWn:true,
			isTz:false,
			direction: 'rtl',
			corpMessage:{},//企业套餐信息
		};
	},
	created() {
		this.routers=[
			{name:'首页',children:this.returnRoutersArr('home'),icon:'icon-xuanzhong_shouye'},
			{name:'A/B分',children:this.returnRoutersArr('abPoint'),icon:'icon-PC_gongzuotai_ABfen'},
			{name:'任务',children:this.returnRoutersArr('task'),icon:'icon-PC_gongzuotai_renwu'},
			{name:'统计',children:this.returnRoutersArr('ranking'),icon:'icon-dingdingPC_tongji'},
			// {name:'设置',children:this.returnRoutersArr('set'),icon:'icon-dingdingPC_shezhi'},
			];
		//this.$authoritys('权限名') 判断权限
		if(this.$authoritys('creator') || this.$authoritys('admin') || this.$authoritys('point_manager')){
			this.routers.push({name:'设置',children:this.returnRoutersArr('set'),icon:'icon-dingdingPC_shezhi'})
		}
		//this.returnRoutersArr('set',true) 加true表示不限制路由
		this.routers_one=this.returnRoutersArr('set',true);
		this.userData=this.$getUserData();
		if(this.$route.path!='/home'){//当刷新页面是控制左边导航栏的选中
			this.defaultActive=localStorage.getItem("path");
		}
	},
	mounted() {
		this.getTypes();
		this.getInfo();
		var url = window.location.href;
		var str = this.GetRequest(url).corpId || '123';
		var corpId = str.split('#')[0];
		if (corpId) {
			this.getCorp(corpId);
		}
		this.$nextTick(function() {
			if(!this.$authoritys('employee') && !this.$authoritys('dept_manager')){
				if (localStorage.getItem('wn_show')) {
					this.wn_show = false;
					this.isShowWn=false;
				} else {
					this.wn_show = true;
					localStorage.setItem('wn_show','true');
				}
			}
		});
	},
	watch:{
		 $route(to,from){
			//多一层判断，防止误入或乱跳页面，判断对应路由是否有权限
			// if(to.meta.jurisdiction.indexOf(this.$supremeAuthority())==-1){
			// 	this.$router.push({ path: '/home' })
			//  this.defaultActive = '0-0'
			//  localStorage.setItem("path",'0-0');
			// }else{
			// }

			 let routes = this.routers[to.meta.identification].children
			 let paths = ''
			 for(let i in routes){
				 if(routes[i].path == to.path){
					paths = to.meta.identification+'-'+i
					// paths = this.returnIndex(to.meta.identification,i)
				 }
			 }
			this.defaultActive = paths
			localStorage.setItem("path",paths);
		}
	},
	methods: {
		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;
		},
		//获取套餐信息
		getCorp(corpId) {	
		    this.$axios('get',"api/order/corp", {corp_id:corpId}).then((res) => {
		      this.corpMessage = res.data.data;
		    })
		},
		getSku(){
			var that = this;
			this.$axios('get','api/order/goods/sku',{callback: "https://test-ding.g107.com/#/index", goods_code: 'DD_GOODS-610003' }).then(res => {
			
			});
		},
		//当刷新页面是控制左边导航栏的选中
		activeRouter(index,indexPath){
			// console.log(index,indexPath)
			localStorage.setItem("path",indexPath[1]?indexPath[1]:indexPath[0]);
		},
		routerAstrict(data){//限制路由
			let obj = []
			let supAuthority = this.$supremeAuthority()
			data.forEach(item=>{
				if(!item.meta.jurisdiction){
					obj.push(item)
				}else{
					if(item.meta.jurisdiction.indexOf(supAuthority)==-1){
						obj.push(item)
					}
				}
			})
			return obj
		},
		returnRoutersArr(str,bool){
			var routers = this.$router.options.routes[0].children;
			var routersArr=[];
			routers.forEach(item=>{
				if(item.meta.groupCode==str){
					routersArr.push(item);
				}
			})
			if(bool){
				return routersArr;
			}
			return this.routerAstrict(routersArr);
		},
		returnIndex(str,str2){
			return str+"-"+str2;
		},
		openView(e){
			this.wn_show=false;
			this.isShowWn=false;
			this.$router.push({path:this.routers_one[e].path})
			this.defaultActive="2-"+(e).toString();
			localStorage.setItem("path",this.defaultActive);
		},
		showWn(){
			this.wn_show=true;
		},
		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);
			});
		},
	}
};
</script>

<style scoped="scoped" lang="scss">
.wn-box{
	padding: 20px 0;
}
.wn-box .flex-1{
	cursor: pointer;
}
.wn-box .flex-1 div:nth-child(1){
	width: 55px;
	height: 55px;
	border-radius: 50%;
	text-align: center;
	line-height: 55px;
	background-color: #E0F2FF;
	color: #26A2FF;
	margin-bottom: 20px;
}
.wn-box .flex-1 div:nth-child(2){
	width: 110px;
	border-radius: 25px;
	border: 1px solid #26A2FF;
	padding:7px 10px;
	text-align: center;
	color: #26A2FF;
}
.wn-box .flex-1:hover div:nth-child(1){
	color: #fff;
	background-color: #26A2FF;
}

.wn-box .flex-1:hover div:nth-child(2){
	color: #fff;
	background-color: #26A2FF;
}
.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: 180px;
}
.logo-box .logo {
	width: 30px;
	height: 30px;
	margin-right: 5px;
	border-radius: 6px;
}
.logo-box div {
	font-size: 16px;
	font-weight: 600;
}
.wn {
	height: 26px;
	width: 26px;
	margin-right: 12px;
	cursor: pointer;
}
.hea-right {
	padding: 0 20px;
}
.upgrade {
	margin-left: 10px;
	margin-right: 10px;
}
::v-deep .el-menu-item{
	padding-right: 10px !important;
}
::v-deep .el-menu-item.is-active {
    color: #26A2FF;
	background-color: #ecf5ff;
}
</style>