huasheng-erp-order-system-applet/components/erp-tab-bar/erp-tab-bar.vue

<template>
	<view class="tab-bar-container">
		<view class="tab-bar-content">
			<view class="tab-item" @click="switchTab('home')" :class="{active: active === 'home'}">
				<image class="tab-icon" :src="active === 'home' ? '/static/tabs/home_active.png' : '/static/tabs/home.png'" mode="aspectFit"></image>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @click="switchTab('order')" :class="{active: active === 'order'}">
				<image class="tab-icon" :src="active === 'order' ? '/static/tabs/order_active.png' : '/static/tabs/order.png'" mode="aspectFit"></image>
				<text class="tab-text">下单</text>
			</view>
			<view class="tab-item" @click="switchTab('mine')" :class="{active: active === 'mine'}">
				<image class="tab-icon" :src="active === 'mine' ? '/static/tabs/mine_active.png' : '/static/tabs/mine.png'" mode="aspectFit"></image>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			active: { type: String, default: 'order' }
		},
		data() {
			return { }
		},
		methods: {
			switchTab(code) {
				let url = '';
				switch(code) {
					case 'home': url = '/pages/index/index'; break;
					case 'order': url = '/pages/order/order'; break;
					case 'mine': url = '/pages/mine/mine'; break;
				}
				if(url) uni.reLaunch({ url });
			}
		}
	}
</script>

<style scoped>
	.tab-bar-container { 
		position: fixed; 
		bottom: 0; 
		left: 0; 
		right: 0; 
		z-index: 999;
		display: flex;
		flex-direction: column;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		box-shadow: 0 -4rpx 30rpx rgba(0, 0, 0, 0.06);
		/* 确保底部安全区也被该背景色填充 */
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-bar-content {
		position: relative;
		z-index: 2;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.tab-icon {
		width: 52rpx;
		height: 52rpx;
		margin-bottom: 4rpx;
		display: block;
	}

	.tab-text {
		font-size: 22rpx;
		color: #999;
		line-height: 1;
	}

	.tab-item.active .tab-text {
		color: #C1001C;
		font-weight: 600;
	}
	
	.tab-item.active .tab-icon {
		/* 去掉微动效，防止加载感延迟 */
		transform: none;
	}
</style>