<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>