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
	 */
	export default {
    props: {
      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/home/home'
					},{
						text: '日历',
						iconPath: '/static/tabbar/calendar-unselect.png',
						selectedIconPath: '/static/tabbar/calendar-select.png',
						pagePath: 'pages/calendar/calendar'
					}
				],
				// 不同角色的拥有 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]}
        ],
        rolToTabBars: [],
			}
		},
    watch: {
      permission(newVal) {
        this.getRolToTabBars(newVal)
      }
    },
		created(){
      this.getRolToTabBars(uni.getStorageSync('nowPermission'));
		},
		methods: {
			// 路由跳转
			navigateTo(pagePath){
				this.currentPagePath = pagePath;
				uni.navigateTo({
				  url: `/${pagePath}`
				});
      },
      // 获取权限对应的地步导航
    	getRolToTabBars(permission) {
				if(!permission) {
					this.rolToTabBars = [];
				}else {
          let current = this.rolList.find(item => item.permission == permission) || {};
					if(current){
						let tabBars = [];
					  current.tabBarIndexs.map(index => {
							tabBars.push(this.tabBarList[index]);
            });
            this.rolToTabBars = tabBars;
					}else {
						this.rolToTabBars = [];
					}
        }
        let routes = getCurrentPages();
        this.currentPagePath = routes[routes.length - 1].route;
			}
		}
	}
</script>

<style lang="less">
	.tm-tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		height: 87.5rpx;
		border-top: 0.62rpx solid #DADEE6;
		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>