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>
				<view class="menu-item" v-for="(children, i) in item.children" :key="i" @click="toPage(children.path)">
					<!-- <image :src="children.meta.icon" class="icon_menu"></image> -->
					<u-icon :name="children.meta.icon" :color="children.meta.color" size="70"></u-icon>
					<view class="menu-title">{{children.meta.title}}</view>
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [
					{
						meta:{
							title:'我的订单动态'
						},
						children:[
							{
								meta:{
									icon:'file-text',
									color:'#FEFA83',
									title:'所有订单'
								},
								path:'/subPackages/orderforGoods/index'
							},
							{
								meta:{
									icon:'file-text',
									color:'#A2EF4D',
									title:'生产中',
								},
								path:'/subPackages/orderforGoods/index?status=生产中' 
							},
							{
								meta:{
									icon:'file-text',
									color:'#F71313',
									title:'逾期'
								},
								path:'/subPackages/orderforGoods/index?status=已逾期' 
							},
							{
								meta:{
									icon:'file-text',
									color:'#FFBF6B',
									title:'已发货'
								},
								path:'/subPackages/orderforGoods/index?status=已发货' 
							},
							{
								meta:{
									icon:'file-text',
									color:'#B4FDFF',
									title:'已签收'
								},
								path:'/subPackages/orderforGoods/index?status=已签收' 
							}
						]
					}
				],
			}
		},
		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: path
				});
			},
		}
	}
</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>