huasheng-erp-order-system-applet/components/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('client')" :class="{ active: active === 'client' }">
				<image class="tab-icon"
					:src="active === 'client' ? '/static/tabs/client_active.png' : '/static/tabs/client.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: 'client' }
	},
	methods: {
		switchTab(code) {
			let url = '';
			switch (code) {
				case 'home': url = '/pages/index/index'; break;
				case 'client': url = '/pages/client/index'; break;
				case 'mine': url = '/pages/mine/index'; 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>