palletApp/pages/index/index.vue

<template>
	<view class="page">
		<view class="back"></view>
		<view class="wrap">
			<view class="tpcon">
				<view class="tpcell" v-for="(item, index) in menus" v-if="item.ifshow" :key="index" @click="gotoMenu(item)" >
					<image class="img" :src="item.src" mode="aspectFill"></image>
					<view class="name">{{item.name}}</view>
					<view class="tip">{{item.remark}}</view>
				</view>
			</view>
			
			<!-- <view class="info-section">
				<view class="section-header">
					<text class="section-title">托盘统计</text>
				</view>
				<view class="stats-container">
					<view class="stat-item">
						<text class="stat-number">49</text>
						<text class="stat-label">舾装公司</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">1</text>
						<text class="stat-label">二工场</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">83</text>
						<text class="stat-label">已到达</text>
					</view>
				</view>
			</view> -->
			
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	import checkupdate from "@/uni_modules/uni-upgrade-center-app/utils/check-update.js";
	//#endif
	
	export default {
		data() {
			return { 
				// ps:配送;zy:转运;js:接收;xp:卸盘;xq:详情查询;fb:托盘分布
				menus:[ 
					// {
					// 	name:"托盘装车",
					// 	key:"zc",
					// 	src:"../../static/image/zc.png",
					// 	remark:"录入车牌号，添加托盘",
					// 	url:"",
					// 	opentype:"1",
					//  ifshow: false
					// },
					{
						name:"配送接收",
						src:"../../static/image/ps.png",
						key:"js",
						remark:"扫码配送单二维码接收",
						url:"/pages/pallet/ps",
						opentype:"1",
						ifshow: false
					},
					{
						name:"托盘卸盘",
						key:"xp",
						src:"../../static/image/xp.png",
						remark:"填写存放位置完成卸盘",
						url:"/pages/pallet/xp",
						opentype:"1",
						ifshow: false
					},
					{
						name:"托盘转运",
						key:"zy",
						src:"../../static/image/yz.png",
						remark:"填写转运信息完成转运",
						url:"/pages/pallet/yz",
						opentype:"1",
						ifshow: false
					},
					{
						name:"转运接收",
						key:"js",
						src:"../../static/image/js.png",
						remark:"扫码工装托盘二维码接收",
						url:"/pages/pallet/js",
						opentype:"1",
						ifshow: false
					},
					
					// {
					// 	name:"托盘回收",
					// 	src:"../../static/image/hs.png",
					// 	key:"hs",
					// 	remark:"批量扫码回收",
					// 	url:"",
					// 	opentype:"1",
					// ifshow: false
					// },
					{
						name:"扫码查询",
						src:"../../static/image/sm1.png",
						key:"xq",
						remark:"扫码查询工装托盘详情",
						url:"",
						opentype:"1",
						ifshow: false
					},
					{
						name:"托盘分布",
						key:"fb",
						src:"../../static/image/fb.png",
						remark:"查看工装托盘实时信息",
						url:"/pages/pallet/fb",
						opentype:"1",
						ifshow: false
					},
					{
						name:"托盘表查询",
						key:"xq",
						src:"../../static/image/cx.png",
						remark:"查看安装托盘表详情信息",
						url:"/pages/pallet/lbcx",
						opentype:"1",
						ifshow: false
					},
				],
				menu:[]
			}
		},
		onLoad(options) {
			// var user= JSON.parse(uni.getStorageSync("user"));
			var btn=uni.getStorageSync("menu");
			if(btn){
				this.menu=JSON.parse(btn);
			}
			// this.menu=['js']
			this.initMenu();
		},
		onShow() {
			// if (!uni.getStorageSync("token")) {
			// 	uni.showToast({
			// 		title: '登录已失效！请您重新登录！',
			// 		duration: 2000,
			// 		icon: "none"
			// 	});
			// 	setTimeout(function() {
			// 		uni.redirectTo({
			// 			url: '/pages/login/index'
			// 		});
			// 	}, 2000);
			//
			// }
			 
			 
			//#ifdef APP-PLUS
			// 版本更新
			checkupdate();
			//#endif
			 
			// yhdm	用户代码	常用于系统内数据关联
			// lxdh	联系电话	默认中间4位掩码
			// yhms	用户姓名	
			// dept	当前所在部门	存放的是部门编码
			// workshop	默认所在工场	存放的是工场
			// location	默认所在区域	存放的是位置编码
			// address	默认所在地址	
			// btns	首页按钮	list 字符串 存放首页可操作按钮
			// ps:配送;zy:转运;js:接收;xp:卸盘;xq:详情查询;fb:托盘分布
		},
		onReady() {},
		methods: {
			initMenu(){
				// 判断是否有菜单权限
				this.menus.forEach((item,index)=>{
					this.menu.forEach(cell=>{
						if(cell==item.key){
							this.menus[index].ifshow=true;
							this.$forceUpdate();
						}
					});
				});
				
				this.menus.push({
						name:"我的地址",
						key:"my",
						src:"../../static/image/my.png",
						remark:"查看常用地址信息",
						url:"/pages/me/index",
						opentype:"1",
						ifshow: true
					}
				);
			},
			// 获取菜单权限
			gotoMenu(item){
        const token= uni.getStorageSync("token");
        if(!token){
          if (window.plus) { // 确保在App环境中运行
            const main = plus.android.runtimeMainActivity(); // Android方式调用退出
            main.finish(); // Android方式调用退出
            // 或者使用iOS方式的调用方式...
          } else {
            console.log('Not in App environment.'); // 非App环境提示信息
            setTimeout(function() {
              uni.redirectTo({
                url: '/pages/login/index'
              });
            }, 2000);
          }
          return false;
        }

				if(item.name=="扫码查询"){
					
					var _that=this,rmbm="";
					// #ifdef H5
					// 扫码识别托盘明细查询
					rmbm="" //"XZG0001";
					uni.navigateTo({
						url:  `/pages/pallet/ck?rmbm=${rmbm}`
					});
					// #endif
					
					// #ifdef APP-PLUS
					// 允许从相机和相册扫码
					//qrCode,barCode
					// uni.scanCode({
					// 	scanType: ['qrCode', 'barCode'],
					// 	success: function(res) {
					// 		console.log('条码类型：' + res.scanType);
					// 		console.log('条码内容：' + res.result);
					// 		// 扫码接收添加
					// 		rmbm=res.result;
					// 		console.log(rmbm);
					// 		if(rmbm){
					// 			uni.navigateTo({
					// 				url:  `/pages/pallet/ck?rmbm=${rmbm}`
					// 			});
					// 		}
					// 		else{
					// 			_that.$refs.uToast.show({
					// 			  title: "扫码失败，请重试！",
					// 			  type: "warning",
					// 			  duration: 2000,
					// 			});
					// 		}
					// 	}
					// });
					var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
					mpaasScanModule.mpaasScan({
					    // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
					    'scanType':  ['qrCode','barCode'],
					    // 是否隐藏相册，默认false不隐藏
					    'hideAlbum': false,
					    //ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文                       
					    'language' : 'en',
					    //相册选择照片识别错误提示(ios)
					    'failedMsg': '未识别到二维码，请重试',
					    //Android支持全屏需要设置此参数
					    'screenType': 'full' ,
					    'timeoutInterval':'10', //设置超时时间
					    'timeoutText':'未识别到二维码？' //超时提醒文本             
					},(ret) => {
						if(ret.resp_code==1000){
							// 扫码成功
							rmbm=ret.resp_result;
							if(rmbm){
								uni.navigateTo({
									url:  `/pages/pallet/ck?rmbm=${rmbm}`
								});
							}
							else{
								_that.$refs.uToast.show({
								  title: "扫码失败，请重试！",
								  type: "warning",
								  duration: 2000,
								});
							}
						}
					})
					// #endif
					
					return false;
				}
				
				if(item.name=="我的地址"){
					uni.navigateTo({
						url: item.url
					});
				}
				
				var ifopen=false;
				// 判断是否有菜单权限
				this.menu.forEach(cell=>{
					if(cell==item.key){
						ifopen=true;
					}
				});
				
				if(!ifopen){
					this.$refs.uToast.show({
						title: '暂无菜单权限..',
						type: 'warning',
						duration: 1000
					});
					return false;
				}
				
				if(item.url){
					// :"1" // 1 navigateTo 2 redirectTo 3 switchTab
					if(item.opentype&&item.opentype=='1'){
						console.log(item.url)
						uni.navigateTo({
							url: item.url
						});
					}
					else if(item.opentype&&item.opentype=='2'){
						uni.redirectTo({
							url: item.url
						});
					}
					else if(item.opentype&&item.opentype=='3'){
						uni.switchTab({
							url: item.url
						});
					}
				}
				else{
					// console.log("暂无跳转")
					this.$refs.uToast.show({
						title: '功能开发中..',
						type: 'warning',
						duration: 1000
					});
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped> 
	.tpcon{
		display: flex;
		flex-wrap: wrap;
		padding: 36rpx 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		margin-bottom: 40rpx;
	}
	.tpcell{
		flex: 0 0 50%; /* 每个项目占据25%的宽度，即一行显示4个 */
		box-sizing: border-box; /* 确保padding和border不会影响总宽度 */
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;
		flex-direction: column;
		.img{
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
		.name{
			font-size: 30rpx;
			color: #333;
			margin-bottom: 8rpx;
		}
		.tip{
			font-size: 26rpx;
			color: #999;
			text-align: center;
		}
	}
	 
	.info-section {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	.section-header {
	margin-bottom: 25rpx;
	}
	.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #303133;
	}
	.stats-container {
	display: flex;
	justify-content: space-around;
	}
	.stat-item {
	text-align: center;
	}
	.stat-number {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #409EFF;
	margin-bottom: 8rpx;
	}
	.stat-label {
	font-size: 24rpx;
	color: #909399;
	}

	
	.u-tab-item {
		height: 150rpx;
		background: #f5f5f5;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 28rpx;
		color: #000;
		font-weight: 400;
		line-height: 1;
		border-radius: 25rpx;
		box-shadow: 0 6rpx 10rpx rgba(0,0,0,0.2);
		margin-bottom: 10rpx;
	}
	.muimg{
		width: 66rpx;
		height: 66rpx;
		border-radius: 10rpx;
	}
	.mutxt{
		margin-top: 10rpx;
	}
	.u-tab-item-active {
		position: relative;
		color: #ff5a5b;
		font-size: 28rpx;
		font-weight: 600;
		background: #fff;
		border-radius: 25rpx;
	}
	
	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 60rpx;
	}
	.page-view {
		padding: 0;
	}
	 
	.mcon{
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		margin: 0 0 40rpx 20rpx;
		padding: 20rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		box-shadow: 0 12rpx 20rpx rgba(0,0,0,0.2);
		.mheadcon{
			display: flex;
			flex-direction: row;
			width: 100%;
			.mhtitle{
				display: flex;
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				margin-left: 20rpx;
				margin-top: 10rpx;
			}
			.mhicon{
				font-weight: 400;
			}
		}
		.mlist{
			padding: 30rpx 0 0;
			background-color: #fff;
			// 设置父元素成为弹性盒
			display: flex;
			// 让弹性盒元素在必要的时候拆行
			flex-wrap: wrap;
			.mcell{
				min-height: 150rpx;
				// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
				// 同时设置下边距margin-bottom（每个元素的上下间隙）
				margin: 10rpx 20rpx 20rpx 0;
				width: calc((100% - 40rpx) / 3);   
				// 这里一行显示4个，所以是/4，一行显示几个就除以几 
				// 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整
				min-width: calc((100% - 40rpx) / 3);
				max-width: calc((100% - 40rpx) / 3);
				// 每行最右侧的那个不设置右外边距
				&:nth-child(3n + 3) {
					margin-right: 0;
				}
				display: flex;
				flex-direction: column;
				align-items: center;
				.mimg{
					width: 90rpx;
					height: 90rpx;
					position: relative;
					.icon{
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
					.topnum{
						position: absolute;
						top:-6rpx;
						right:-6rpx;
						padding: 0 7rpx;
						height: 30rpx;
						line-height: 30rpx;
						border-radius: 30rpx;
						color: #fff;
						font-size: 22rpx;
						background-color: #de0000;
					}
				}
				.mname{
					margin-top: 20rpx;
					font-size: 26rpx;
					font-weight: 500;
				}
			}
		}
	}
	.shead{
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #3690ff;
		height: 250rpx;
		width: 100%;
		margin: 0;
		padding: 40rpx 0 0 0;
		border-radius: 0 0 80rpx 80rpx;
		.stitle{
			display: flex;
			flex-direction: row;
			height: 100rpx;
			align-items: center;
			padding: 60rpx 40rpx;
			.tlogo{
				width: 70rpx;
				height: 50rpx;
				 background-color: white;
				border-radius: 6rpx;
				.tlimg{
					width: 100%;
					height: 100%;
				}
			}
			.stxt{
				margin-left: 20rpx;
				display: flex;
				flex: 1;
				font-size: 32rpx;
				font-weight: 600;
				color:#FFFFFF;
			}
		}
		.bcon{
			padding: 0 40rpx 50rpx 40rpx;
			.bimg{
				width: 100%;
				height: 200rpx;
				border-radius: 20rpx;
			}
			
		}
	}

</style>