client_LemonBeans/pages/index/index.vue

<template>
	<view class="index-page">
		<image src="@/static/home.jpg" class="bg_home"></image>
		<view class="menu">
			<view class="menu-box" v-for="(item, index) in menuList" :key="index">
				<view class="title">{{item.meta.title}}</view>
				<!-- @click="toPage(children.path)" -->
				<view class="menu-item" v-for="(children, i) in item.children" :key="i" @click="toPage(i)">
					<image :src="children.meta.icon" class="icon_menu"></image>
					<view class="menu-title">{{children.meta.title}}</view>
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [],
			}
		},
		onShow() {
			this.getInfo()
			this.getUserMenu();
		},
		methods: {
			getInfo() {
				this.$api.getInfo().then(res => {
					uni.setStorageSync('userInfo', res.enterpriseUser);
				}).catch(err => {})
			},
			getUserMenu() {
				this.menuList = []
				this.$api.getRouters().then(res => {
					for (let i = 0; i < res.data.length; i++) {
						if (res.data[i].pcShow == '0') {
							let children = res.data[i].children
							for (let j = 0; j < children.length; j++) {
								this.menuList.push(children[j])
							}
						}
					}
				}).catch(err => {})
			},
			toPage(path) {
				let url = null
				if (path == 0) {
					url = '/subPackages/work/index'
				}else if (path == 1) {
					url = '/subPackages/qualityinspection/index'
				}else if (path == 2) {
					url = '/subPackages/manualdeclaration/index'
				}else if (path == 3) {
					url = '/subPackages/workorder/index'
				}
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		.bg_home {
			width: 100%;
			height: 400rpx;
		}

		.menu {
			margin: 16rpx;
		
			.menu-box {
				background-color: $uni-bg-color;
				margin: 0 2% 20rpx 2%;
				padding: 30rpx 20rpx;
				border-radius: 10rpx;
			}
		
			.title {
				margin: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		
			.menu-item {
				width: 25%;
				margin-top: 24rpx;
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				position: relative;
		
				.icon_menu {
					width: 90rpx;
					height: 90rpx;
				}
		
				.menu-title {
					margin-top: 10rpx;
					color: #666;
				}
			}
		}
	}
</style>