Web_TracerMethodology/components/tm-tabbar/tm-tabbar.vue

<template>
	<view class="tm-tabbar">
		<template v-for="item in rolToTabBars">
			<view 
			  :class="{'tab-item': true, active: item.pagePath === currentPagePath}" 
			 :key="item.text"
			 @click="navigateTo(item.pagePath)" >
				<image 
				  class="icon" 
				  :src="item.pagePath === currentPagePath 
					  ? item.selectedIconPath 
						: item.iconPath"
				></image>
				<text>{{ item.text }}</text>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * 底部tabBar
	 * 芦荟
	 * 2021.2.1
	 * props: {
		 * permission：对应的角色(权限)（1、管理员 2、查核组长 3、查核组员 4、单位负责人 5、改善者）
		 * }
	 */
	export default {
		props: {
			// 对应的角色(权限)（1、管理员 2、查核组长 3、查核组员 4、单位负责人 5、改善者）
			permission: {
				type: Number,
				default: () => 0
			}
		},
		data() {
			return {
				// 当前路由地址
				currentPagePath: '', 
				// tabbar列表(这是最全的)
				tabBarList: [
					{
						text: '情境', // tab上按钮文字
						iconPath: '/static/tabbar/creatingSituations-unselect.png', // 图片路径
						selectedIconPath: '/static/tabbar/creatingSituations-select.png', // 选中时的图片路径
						pagePath: 'pages/creatingSituations/creatingSituations' // 页面路径
					},{
						text: '任务', 
						iconPath: '/static/tabbar/mission-unselect.png', 
						selectedIconPath: '/static/tabbar/mission-select.png', 
						pagePath: 'pages/mission/mission'
					},{
						text: '配置', 
						iconPath: '/static/tabbar/setting-unselect.png', 
						selectedIconPath: '/static/tabbar/setting-select.png', 
						pagePath: 'pages/configure/configure'
					},{
						text: '我的', 
						iconPath: '/static/tabbar/my-unselect.png', 
						selectedIconPath: '/static/tabbar/my-select.png', 
						pagePath: 'pages/index/index'
					},{
						text: '日历', 
						iconPath: '/static/tabbar/calendar-unselect.png', 
						selectedIconPath: '/static/tabbar/calendar-select.png', 
						pagePath: 'pages/index/index'
					}
				],
				// 不同角色的拥有 tabbar下标（1、管理员 2、查核组长 3、查核组员 4、单位负责人 5、改善者）
				rolList: [
					{permission: 1, name: '管理员', tabBarIndexs: [0, 1, 2, 3]}, // tabBarIndexs：tabBarList种对应的下标
					{permission: 2, name: '查核组长', tabBarIndexs: [0, 4, 3]},
					{permission: 3, name: '查核组员', tabBarIndexs: [0, 4, 3]},
					{permission: 4, name: '单位负责人', tabBarIndexs: [0, 1, 3]},
					{permission: 5, name: '改善者', tabBarIndexs: [1, 3]}
				]
			}
		},
		computed:{
			rolToTabBars() {
				if(this.permission == 0) {
					return []
				}else {
					let current = this.rolList.find(item => item.permission == this.permission) || {};
					if(current){
						let tabBars = [];
					  current.tabBarIndexs.map(index => {
							tabBars.push(this.tabBarList[index]);
						});
						return tabBars;
					}else {
						return [];
					}
					return []
				}
			}
		},
		created(){
			let routes = getCurrentPages()
      this.currentPagePath = routes[routes.length - 1].route;
		},
		methods: {
			// 路由跳转
			navigateTo(pagePath){
				this.currentPagePath = pagePath;
				uni.navigateTo({
				  url: `/${pagePath}`
				});
			}
		}
	}
</script>

<style lang="less">
	.tm-tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		height: 87.5rpx;
		width: 100%;
		background-color: #fff;
		
		.tab-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			
			.icon {
				margin-bottom: 10rpx;
				width: 27.5rpx;
				height: 28.75rpx;
			}
			
			>text {
				font-size: 15rpx;
				color: #3D424D;
			}
		}
		
		.active.tab-item {
			>text {
				color: #3377FF;
			}
		}
	}
</style>