flavorOfTimeSz/components/CustomTabBar.vue

<template>
    <view class="custom-tab-bar">
        <view class="tab-item" :class="{ 'active': currentTab === 0 }" @click="switchTab(0)">
            <image :src="currentTab === 0 ? tabBar.list[0].selectedIconPath : tabBar.list[0].iconPath"></image>
            <text>{{ tabBar.list[0].text }}</text>
        </view>
        <view class="tab-item" :class="{ 'active': currentTab === 1 }" @click="switchTab(1)">
            <image :src="currentTab === 1 ? tabBar.list[1].selectedIconPath : tabBar.list[1].iconPath"></image>
            <text>{{ tabBar.list[1].text }}</text>
        </view>
        <view class="tab-item home-item" :class="{ 'active': currentTab === 2 }" @click="switchTab(2)">
            <image :src="tabBar.list[2].iconPath" v-if="currentTab !== 2"></image>
			<view v-else class="home-item-box">
				<image :src="tabBar.list[2].selectedIconPath"></image>
			</view>
            <text v-if="currentTab !== 2">{{ tabBar.list[2].text }}</text>
        </view>
        <view class="tab-item" :class="{ 'active': currentTab === 3 }" @click="switchTab(3)">
            <image :src="currentTab === 3 ? tabBar.list[3].selectedIconPath : tabBar.list[3].iconPath"></image>
            <text>{{ tabBar.list[3].text }}</text>
        </view>
        <view class="tab-item" :class="{ 'active': currentTab === 4 }" @click="switchTab(4)">
            <image :src="currentTab === 4 ? tabBar.list[4].selectedIconPath : tabBar.list[4].iconPath"></image>
            <text>{{ tabBar.list[4].text }}</text>
        </view>
    </view>
</template>

<script>
export default {
	props: {
		currentTab: {
			type: Number,
			default: 0
		}
	},
    data() {
        return {
            tabBar: {
                list: [
                    {
                        "pagePath": "pages/map/map",
                        "iconPath": "/static/images/map.png",
                        "selectedIconPath": "/static/images/selectMap.png",
                        "text": "特产地图"
                    },
                    {
                        "pagePath": "pages/coupon/coupon",
                        "iconPath": "/static/images/coupon.png",
                        "selectedIconPath": "/static/images/selectCoupon.png",
                        "text": "领券中心"
                    },
                    {
                        "pagePath": "pages/index/index",
                        "iconPath": "/static/images/home.png",
                        "selectedIconPath": "/static/images/selectHome.png",
                        "text": "首页"
                    },
                    {
                        "pagePath": "pages/cart/cart",
                        "iconPath": "/static/images/cart.png",
                        "selectedIconPath": "/static/images/selectCart.png",
                        "text": "购物车"
                    },
                    {
                        "pagePath": "pages/user/user",
                        "iconPath": "/static/images/mine.png",
                        "selectedIconPath": "/static/images/selectMine.png",
                        "text": "我的"
                    }
                ]
            }
        };
    },
    onLoad() {
        this.getCurrentTab();
    },
    methods: {
        getCurrentTab() {
            const pages = getCurrentPages();
            const currentPage = pages[pages.length - 1];
            const currentPath = currentPage.route;
            this.tabBar.list.forEach((item, index) => {
                if (item.pagePath === currentPath) {
                    this.currentTab = index;
                }
            });
        },
        switchTab(index) {
            if (this.currentTab === index) return;
            uni.switchTab({
                url: '/' + this.tabBar.list[index].pagePath
            });
        }
    }
};
</script>

<style scoped>
.custom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 150rpx;
    background-image: url('/static/images/tabBarBg.png');
	background-size: 100% 100%;
	z-index: 30;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width: 20%;
}

.tab-item image {
    width: 53rpx;
    height: 53rpx;
}

.tab-item text {
    font-size: 24rpx;
    color: #666666;
}

.tab-item.active text {
    color: #6A8A2D;
}

.home-item-box {
	width: 112rpx;
	height: 112rpx;
	background: #6A8A2D;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>