tabbar封装

README.md

@@ -6,6 +6,7 @@
 ---
 1. 步骤条：tm-steps，详细传参说明在组件内部。
 2. 树形控件：tm-trees。
+3. 底部tabBar：tm-tabbar。
 
 ### 公共组件的注册方式 
 ---

components/tm-tabbar/tm-tabbar.vue

@@ -0,0 +1,150 @@
+<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/index/index'
+					},{
+						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>

pages/mission/components/mission-list/mission-list.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="mission-list">
 		<list-item />
+		<tm-tabbar :permission="1" />
 	</view>
 </template>
 
@@ -8,6 +9,13 @@
 	// 任务列表
 	import listItem from './list-item.vue';
 	export default {
+		data(){
+			return {
+				tabBars: [
+					{}
+				]
+			}
+		},
 		components: {
 			listItem
 		}