baiyuApp/pages_manage/components/tab.vue

<template>
	<view>
		<view class="used-tools">
			<view class="tools-list">
				<view class="item" @click="goUrl(item, index)" v-for="(item,index) in list" :key="index">
					<image :src="item.status ? (item.img || defaultImage) : (item.img2 || defaultImage)"></image>
					<text :class="['text', {'blue': item.status}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultImage: '/static/images/question.png', // 添加默认图片
				list: [
					{
						img: '../static/manageTabIcon/data_on.png',
						img2: '../static/manageTabIcon/data.png',
						text: '数据',
						Url: 'pages_watch/data/index',
						status: 0
					},
					{
						img: '../static/manageTabIcon/liveclasses_on.png',
						img2: '../static/manageTabIcon/liveclasses.png',
						text: '课程表',
						Url: 'pages_watch/course/course',
						status: 0
					},
					{
						img: '../static/manageTabIcon/vip_on.png',
						img2: '../static/manageTabIcon/vip.png',
						text: '会员',
						Url: 'pages_watch/data/customer/index',
						status: 0
					},
					{
						img: '../static/manageTabIcon/training_on.png',
						img2: '../static/manageTabIcon/training.png',
						text: '催课',
						Url: 'pages_watch/urgeCourse/urgeCourse',
						status: 0
					},
					{
						img: '../static/manageTabIcon/manage_on.png',
						img2: '../static/manageTabIcon/manage.png',
						text: '管理',
						Url: 'pages_watch/data/user/index',
						status: 0
					}
				]
			}
		},
		onLoad() {
			this.setActiveTab();
		},
		onShow() {
			this.setActiveTab();
		},
		methods: {
			setActiveTab() {
				const pages = getCurrentPages();
				if (pages.length === 0) return;
				
				const currentRoute = pages[pages.length - 1].route;
				this.list.forEach(item => {
					item.status = item.Url.includes(currentRoute) ? 1 : 0;
				});
			},
			
			goUrl(item, index) {
				console.log("888")
				// 更新状态
				this.list.forEach((tab, i) => {
					tab.status = i === index ? 1 : 0;
				});
				
				// 跳转逻辑
				if (!item.Url || typeof item.Url !== 'string') {
					console.error('Invalid URL:', item.Url);
					return uni.showToast({ title: '跳转链接错误', icon: 'none' });
				}
				
				const url = item.Url.startsWith('/') ? item.Url : `/${item.Url}`;
				const pages = getCurrentPages();
				const isOverStackLimit = pages.length >= 10;
				const jumpMethod = isOverStackLimit ? uni.redirectTo : uni.navigateTo;
				
				jumpMethod({
					url: url,
					success: () => {
						console.log('跳转成功:', url);
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({ title: '页面不存在或跳转失败', icon: 'none' });
						// 恢复之前的状态
						this.setActiveTab();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef;
	}

	.used-tools {
		 z-index: 9999; /* 确保在最上层 */
		width: 100%;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 8upx 30upx;
		
		.tools-list {
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			
			.item {
				box-sizing: border-box;
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 50upx;
				position: relative;
				
				image {
					width: 44upx;
					height: 44upx;
				}
				
				.text {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					line-height: 1;
					margin-top: 20upx;
					
					&.blue {
						color: #1794fb;
					}
				}
			}
		}
	}
</style>