modify：1.解决当功能也过多时展示不全的问题；2.添加展示WMS后端应以的手持权限菜单的方式；

pages/work/index.vue

@@ -32,7 +32,7 @@
 		<swiper class="work-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
 			:autoplay="true" interval="5000" duration="500">
 			<swiper-item v-for="(item,index) in swiperList" :key="index">
-				<image :src="item.url" v-if="item.type=='image'" ></image>
+				<image :src="item.url" v-if="item.type=='image'"></image>
 				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
 					v-if="item.type=='video'"></video>
 			</swiper-item>
@@ -41,11 +41,12 @@
 			<view class="bodytitle">
 				业务操作
 			</view>
+			<!--以下页面路由，来源与静态路由-->
 			<view class="bodybox">
 				<view v-for="(item,index) in wmsRouter" class="bodyboxitem" :key="index">
 					<view class="grid-item-box" @click="navChange(item)">
 						<!-- <uni-icons :class='item.icon' size="30"></uni-icons> -->
-						<image :src="item.icon" ></image>
+						<image :src="item.icon"></image>
 						<text class="text">{{item.title}}</text>
 					</view>
 				</view>
@@ -54,16 +55,18 @@
 				<view style="width: 140rpx;"></view>
 			</view>
 		</view>
-		<view class="grid-body" v-if="userRoutes.length>0">
+		<scroll-view  v-if="userRoutes.length>0 scroll-x class="bg-white nav work-container" scroll-with-animation :scroll-left="scrollLeft">
-			<template v-for="oneMenuList in userRoutes">
+			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in userRoutes"
-				<view class="bodytitle">
+				:key="index" @tap="tabSelect" :data-id="index" :data-routeList="item">
-					{{oneMenuList.title}}
+				{{item.title}}
 			</view>
-				<view class="bodybox">
+			<view class="nav-grid-body">
-					<view v-for="(item,index) in oneMenuList.children" class="bodyboxitem" :key="index">
+				<!--以下页面路由，来源与静态路由-->
+				<view class="nav-bodybox">
+					<view v-for="(item,index) in currentRouteItems.children" class="nav-bodyboxitem" :key="index">
 						<view class="grid-item-box" @click="navChange(item)">
-							<uni-icons :class='item.icon' size="30"></uni-icons>
+							<!-- <uni-icons :class='item.icon' size="30"></uni-icons> -->
-							
+							<image :src="item.icon"></image>
 							<text class="text">{{item.title}}</text>
 						</view>
 					</view>
@@ -71,9 +74,8 @@
 					<view style="width: 140rpx;"></view>
 					<view style="width: 140rpx;"></view>
 				</view>
-			</template>
-		</view>
 			</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -122,7 +124,11 @@
 				towerStart: 0,
 				direction: '',
 				dotStyle: true,
-				userRoutes: []
+				userRoutes: [],
+				TabCur: 0,
+				scrollLeft: 0,
+				//当前页签选中的菜单列表
+				currentRouteItems: [],
 			}
 		},
 		computed: {
@@ -131,11 +137,6 @@
 			},
 			windowHeight() {
 				return uni.getSystemInfoSync().windowHeight - 50
-			},
-			warehouseinfo() {
-				if (Array.isArray(this.warehouse) && this.warehouse.length > 0) {
-					return '【' + this.warehouse[0].warehouseCode + '】' + this.warehouse[0].warehouseName
-				}
 			}
 		},
 		onLoad() {
@@ -145,9 +146,21 @@
 			//获取缓存内容
 			console.log(store)
 			console.log(store.getters.userRoutes)
+			//从缓存中加载路由信息
 			this.userRoutes = store.getters.userRoutes;
+			//默认当前打开的页面为第一个手持菜单
+			this.currentRouteItems = this.userRoutes[0];
 		},
 		methods: {
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+				console.log(e)
+				this.currentRouteItems = e.currentTarget.dataset.routelist;
+				console.log("this.currentRouteItems", e.currentTarget.dataset.routelist)
+				console.log("tabSelect", this.$store.state.user)
+				console.log("tabSelect", this.$store.state.user.avatar)
+			},
 			changeGrid(e) {
 				this.$modal.showToast('模块建设中~')
 				console.log(e)
@@ -155,11 +168,11 @@
 			navChange(e) {
 				console.log("navChange", e)
 				//todo 校验是否有权限
-				var path = e.path;
+				const path = e.path;
 				console.log(path)
-				//this.PageCur = e.currentTarget.dataset.cur
+				this.$tab.navigateTo(path);
-				this.$tab.navigateTo(path)
 			},
+
 			// 初始化towerSwiper
 			TowerSwiper(name) {
 				let list = this[name];
@@ -299,7 +312,7 @@
 	.work-container {
 		background: linear-gradient(180.00deg, rgb(181, 202, 245) 0%, rgb(184, 204, 245) 40.449%, rgba(213, 227, 249, 0) 87.96%);
 		width: 100%;
-		height: 90vh;
+		min-height: 90vh;
 		overflow: hidden;
 	}
 
@@ -319,7 +332,8 @@
 		align-items: center;
 		justify-content: center;
 		padding: 15px 0;
-		image{
+
+		image {
 			width: 100rpx;
 			height: 100rpx;
 		}
@@ -347,6 +361,7 @@
 		box-shadow: 0px 4rpx 11rpx 0px rgba(111, 150, 198, 0.09), 0px 4px 84px 0px rgba(130, 154, 190, 0.11);
 		background: rgb(255, 255, 255);
 		padding-bottom: 64rpx;
+
 		.bodytitle {
 			color: rgb(29, 33, 41);
 			font-family: 苹方-简;
@@ -365,12 +380,62 @@
 			justify-content: space-evenly;
 		}
 
+		.empty-bodybox {
+			min-height: 80vh;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			justify-content: space-evenly;
+		}
+
 		.bodyboxitem {
 			width: 140rpx;
 			height: 195rpx;
 		}
 	}
 
+	.nav-grid-body {
+		width: 686rpx;
+		border-radius: 24rpx;
+		padding: 32rpx;
+		margin: 32rpx auto;
+		box-shadow: 0px 4rpx 11rpx 0px rgba(111, 150, 198, 0.09), 0px 4px 84px 0px rgba(130, 154, 190, 0.11);
+		background: rgb(255, 255, 255);
+		padding-bottom: 64rpx;
+		min-height: 80vh;
+
+		.nav-bodytitle {
+			color: rgb(29, 33, 41);
+			font-family: 苹方-简;
+			font-size: 32rpx;
+			font-weight: 500;
+			line-height: 45rpx;
+			letter-spacing: 0px;
+			text-align: left;
+			margin-bottom: 10rpx;
+		}
+
+		.nav-bodybox {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			justify-content: space-evenly;
+		}
+
+		.empty-bodybox {
+			min-height: 80vh;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			justify-content: space-evenly;
+		}
+
+		.nav-bodyboxitem {
+			width: 140rpx;
+			height: 195rpx;
+		}
+	}
+
 	.swiper-item {
 		/* #ifndef APP-NVUE */
 		display: flex;