building-sign/components/tabbar/tabbar.vue

<template>
	<view class="tabbar-list">
		<!-- 底部导航 -->
		<view v-if="userType=='worker'" class="tabbar-item" :class="current==index ? 'active' : ''" @tap="chooseFootTab(index)" v-for="(item,index) in workerBarList" :key="index">
			<view class="icon"><image class="img" :style="{width:[31,39,36][index]+'rpx',height:[32,35,36][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image></view>
			<view class="title font26">{{item.title}}</view>
		</view>
		<view v-if="userType=='director'" class="tabbar-item" :class="current==index ? 'active' : ''" @tap="chooseFootTab(index)" v-for="(item,index) in directorBarList" :key="index">
			<view class="icon"><image class="img" :style="{width:[31,30,31,39][index]+'rpx',height:[32,30,31,35][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image></view>
			<view class="title font26">{{item.title}}</view>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'; //引入mapState
    export default {
        name:'tabbar',
		props:{
			// 当前选中项
			current:{
				type:Number,
				default:0
			},
			// 账号类别
			userType:{
				type:String,
				default:'worker'
			}
		},
        data() {
            return {
				workerBarList:[
					{iconPath:'/static/icon/icon-tabbar-01.png',title:'打卡'},
					{iconPath:'/static/icon/icon-tabbar-02.png',title:'加班'},
					{iconPath:'/static/icon/icon-tabbar-03.png',title:'我的'}
				], //工人底部列表
				directorBarList:[
					{iconPath:'/static/icon/icon-tabbar-01.png',title:'打卡'},
					{iconPath:'/static/icon/icon-tabbar-04.png',title:'支出'},
					{iconPath:'/static/icon/icon-tabbar-05.png',title:'录入'},
					{iconPath:'/static/icon/icon-tabbar-02.png',title:'加班'}
				], //负责人底部列表
            };
        },
        methods:{
			// 跳转tabbar
            chooseFootTab(index){
				if(this.userType=='worker'){
					switch (index){
						case 0:
							uni.reLaunch({
								url:'/pages/worker/sign/sign',
							})
							break;
						case 1:
							if(this.$toolAll.tools.judgeAuth()) {
								uni.reLaunch({
									url:'/pages/worker/overtime/overtime',
								})
							}
							break;
						case 2:
							if(this.$toolAll.tools.judgeAuth()) {
								uni.reLaunch({
									url:'/pages/worker/my/my',
								})
								break;
							}
					}
				}
				if(this.userType=='director'){
					switch (index){
						case 0:
							uni.reLaunch({
								url:'/pages/director/sign/sign',
							})
							break;
						case 1:
							if(this.$toolAll.tools.judgeAuth()) {
								uni.reLaunch({
									url:'/pages/director/expenditure/expenditure',
								})
							}
							break;
						case 2:
							if(this.$toolAll.tools.judgeAuth()) {
								uni.reLaunch({
									url:'/pages/director/enter/enter',
								})
							}
							break;
						case 3:
							if(this.$toolAll.tools.judgeAuth()) {
								uni.reLaunch({
									url:'/pages/director/overtime/overtime',
								})
							}
							break;
					}
				}
            },
        }
    }
</script>

<style scoped>
	.tabbar-list{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		border-top: 2rpx solid #e9e9e9;
		background-color: #ffffff;
		padding: 0 25rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
	}
	.tabbar-item{
		display: flex;
		flex-wrap: wrap;
		justify-items: center;
		width: 25%;
		text-align: center;
	}
	.tabbar-item .icon{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 40rpx;
	}
	.tabbar-item .icon .img{
		filter: grayscale(100%);
	}
	.tabbar-item .title{
		width: 100%;
		margin-top: 6rpx;
		line-height: 1.2;
		color: #737373;
	}
	.tabbar-item.active .title{
		color: #0788ff;
	}
	.tabbar-item.active .icon .img{
		filter: grayscale(0);
	}
</style>