zhgdyunapp/components/footers/footers.vue

<template>
	<view class="footerBox" :class="userInfo.accountType==5||userInfo.accountType==6?'footerBox2':''">
		<view @click="tabClick(item.plugin)" class="footerItem" :class="activeTab==item.plugin?'active':''" v-for="(item,index) in tabList" v-if="item.appShow==1" :key="index">
			<image class="tabIcon tabIcon1" :src="'/static/'+item.moduleIcon2+'.png'"></image>
			<image class="tabIcon tabIcon2" :src="'/static/'+item.moduleIcon+'.png'"></image>
			<view class="desc">
				{{item.appName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['activeTab'],
		data() {
			return {
				tabList:[],
				userInfo: {accountType:1}
				// activeTab: 0
			};
		},
		mounted() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			if(this.userInfo.accountType==5||this.userInfo.accountType==6){
				this.tabList.push({appName:'首页',moduleIcon2:'tabIcon-index',moduleIcon:'tabIcon-index-active',plugin:'projectEnd',appShow:1},
				{appName:'我的',moduleIcon2:'tabIcon-my2',moduleIcon:'tabIcon-my2-active',plugin:'my',appShow:1})
			}else{
				var moduleList = this.userInfo.menuAuthority.moduleList
				for (let i = 0; i < moduleList.length; i++) {
					if(moduleList[i].moduleType==1){
						this.tabList.push(moduleList[i])
					}
				}
				this.tabList.push({appName:'我的',moduleIcon2:'tabIcon-my',moduleIcon:'tabIcon-my-select',plugin:'my',appShow:1})
			}
			// console.log(this.tabList)
			
		},
		methods: {
			tabClick(plugin){
				console.log(plugin)
				switch (plugin){
					case 'projectManage':
						uni.redirectTo({
							url:'../../pages/projectManage/projectManage'
						})
						break;
					case 'videoManage':
						if(this.userInfo.accountType==5){
							uni.redirectTo({
								url:'../../pages/videoManage/videoList?sn='+that.userInfo.sn
							})
						}else{
							uni.redirectTo({
								url:'../../pages/areaTree/areaTree'
							})
						}
						break;
					case 'my':
						uni.redirectTo({
							url:'/pages/my/my'
						})
						break;
					case 'personManage':
						uni.redirectTo({
							url:'../../pages/personManage/personManage'
						})
						break;
					case 'projectEnd':
						uni.redirectTo({
							url:'/pages/projectEnd/projectIndex/projectIndex'
						})
						break;
					case 'deviceManage':
						uni.redirectTo({
							url:'../../pages/deviceManage/deviceManage'
						})
						break;
					case 'markRoom':
						uni.redirectTo({
							url:'../../pages/markRoomManage/markRoomManage'
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.footerBox{
	background-color: white;
	display: flex;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	border-top: 1px solid rgba(151, 151, 151, 0.15);
}
.footerItem{
	font-size: 12px;
	flex: 1;
	justify-content: center;
	text-align: center;
	color: rgba(148, 149, 173, 1);
	.tabIcon2{
		display: none;
	}
	&.active{
		color: $uni-color-primary;
		.tabIcon2{
			display: inline-block;
		}
		.tabIcon1{
			display: none;
		}
	}
	.desc{
		padding-bottom: 5px;
	}
}
.tabIcon{
	width: 26px;
	height: 26px;
}
.footerBox2{
	.desc{
		padding-bottom: 8px;
	}
	.footerItem{
		&:first-child{
			.tabIcon{
				padding-top: 10px;
				width: 23px;
				height: 21px;
			}
		}
		&:last-child{
			.tabIcon{
				padding-top: 8px;
				width: 20px;
				height: 23px;
			}
		}
	}
}
</style>