raex_saas/src/views/Index.vue

<template>
    <div class="index">
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps">
                <component :is="Component" class="container barTop" />
            </keep-alive>
        </router-view>
        <van-tabbar
            :style="{ backgroundColor: tabColor }"
            v-model="active"
            z-index="20"
            safe-area-inset-bottom
            route
            ref="tabbar"
            class="bgBack"
        >
            <van-tabbar-item replace v-for="item in menus" :name="item.name" :to="`/${item.name}`" :key="item.name">
                <span>{{ item.title }}</span>
                <template #icon="props">
                    <img :src="props.active ? item.preIcon : item.icon" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    computed: {
        menus() {
            let menus = [
                {
                    name: 'home',
                    title: '首页',
                    icon: require('@assets/tabbar_icon_01.png'),
                    preIcon: require('@assets/tabbar_icon_01_pre.png')
                },
                {
                    name: 'discover',
                    title: '发现',
                    icon: require('@assets/tabbar_icon_02.png'),
                    preIcon: require('@assets/tabbar_icon_02_pre.png')
                },
                {
                    name: 'store',
                    title: '藏品室',
                    icon: require('@assets/tabbar_icon_03.png'),
                    preIcon: require('@assets/tabbar_icon_03_pre.png')
                },
                {
                    name: 'mine',
                    title: '我的',
                    icon: require('@assets/tabbar_icon_04.png'),
                    preIcon: require('@assets/tabbar_icon_04_pre.png')
                }
            ];
            if (this.$store.state.hopeMarket) {
                menus = [
                    {
                        name: 'home',
                        title: '首页',
                        icon: require('@assets/tabbar_icon_01.png'),
                        preIcon: require('@assets/tabbar_icon_01_pre.png')
                    },
                    {
                        name: 'store',
                        title: '藏品室',
                        icon: require('@assets/tabbar_icon_03.png'),
                        preIcon: require('@assets/tabbar_icon_03_pre.png')
                    },
                    {
                        name: 'mine',
                        title: '我的',
                        icon: require('@assets/tabbar_icon_04.png'),
                        preIcon: require('@assets/tabbar_icon_04_pre.png')
                    }
                ];
            }
            return menus;
        },
        tabClass() {
            return this.$route.path === '/home' ? '' : 'bgBack';
        }
    },
    inject: ['keeps'],
    name: 'index',
    data() {
        return {
            menu: null,
            tabColor: '',
            active: 'home'
        };
    }
};
</script>

<style lang="less" scoped>
.container {
    box-sizing: border-box;
    flex-grow: 1;
}

.index {
    background-color: @bg3;
    .flex-col();
    padding-top: 0 !important;
}

/deep/.van-hairline--top-bottom {
    &::after {
        border: 1px solid @bg3;
    }
    &.bgBack {
        background-color: #222426;
        &::after {
            border: 1px solid #222426;
        }
    }
}
</style>