antissoft / lvqianmeiye_ERP

  <template>
  	<view class="tab-block">

  		<view class='tab-list flex flex-center'
  			:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'">
  			<!-- 流动选中指示器 - 暂时禁用 -->
  			<!-- <view class="tab-indicator" :style="{ left: indicatorLeft + 'px', width: indicatorWidth + 'px' }"></view> -->
  			<view v-for="(item, index) in tabList" :class="'list-item flex flex-column flex-middle ' + item.middleClass"
  				@tap="handlePush(item, index)" :key="index" :ref="'tabItem' + index">

  				<view class="item-img-box">

  					<image class="item-img" :src="currentTabIndex == index ? item.selectedIconPath : item.iconPath" />

  				</view>

  				<view class="item-text font-20 color-black" :class="{ specialColor: currentTabIndex == index }">
  					{{ item.text }}

  				</view>
  			</view>
  		</view>
  	</view>
  </template>
  
  <script>

  export default {
  	props: {
  		// 当前选中的tab项，如果不传则自动根据当前页面路径计算
  		tabIndex: {
  			type: Number,
  			default: null
  		}
  	},
  	data() {
  		return {

  			tabList: [],

  			showMiddleButton: false,
  			indicatorLeft: 0,
  			indicatorWidth: 0,

  			newuserInfo:{},

  			isUpdating: false // 防止无限递归的标志
  		};
  	},
  	computed: {
  		// 自动计算当前选中的tab索引
  		currentTabIndex() {
  			// 如果外部传入了 tabIndex，优先使用外部传入的值
  			if (this.tabIndex !== null && this.tabIndex !== undefined) {
  				return this.tabIndex;

  			}

  			// 否则根据当前页面路径自动计算
  			const pages = getCurrentPages();
  			if (pages.length === 0) return 0;
  
  			const currentPage = pages[pages.length - 1];
  			const currentPath = '/' + currentPage.route;
  
  			// 查找匹配的tab项
  			const matchedIndex = this.tabList.findIndex(item => {
  				return currentPath === item.pagePath || currentPath.startsWith(item.pagePath);
  			});
  
  			return matchedIndex >= 0 ? matchedIndex : 0;
  		}
  	},
  	mounted() {

  		this.initTabList()

  		// 完全禁用指示器功能，避免无限递归导致堆栈溢出
  		// 指示器功能暂时不启用
  	},

  	onShow() {
  		// 每次显示时重新初始化，确保用户信息更新后能正确显示
  		this.initTabList()
  	},

  	watch: {
  		// 移除所有 watch，避免无限递归
  	},
  	methods: {

  	/**
  	 * 初始化 tab 列表
  	 */
  	async initTabList() {
  		if(uni.getStorageSync('newuserInfo')) {
  			this.newuserInfo = uni.getStorageSync('newuserInfo') 
  		} else{
  			await this.API.getUsers(uni.getStorageSync('userInfo').userId).then(res => {
  				if (res.code === 200) {
  					this.newuserInfo = res.data
  				}
  			})
  		}
  		this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
  		
  		// 通过菜单数据判断是否有"数据中心"菜单
  		const hasDataCenter = await this.hasDataCenterMenu()
  		this.tabList = this.getTabList(hasDataCenter)
  		
  		// 调试信息：打印菜单权限和 tab 数量
  		console.log('[TabBar] 是否有数据中心菜单:', hasDataCenter, 'Tab数量:', this.tabList.length, 'Tab列表:', this.tabList.map(t => t.text))
  	},
  	/**
  	 * 判断是否有"数据中心"菜单权限
  	 * 通过解析菜单数据，查找是否存在 fullName === 'app数据中心' 的节点
  	 * @returns {Boolean} 是否存在数据中心菜单
  	 */
  	async hasDataCenterMenu() {
  		try {
  			// 先从本地存储读取菜单数据
  			const cachedData = uni.getStorageSync('appMenuData')
  			if (cachedData && Array.isArray(cachedData) && cachedData.length > 0) {
  				return this.parseMenuDataForTabBar(cachedData)

  			}

  			// 如果本地没有，则调用 API
  			const userInfo = uni.getStorageSync('userInfo')
  			if (!userInfo || !userInfo.userId) {
  				return false

  			}

  			const res = await this.API.getAppAuthorize()
  			if (res.code === 200 && res.data) {
  				const menuData = res.data
  				// 缓存菜单数据
  				uni.setStorageSync('appMenuData', menuData)
  				return this.parseMenuDataForTabBar(menuData)
  			}
  			
  			return false
  		} catch (err) {
  			console.error('[TabBar] 获取菜单数据失败:', err)
  			return false
  		}
  	},
  	
  	/**
  	 * 解析菜单数据，判断是否存在"数据中心"菜单
  	 * 参考 information.vue 中的 parseMenuData() 方法逻辑
  	 * @param {Array} menuData - 菜单数据数组
  	 * @returns {Boolean} 是否存在数据中心菜单
  	 */
  	parseMenuDataForTabBar(menuData) {
  		if (!menuData || !Array.isArray(menuData) || menuData.length === 0) {
  			return false
  		}
  		
  		// 找到根节点（fullName 为 "app数据中心" 的节点）
  		const rootNode = menuData.find(item => item.fullName === 'app数据中心')
  		if (!rootNode || !rootNode.children) {
  			return false
  		}
  		
  		// 如果根节点存在且有子节点，说明有"数据中心"菜单权限
  		return true
  	},
  	
  	/**
  	 * 根据是否有数据中心菜单权限获取对应的 tab 列表
  	 * @param {Boolean} hasDataCenter - 是否有数据中心菜单权限
  	 * @returns {Array} tab 配置列表
  	 */
  	getTabList(hasDataCenter) {
  		// 定义所有 tab 配置项
  		const tabConfigs = {
  			home: {
  				iconPath: "/static/tabBar/icon2.png",
  				selectedIconPath: "/static/tabBar/icon1.png",
  				text: '首页',
  				pagePath: '/pages/home/home',
  				middleClass: ''
  			},
  			dataCenter: {
  				iconPath: "/static/tabBar/icon4.png",
  				selectedIconPath: "/static/tabBar/icon3.png",
  				text: '数据中心',

  				pagePath: '/pagesA/information/information',

  				middleClass: ''
  			},
  			mine: {
  				iconPath: "/static/tabBar/icon6.png",
  				selectedIconPath: "/static/tabBar/icon5.png",
  				text: '我的',

  				pagePath: '/pagesA/me/me',

  				middleClass: ''

  			}

  		}
  
  		// 根据菜单权限组合 tab 列表
  		const tabList = [tabConfigs.home]
  		if (hasDataCenter) {
  			tabList.push(tabConfigs.dataCenter)
  		}
  		tabList.push(tabConfigs.mine)

  		return tabList
  	},

  		// 更新流动指示器位置 - 暂时禁用
  		updateIndicator() {
  			// 暂时禁用此功能，避免无限递归
  			return
  
  			// 以下代码暂时禁用
  			/*
  			if (this.isUpdating) {
  				return

  			}

  			this.isUpdating = true
  			setTimeout(() => {
  				try {
  					const currentIndex = this.currentTabIndex
  					const query = uni.createSelectorQuery().in(this)
  					query.select('.tab-list').boundingClientRect((tabListRect) => {
  						if (!tabListRect) {
  							this.isUpdating = false
  							return
  						}
  						query.selectAll('.list-item').boundingClientRect((rects) => {
  							if (rects && rects.length > 0 && currentIndex >= 0 && currentIndex < rects.length) {
  								const currentRect = rects[currentIndex]
  								if (currentRect && tabListRect) {
  									const newWidth = currentRect.width * 0.6
  									const newLeft = currentRect.left - tabListRect.left + (currentRect.width - newWidth) / 2
  									this.indicatorWidth = newWidth
  									this.indicatorLeft = newLeft

  								}

  							}
  							setTimeout(() => {
  								this.isUpdating = false
  							}, 100)

  						}).exec()

  					}).exec()
  				} catch (e) {
  					console.error('更新指示器失败:', e)
  					this.isUpdating = false

  				}

  			}, 200)
  			*/
  		},
  		// 点击按钮
  		handlePush(item, index) {
  			if (this.currentTabIndex !== index) {
  				uni.reLaunch({
  					url: item.pagePath
  				})

  			}
  		}
  	}

  }

  </script>
  
  <style lang="scss">

  .specialColor {
  	color: #009b4d;
  }

  .flex {
  	display: flex;
  	flex-flow: row wrap;
  }

  .flex-center {
  	align-items: center;
  	justify-content: center;
  }

  .flex-column {
  	flex-direction: column;
  }
  
  .flex-middle {
  	align-items: center;
  }
  
  .font-20 {
  	font-size: 22rpx;
  }
  
  .tab-block {
  	position: fixed;
  	bottom: 32rpx;
  	left: 50%;
  	transform: translateX(-50%);

  	z-index: 99999;

  	width: calc(100% - 16rpx);
  	// max-width: 680rpx;
  	padding: 0 24rpx;
  	box-sizing: border-box;

  	.tab-list {
  		height: 120rpx;

  	}

  
  	.tab-list-default {

  		background: rgba(255, 255, 255, 0.7);
  		backdrop-filter: blur(20px) saturate(180%);
  		-webkit-backdrop-filter: blur(20px) saturate(180%);
  		border-radius: 28rpx;
  		box-shadow: 0rpx 8rpx 32rpx rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  		border: 1px solid rgba(255, 255, 255, 0.4);
  		position: relative;
  		transition: all 0.3s ease;
  	}

  
  	.tab-list-middle {
  		position: relative;
  		background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
  		background-size: cover;
  	}
  
  	/* 流动选中指示器 */
  	.tab-indicator {
  		position: absolute;
  		bottom: 8rpx;
  		height: 4rpx;
  		background: linear-gradient(90deg, #43a047 0%, #66bb6a 100%);
  		border-radius: 2rpx;
  		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  		box-shadow: 0 2rpx 8rpx rgba(67, 160, 71, 0.4);
  		z-index: 1;
  	}
  
  	.list-item {
  		flex: 1;
  		position: relative;
  		z-index: 2;
  		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  		.item-img-box {
  			width: 40rpx;
  			height: 40rpx;
  			margin-bottom: 6rpx;

  			position: relative;

  			transition: transform 0.3s ease;

  		}
  

  		.item-img {
  			width: 40rpx;
  			height: 40rpx;
  			transition: transform 0.3s ease;
  		}

  		/* 3D悬浮动效 */
  		&:active {
  			transform: translateY(-2rpx) scale(0.95);

  			.item-img-box {
  				transform: scale(1.1);

  			}
  		}

  	}

  	.mid-button {
  		position: relative;

  		.item-img-box {
  			width: 106rpx;
  			height: 106rpx;
  			margin-bottom: 9rpx;
  			position: absolute;
  			z-index: 1002;
  			top: -104rpx;
  		}

  		.item-img {
  			width: 106rpx;
  			height: 106rpx;
  		}

  		.item-text {
  			font-size: 20rpx;
  			position: absolute;
  			z-index: 1002;
  			bottom: -40rpx;

  		}
  	}

  }

  </style>