zhjwxt/uniapp/pages/common/home/index.vue

<template>
	<view class="home-container">
		<!-- 自定义导航栏 -->
		<uni-nav-bar
			:statusBar="true"
			backgroundColor="#181A20"
			color="#fff"
			title="首页"
		/>
		
		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="user-avatar">
				<image :src="userInfo.avatar || $util.img('/static/icon-img/tou.png')" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<text class="user-name">{{ userInfo.name || '员工姓名' }}</text>
				<text class="user-role">{{ (userInfo.role_info && userInfo.role_info.role_name) || '员工角色' }}</text>
				<text class="user-number">工号：{{ userInfo.employee_number || '未设置' }}</text>
			</view>
		</view>

		<!-- 九宫格操作区域 -->
		<view class="grid-container">
			<view class="grid-title">员工操作</view>
			<view class="grid-content">
				<view 
					class="grid-item" 
					v-for="(item, index) in visibleGridItems" 
					:key="index"
					@click="handleGridClick(item)"
				>
					<view class="grid-icon">
						<uni-icons :type="item.icon" size="32" color="#29d3b4"></uni-icons>
					</view>
					<text class="grid-text">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userPermissions: [], // 用户权限列表
				// 固定定义所有可能的按钮，根据权限控制显示/隐藏
				allGridItems: [
					{
						title: '客户资源',
						icon: 'person-filled',
						path: '/pages/market/clue/index'
					},
					{
						title: '添加资源',
						icon: 'plus-filled',
						path: '/pages/market/clue/add_clues'
					},
					{
						title: '数据统计',
						icon: 'bars',
						path: '/pages/market/data/statistics'
					},
					{
						title: '个人中心',
						icon: 'person',
						path: '/pages/market/my/index'
					},
					{
						title: '首页',
						icon: 'home',
						path: '/pages/market/home/index'
					},
					{
						title: '课程安排',
						icon: 'calendar-filled',
						path: '/pages-market/clue/class_arrangement'
					},
					{
						title: '学员管理', 
						icon: 'person',
						path: '/pages-coach/coach/student/student_list'
					},
					{
						title: '课程查询',
						icon: 'list',
						path: '/pages-coach/coach/schedule/schedule_table'
					},
					{
						title: '我的数据',
						icon: 'bars',
						path: '/pages/common/dashboard/webview',
						params: { type: 'my_data' }
					},
					{
						title: '部门数据',
						icon: 'home',
						path: '/pages/common/dashboard/webview',
						params: { type: 'dept_data' }
					},
					{
						title: '校区数据',
						icon: 'location',
						path: '/pages/common/dashboard/webview',
						params: { type: 'campus_data' }
					},
					{
						title: '我的消息',
						icon: 'chat-filled',
						path: '/pages/common/my/my_message'
					},
					{
						title: '报销管理',
						icon: 'wallet-filled',
						path: '/pages-market/reimbursement/list'
					},
					{
						title: '资料库',
						icon: 'folder-add',
						path: '/pages-coach/coach/my/teaching_management'
					}
				]
			}
		},
		onLoad() {
			this.loadUserInfo();
			this.loadMenuList();
		},
		onShow() {
			// 每次显示页面时重新加载，确保菜单数据最新
			this.loadMenuList();
		},
		computed: {
			// 根据权限过滤可见的按钮
			visibleGridItems() {
				return this.allGridItems.filter(item => {
					return this.userPermissions.includes(item.path);
				});
			}
		},
		methods: {
			loadUserInfo() {
				// 从本地存储获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userInfo = userInfo;
				}
			},
			loadMenuList() {
				// 从本地存储获取菜单权限数据
				const menuList = uni.getStorageSync('menuList');
				console.log('从本地存储获取的菜单列表:', menuList);
				
				if (menuList && Array.isArray(menuList) && menuList.length > 0) {
					// 提取权限path列表
					this.userPermissions = menuList.map(item => item.path);
				} else {
					// 默认权限（基础功能）
					this.userPermissions = ['/pages/common/dashboard/webview', '/pages-common/my_message'];
					console.log('使用默认权限');
				}
				
				console.log('用户权限路径:', this.userPermissions);
			},
			handleGridClick(item) {
				console.log('点击功能按钮:', item.title, item.path);
				
				// 构建跳转URL，如果有参数则附加到URL中
				let url = item.path;
				if (item.params) {
					// 手动构建参数字符串，兼容小程序环境
					const paramStrings = [];
					for (const key in item.params) {
						if (item.params.hasOwnProperty(key)) {
							paramStrings.push(`${encodeURIComponent(key)}=${encodeURIComponent(item.params[key])}`);
						}
					}
					if (paramStrings.length > 0) {
						url = `${item.path}?${paramStrings.join('&')}`;
					}
				}
				
				uni.navigateTo({
					url: url,
					fail: (err) => {
						console.error('页面跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.home-container {
		background-color: #181A20;
		min-height: 100vh;
		color: #fff;
	}

	.user-info-section {
		display: flex;
		align-items: center;
		padding: 20px;
		background: linear-gradient(135deg, #29d3b4 0%, #1a9b7c 100%);
		margin: 20px;
		border-radius: 12px;
	}

	.user-avatar {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.user-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
		color: #fff;
	}

	.user-role {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 3px;
	}

	.user-number {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.6);
	}

	.grid-container {
		margin: 20px;
	}

	.grid-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #fff;
	}

	.grid-content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}

	.grid-item {
		background-color: #292929;
		border-radius: 8px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 80px;
		transition: all 0.3s ease;
	}

	.grid-item:active {
		background-color: #3a3a3a;
		transform: scale(0.95);
	}

	.grid-icon {
		margin-bottom: 8px;
	}

	.grid-text {
		font-size: 12px;
		color: #fff;
		text-align: center;
		line-height: 1.2;
	}
</style>