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

<template>
	<view class="tm-tabbar">
		<app-update url="123"  ref="appUpdate" ></app-update>
		<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', { 'icon-large': isLargeIcon(item) }]"
				  :style="isLargeIcon(item) ? { marginBottom: largeIconGap + 'rpx' } : {}"
				  :src="item.pagePath === currentPagePath
					  ? item.selectedIconPath
						: item.iconPath"
				></image>
				<text>{{ item.text }}</text>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * 底部tabBar
	 * 芦荟
	 * 2021.2.1
	 */
	import appUpdate from "@/components/app-update/app-update.vue"
	
	export default {
	components:{appUpdate},
    props: {
      permission: {
        type: Number | String,
        default: 0
      }
    },
		data() {
			return {
				// 当前路由地址
				currentPagePath: '',
				// 需要放大图标的页面路径集合（可扩展）
				largeIconPages: ['pages/ai-qa/ai-qa'],
				// 放大图标与文字间距（仅 largeIconPages 生效）
				largeIconGap: 3,
				// tabbar列表(这是最全的)
				tabBarList: [
					{
						text: '情境', // tab上按钮文字
						iconPath: '/static/tabbar/creatingSituations-unselect.png', // 图片路径
						selectedIconPath: '/static/tabbar/creatingSituations-select.png', // 选中时的图片路径
						pagePath: 'pages/situationsCenter/situationsCenter' // 页面路径
					},{
						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'
					},
					{
						text: '自查督查',
						iconPath: '/static/tabbar/tabicon-zhineng.png',
						selectedIconPath: '/static/tabbar/tabicon-actived-zhineng.png',
						pagePath: 'pages/situationsCenter/situationsCenter' // 页面路径
					},
					{
						text: 'AI问答',
						iconPath: '/static/aiwenda_tabicon.png',
						selectedIconPath: '/static/aiwenda_tabicon_color.png',
						pagePath: 'pages/ai-qa/ai-qa'
					}
				],
				// 不同角色的拥有 tabbar下标（1、管理员 2、查核组长 3、查核组员 4、单位负责人 5、改善者）
				
				// {permission: 1, name: '管理员', msg: '个改善任务待处理'},
				// {permission: 2, name: '查核组长', msg: '个情境待分配'},
				// {permission: 3, name: '查核组员', msg: '个单位待查核'},
				// {permission: 4, name: '单位负责人', msg: '个改善任务待处理'},
				// {permission: 5, name: '改善者', msg: '个改善任务待处理'},
				// {permission: 6, name: '职能科室负责人', msg: '个改善任务待处理'},
				// {permission: 7, name: '职能科室普通人员', msg: '个改善任务待处理'},
				// {permission: 8, name: '自查人', msg: '个改善任务待处理'},
				
				rolList: [
					{permission: 1, name: '管理员', tabBarIndexs: [0,2, 3]}, // tabBarIndexs：tabBarList种对应的下标
					{permission: 2, name: '查核组长', tabBarIndexs: [0,1, 4, 3]},
					{permission: 3, name: '查核组员', tabBarIndexs: [0, 4, 3]},
					{permission: 4, name: '单位负责人', tabBarIndexs: [1,5,3]},
					{permission: 5, name: '改善者', tabBarIndexs: [1, 3]},
					{permission: 6, name: '职能科室负责人', tabBarIndexs: [5,1,4,3]},
					{permission: 7, name: '职能科室普通人员', tabBarIndexs: [5,4,3]},
					{permission: 8, name: '自查人', tabBarIndexs: [5,3]}
        ],
        rolToTabBars: [],
			}
		},
    watch: {
      permission(newVal) {
        this.getRolToTabBars(newVal)
      }
    },
		created(){
      this.getRolToTabBars(uni.getStorageSync('nowPermission'));
    },
		methods: {
			// 路由跳转
			navigateTo(pagePath){
        this.currentPagePath = pagePath;
				uni.reLaunch({
				   url: `/${pagePath}`
				});
				// uni.redirectTo({
				//   url: `/${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]);
            });
            // H5 平台显示 AI问答，APP 端隐藏入口
            // #ifdef H5
            const aiTab = this.tabBarList.find(item => item.pagePath === 'pages/ai-qa/ai-qa');
            if (aiTab) {
            	const alreadyHas = tabBars.some(item => item.pagePath === aiTab.pagePath);
            	if (!alreadyHas) {
            		const middleIndex = Math.floor(tabBars.length / 2);
            		tabBars.splice(middleIndex, 0, aiTab);
            	}
            }
            // #endif
            this.rolToTabBars = tabBars;
					}else {
						this.rolToTabBars = [];
					}
        }
        let routes = getCurrentPages();
        this.currentPagePath = routes[routes.length - 1].route;
			},
			// 判断该项是否需要使用大图标
			isLargeIcon(item){
				return this.largeIconPages.includes(item.pagePath);
			}
		}
	}
</script>

<style lang="less">
	.tm-tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		width: 100%;
		height: 87.5rpx;
		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;
			}

			// 放大图标样式（仅配置的页面使用）
			.icon-large {
				width: 35rpx;
				height: 38rpx;
			}

			>text {
				font-size: 15rpx;
				color: #3D424D;
			}
		}

		.active.tab-item {
			>text {
				color: #3377FF;
			}
		}
	}
</style>