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 if (this.COMPANY == 'sanjiang') {
				this.tabList.push({
						appName: '首页总览',
						moduleIcon2: 'sjjt_syzl',
						moduleIcon: 'sjjt_syzl-tab',
						plugin: 'projectManage',
						appShow: 1
					}, 
					{
						appName: '我的',
						moduleIcon2: 'tabIcon-my',
						moduleIcon: 'tabIcon-my-select',
						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>