leromro-mini/components/CustomTabBar/index.vue

<template>
    <view class="tab_bar">
        <view class="tabbarBox">
            <view :class="item.key === 'chat'?'handleBox chatBox ':'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">
                        </view>
                        <view v-if="item.key === 'chat'" class="chat-box">
                             <image v-if="item.key != selectIndex" class="img" :src="item.iconPath"></image>
                             <image v-else class="img" :src="item.selectedIconPath"></image>
                        </view>
                       <template v-else>
                            <image v-if="item.key != selectIndex" class="img" :src="item.iconPath"></image>
                            <image v-else class="img" :src="item.selectedIconPath"></image>
                       </template>
                    </view>
                    <view class="menuName" v-if="item.key !== 'chat'">
                        <text :class="item.key == selectIndex ? 'TextColor' : 'Text'">{{  item.text }}</text>
                    </view>
                </view>
            </view>

            <!-- <view class="handleBox">1</view>
            <view class="handleBox chatBox">2</view>
            <view class="handleBox">3</view> -->
        </view>
        <view class="bar-bottom"></view>

    </view>
</template>

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

                this.selectIndex = value;
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            selectIndex: null,
            userType: uni.getStorageSync('userType') || 1, //读取本地存储
            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/chat.png",
                        "selectedIconPath": "/static/images/tabbar/chat_.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/index",
                        "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/chat.png",
                    "selectedIconPath": "/static/images/tabbar/chat_.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/index",
                    "iconPath": "/static/images/tabbar/mine.png",
                    "selectedIconPath": "/static/images/tabbar/mine_.png",
                    "text": "我的",
                    key: 'mine'
                }
            ]
        }
    },
    //uniapp子组件不支持应用生命周期，所以只能用vue生命周期
    created() {


    },
    onMounted() {
    },
    methods: {
        //进入tabble页
        goPages(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-between;
        // height: 100%;
        background-image: url(data:image/png;base64,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AACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGhAcAcAAAAAgAYEdwAAAAAAaEBwBwAAAACABgR3AAAAAABoQHAHAAAAAIAGBHcAAAAAAGjg/3IyVIFSlPmWAAAAAElFTkSuQmCC); // 替换为你的图片路径
        background-size: cover; // 图片覆盖整个 tabbarBox 区域
        background-repeat: no-repeat; // 防止图片重复
        background-position: center; // 图片居中显示

        // position: relative;
        .handleBox {
            width: 20vw;
            height: 110rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

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

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

        .chatBox{
            position: relative;
            bottom: 23px;
        }
    }
    .bar-bottom {
        width: 100%;
        height: 100%;
        background: #fff;
    }
}

.Text {
    font-size: 24rpx;
font-weight: 350;
line-height: 24rpx;
text-align: center;
color: #000000;
}

.TextColor {
    @extend .Text;
    font-weight: 500;
}

.menuIcon {
    position: relative;
    top: 16rpx;
}

.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;
}

.chat-box {
    width: 90rpx;
height: 90rpx;
    background: #D94342;
box-shadow: 0px 14px 34px 0px rgba(217, 67, 66, 0.46);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>