epmet-work-uni/components/custom-tab-bar/index.vue

<template>
    <view>
        <view class="tab-bar-block"></view>
        <view class="tab-bar">
            <view v-if="item.show" class="tab-bar-item" :data-path="item.pagePath" :data-index="index" @tap="switchTab" v-for="(item, index) in list" :key="index">
                <!-- <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image> -->

                <!-- <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view> -->

                <!-- <view  >
        <image wx:if="{{index!=selected}}"  src="{{item.iconPath}}"></image>
        <image wx:else class="bigicon" src="{{item.selectedIconPath}}"></image>
        <view wx:if="{{index!=selected}}" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
    </view> -->

                <view>
                    <image :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
                    <view :style="'color: ' + (selected === index ? selectedColor : color)">{{ item.text }}</view>
                </view>

                <view class="isIPhoneXRegexBottom"></view>
            </view>
        </view>
    </view>
</template>

<script>
import { getStaffbasicinfo } from '../../utils/api';
const app = getApp();
import { getOwnedRolesOfStaffId } from '../../utils/statisticsApi.js';
export default {
    data() {
        return {
            selected: 0,
            color: '#999',
            selectedColor: '#3A80E7',

            list: [
                {
                    pagePath: '/pages/index/index',
                    text: '首页',
                    iconPath: '/static/images/home/message.png',
                    selectedIconPath: '/static/images/home/messageSelected.png',
                    show: true
                },
                {
                    pagePath: '/pages/resiAndHouse/resiAndHouse',
                    text: '人房',
                    iconPath: '/static/images/home/resiAndHouse.png',
                    selectedIconPath: '/static/images/home/resiAndHouseSelected.png',
                    show: true
                },
                {
                    pagePath: '/pages/work2/work2',
                    text: '工作',
                    iconPath: '/static/images/home/work.png',
                    selectedIconPath: '/static/images/home/workSelected.png',
                    show: true
                },
                {
                    pagePath: '/pages/statistics/statistics',
                    text: '数据',
                    iconPath: '/static/images/home/information.png',
                    selectedIconPath: '/static/images/home/informationSelected.png',
                    show: false
                },
                {
                    pagePath: '/pages/mine/mine',
                    text: '我的',
                    iconPath: '/static/images/home/mine.png',
                    selectedIconPath: '/static/images/home/mineSelected.png',
                    show: true
                }
            ],

            show: ''
        };
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            this.setData({
                selected: app.globalData.selected
            });
            // secretary 书记 admin 管理员
            console.log(app.globalData.roleList.filter((item) => item.roleKey === 'secretary'));
            if (app.globalData.roleList.length <= 0) {
                getStaffbasicinfo().then((res) => {
                    getOwnedRolesOfStaffId(res.data.id).then((res2) => {
                        app.globalData.user = res.data;
                        this.setData({
                            'list[3].show': true
                        });
                    });
                });
            } else {
                this.setData({
                    'list[3].show': true
                });
            }
            console.log(app.globalData.roleList, 'userss');
        },

        attached() {},

        switchTab(e) {
            console.log(e);
            const data = e.currentTarget.dataset;
            const url = data.path;
            app.globalData.selected = data.index;
            uni.switchTab({
                url
            });
        }
    },
    created: function () {}
};
</script>
<style>
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    background: white;
    display: flex;
    box-shadow: 0px 6rpx 18rpx 0px rgba(216, 216, 216, 0.66);
}
.isIPhoneXRegexBottom {
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 10rpx;
}

.tab-bar-item image {
    width: 54rpx;
    height: 54rpx;
}
/* .tab-bar-item image.bigicon{
      width: 70rpx;
      height: 70rpx;
  } */
.tab-bar-item view {
    font-size: 22rpx;
    color: #999999;
}
.tab-bar-block {
    height: 150rpx;
}
</style>