leromro-mini/components/CustomTabBar/index.vue

<template>
    <view class="tab_bar">
        <view class="tabbarBox">
            <view class="handleBox" v-for="(item) in tabBarList" :key="item.key + 'tab_bar'">
                <view class="menuBox" @click="goPages(item)">
                    <view class="menuIcon">
                        <view class="message-style" v-if="item.key === 'chat' && messageCount > 0">
                            <!-- {{  messageCount }} -->
                        </view>
                        <image v-if="item.key != selectIndex" class="img" :src="item.iconPath"></image>
                        <image v-else class="img" :src="item.selectedIconPath"></image>
                    </view>
                    <view class="menuName">
                        <text :class="item.key == selectIndex ? 'TextColor' : 'Text'">{{  item.text }}</text>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
import { onMounted } from 'vue';
import store from '@/store'
export default {
    props: {
        page: {
            type: String,
            default: "home"
        }
    },
    watch: {
        page: {
            handler(value) {
                console.log('value', value);

                this.selectIndex = value;
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            selectIndex: null,
            userType: uni.getStorageSync('userType'), //读取本地存储
            messageCount: store.state.user.messageCount
        }
    },
    computed: {
        //获取当前页面
        tabBarList() {
            if (this.userType === 1) {
                return [
                    {
                        "pagePath": "/pages/index",
                        "iconPath": "/static/images/tabbar/home.png",
                        "selectedIconPath": "/static/images/tabbar/home_.png",
                        "text": "首页",
                        key: 'home'
                    },
                    {
                        "pagePath": "/pages/mallMenu",
                        "iconPath": "/static/images/tabbar/class.png",
                        "selectedIconPath": "/static/images/tabbar/class_.png",
                        "text": "分类",
                        key: 'class'
                    },
                    {
                        "pagePath": "/pages/chat",
                        "iconPath": "/static/images/tabbar/class.png",
                        "selectedIconPath": "/static/images/tabbar/class_.png",
                        "text": "消息",
                        key: 'chat'
                    },
                    {
                        "pagePath": "/pages/classify",
                        "iconPath": "/static/images/tabbar/work.png",
                        "selectedIconPath": "/static/images/tabbar/work_.png",
                        "text": "订单",
                        key: 'order'
                    },
                    {
                        "pagePath": "/pages/mine",
                        "iconPath": "/static/images/tabbar/mine.png",
                        "selectedIconPath": "/static/images/tabbar/mine_.png",
                        "text": "我的",
                        key: 'mine'
                    }
                ]
            }
            return [
                {
                    "pagePath": "/pages/index",
                    "iconPath": "/static/images/tabbar/home.png",
                    "selectedIconPath": "/static/images/tabbar/home_.png",
                    "text": "首页",
                    key: 'home'
                },
                // {
                //     "pagePath": "/pages/mallMenu",
                //     "iconPath": "/static/images/tabbar/class.png",
                //     "selectedIconPath": "/static/images/tabbar/class_.png",
                //     "text": "分类",
                //     key: 'class'
                // },
                // {
                //     "pagePath": "/pages/release",
                //     "iconPath": "/static/images/tabbar/class.png",
                //     "selectedIconPath": "/static/images/tabbar/class_.png",
                //     "text": "发布",
                //     key:'release'
                // },
                {
                    "pagePath": "/pages/chat",
                    "iconPath": "/static/images/tabbar/class.png",
                    "selectedIconPath": "/static/images/tabbar/class_.png",
                    "text": "消息",
                    key: 'chat'
                },
                {
                    "pagePath": "/pages/classify",
                    "iconPath": "/static/images/tabbar/work.png",
                    "selectedIconPath": "/static/images/tabbar/work_.png",
                    "text": "订单",
                    key: 'order'
                },
                {
                    "pagePath": "/pages/mine",
                    "iconPath": "/static/images/tabbar/mine.png",
                    "selectedIconPath": "/static/images/tabbar/mine_.png",
                    "text": "我的",
                    key: 'mine'
                }
            ]
        }
    },
    //uniapp子组件不支持应用生命周期，所以只能用vue生命周期
    created() {


    },
    onMounted() {
    },
    methods: {
        //进入tabble页
        goPages(page) {
            console.log('page,index', page);
            uni.switchTab({
                url: page.pagePath
            })
        },

    },
}
</script>
<style lang="scss">
.tab_bar {
    width: 100vw;
    height: 160rpx;
    position: fixed;
    bottom: 0rpx;
    /* 模糊大小就是靠的blur这个函数中的数值大小 */
    // backdrop-filter: blur(10px);
    // border-radius: 60rpx;
    background-color: #fff;

    .tabbarBox {
        display: flex;
        margin-top: 20rpx;
        justify-content: space-evenly;


        .handleBox {
            width: 20vw;
            height: 110rpx;


            .menuBox {
                padding: 0rpx 20rpx;
                width: 120rpx;
                height: 98%;
                text-align: center;

                .img {
                    width: 50rpx;
                    height: 50rpx;
                }
            }
        }
    }
}

.Text {
    font-size: 24rpx;
    font-weight: 900;
}

.TextColor {
    @extend .Text;
    color: #d81e06;
}

.menuIcon {
    position: relative;
}

.message-style {
    background: rgba(239, 68, 68, 1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 10px;
    height: 10px;
    border-radius: 10px;

    position: absolute;
    right: 0;
    z-index: 3;
}
</style>