baiyuApp/pages_mall/index.vue

<template>
	<view class="mall-index">
		<!-- 内容区域 -->
		<view class="content-area">
			<home-page v-if="currentTab === 0" @switchTab="switchTab" ref="homePage"></home-page>
			<category-page v-if="currentTab === 1" ref="categoryPage"></category-page>
			<cart-page v-if="currentTab === 2" @goHome="switchTab(0)" ref="cartPage"></cart-page>
			<my-page v-if="currentTab === 3" ref="myPage"></my-page>
		</view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{active: currentTab === 0}" @click="switchTab(0)">
				<u-icon :name="currentTab === 0 ? 'home-fill' : 'home'" size="26"
					:color="currentTab === 0 ? '#2583EB' : '#999'"></u-icon>
				<text>首页</text>
			</view>
			<view class="tab-item" :class="{active: currentTab === 1}" @click="switchTab(1)">
				<u-icon :name="currentTab === 1 ? 'grid-fill' : 'grid'" size="26"
					:color="currentTab === 1 ? '#2583EB' : '#999'"></u-icon>
				<text>分类</text>
			</view>
			<view class="tab-item" :class="{active: currentTab === 2}" @click="switchTab(2)">
				<view class="icon-wrap">
					<u-icon :name="currentTab === 2 ? 'shopping-cart-fill' : 'shopping-cart'" size="26"
						:color="currentTab === 2 ? '#2583EB' : '#999'"></u-icon>
					<view class="badge">1</view>
				</view>
				<text>购物车</text>
			</view>
			<view class="tab-item" :class="{active: currentTab === 3}" @click="switchTab(3)">
				<u-icon :name="currentTab === 3 ? 'account-fill' : 'account'" size="26"
					:color="currentTab === 3 ? '#2583EB' : '#999'"></u-icon>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import HomePage from './home.vue'
	import CategoryPage from './category.vue'
	import CartPage from './cart.vue'
	import MyPage from './my.vue'

	export default {
		components: {
			HomePage,
			CategoryPage,
			CartPage,
			MyPage
		},
		data() {
			return {
				currentTab: 0
			}
		},
		onShow() {
			const tabCart = uni.getStorageSync('tabCart')
			if (tabCart) {
				this.currentTab = 2
				uni.removeStorageSync('tabCart')
			}
			uni.hideTabBar();
		},
		onUnload() {
			uni.showTabBar();
		},
		onBackPress() {
			uni.showTabBar();
			uni.switchTab({
				url: '/pages_im/pages/conversation/conversationList/index'
			})
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.mall-index {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.content-area {
		flex: 1;
		height: 0; // Allow flex item to scroll internally
		overflow: hidden;
		position: relative;
	}

	.tab-bar {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 1rpx solid #eee;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;

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

			text {
				font-size: 24rpx;
				margin-top: 6rpx;
				color: #999999;
			}

			&.active text {
				color: #2583EB;
			}

			.icon-wrap {
				position: relative;

				.badge {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					background: #fa436a;
					color: #fff;
					font-size: 18rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>