school_uni/components/ie-bottom-tab/ie-bottom-tab.vue

<template>
	<view>
		<view class="safe-tip" v-if="showTip">请勿发送涉黄、涉暴、反动、侮辱等内容，违规会被封禁</view>
		<view class="bottom-actions">
			<view class="bottom-item" :class="{ active: active === 'index' }" @tap="goTab('index')">
				<text class="tab-icon">🪐</text>
				<text>此刻</text>
			</view>
			<view class="bottom-item message-tab" :class="{ active: active === 'messages' }" @tap="goTab('messages')">
				<text class="tab-icon">💬</text>
				<text>消息</text>
				<text class="unread-badge" v-if="displayUnreadCount > 0">{{ unreadText }}</text>
			</view>
			<view class="bottom-item" :class="{ active: active === 'universe' }" @tap="goTab('universe')">
				<text class="tab-icon">🌙</text>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	const TAB_PATHS = {
		index: '/package1/ieBrowser/index',
		messages: '/package1/ieBrowser/messages',
		universe: '/package1/ieBrowser/universe'
	}

	export default {
		name: 'IeBottomTab',
		props: {
			active: {
				type: String,
				default: 'index'
			},
			unreadCount: {
				type: Number,
				default: 0
			},
			showTip: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			displayUnreadCount() {
				return Number(this.unreadCount) || 0
			},
			unreadText() {
				return this.displayUnreadCount > 99 ? '99+' : String(this.displayUnreadCount)
			}
		},
		methods: {
			goTab(tab) {
				if (tab === this.active) return
				const path = TAB_PATHS[tab]
				if (!path) return
				uni.redirectTo({
					url: path + '?unreadCount=' + encodeURIComponent(String(this.displayUnreadCount))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safe-tip {
		position: fixed;
		left: 36rpx;
		right: 36rpx;
		bottom: 142rpx;
		z-index: 10;
		padding: 12rpx 18rpx;
		border-radius: 22rpx;
		text-align: center;
		color: rgba(22, 27, 46, .5);
		background: rgba(255, 255, 255, .74);
		border: 1rpx solid rgba(255, 255, 255, .9);
		backdrop-filter: blur(18rpx);
		box-shadow: 0 14rpx 38rpx rgba(96, 112, 160, .1);
		font-size: 20rpx;
		line-height: 28rpx;
		font-weight: 700;
	}

	.bottom-actions {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 10;
		display: flex;
		padding: 12rpx;
		border: 1rpx solid rgba(255, 255, 255, .92);
		border-radius: 999rpx;
		overflow: hidden;
		background: rgba(255, 255, 255, .92);
		backdrop-filter: blur(24rpx);
		box-shadow: 0 24rpx 80rpx rgba(96, 112, 160, .18);
	}

	.bottom-item {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		border-radius: 999rpx;
		color: rgba(22, 27, 46, .4);
		font-size: 21rpx;
		font-weight: 700;
		transition: transform .16s ease, background .24s ease;
	}

	.bottom-item:active {
		transform: scale(.94);
	}

	.bottom-item.active {
		color: #161b2e;
		background: linear-gradient(135deg, #eafff8, #a9ffe7);
		box-shadow: 0 12rpx 30rpx rgba(169, 255, 231, .34), inset 0 1rpx 0 rgba(255, 255, 255, .95);
	}

	.tab-icon {
		margin-bottom: 4rpx;
		font-size: 30rpx;
		filter: grayscale(1);
		opacity: .55;
	}

	.bottom-item.active .tab-icon {
		filter: none;
		opacity: 1;
	}

	.unread-badge {
		position: absolute;
		right: 16rpx;
		top: 2rpx;
		min-width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		padding: 0 8rpx;
		border-radius: 999rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(135deg, #ff8ba0, #e85d75);
		box-shadow: 0 8rpx 20rpx rgba(232, 93, 117, .28);
		font-size: 18rpx;
		font-weight: 900;
	}
</style>