2025-03-JS-SDK-PDA/pages/material/index.vue

<template>
	<view>
		<!-- <u-navbar :is-back="false" title="MWMS PDA" :background="background" /> -->
		<u-navbar title="MWMS PDA" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder></u-navbar>
		<view class="aside-main" style="margin-top: 30rpx;">
			<scroll-view scroll-y class="scroll-Y1" :style="'height:'+ mainH" scroll-with-animation>
				<view :class="num==index?'active':''" v-for="(item,index) in asideList" :key="index"
					@click="asid(index)" class="mini">
					<image :src="item.imgUrl" class="min-img"></image>
					<text>{{ item.title }}</text>
				</view>
			</scroll-view>
			<!-- 分割线 -->
			<view class="divider-vertical"></view>
			<!-- 右侧滑动区 -->
			<scroll-view scroll-y class="scroll-Y2" :style="'height:'+ mainH" :scroll-into-view="rightview"
				scroll-with-animation @scroll="scrollright" @scrolltoupper="scrolltop" @scrolltolower="scrollbuttom">
				<!-- 功能区节点 -->
				<view v-for="(item,index) in asideList" :key="index" class="min" :id="'rightIndex'+index">
					<view class="fui-section__title">{{ item.title }}</view>
					<view v-for="(subItem, j) in item.list" :key="j" class="mini"
						@click="navigateToDetail(subItem.name)" :padding="['28rpx','32rpx']">
						<image :src="subItem.url" class="min-img"></image>
						<text class="card-description">{{ subItem.itemName }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <u-loading mode="circle" :show="loading" class="global-loading"></u-loading> -->
	</view>
</template>

<script>
export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				mainH: 800,
				num: 0,
				leftview: '',
				rightview: '',
				// 所有的节点坐标
				nodes: [],
				asideList: [{
						title: "入库",
						imgUrl: "../../static/img/ruku.png",
						list: [{
							name: "PoStockIn/PoStockIn",
							url: "../../static/img/caigourukudan.png",
							itemName: "采购入库\n"
						}, {
							url: "../../static/img/weiwairuku.png",
							itemName: "委外采购"
						}, {
							url: "../../static/img/tuikuruku.png",
							itemName: "退库入库"
						}]
					},
					{
						imgUrl: "../../static/img/WMS-zaikuguanli.png",
						title: "在库",
						list: [{
							name: 'MaterialQuery',
							url: "../../static/img/kucunchaxun.png",
							itemName: "库存查询"
						}, {
							name: 'ErpLocationRemove',
							url: "../../static/img/huoweitiaozheng.png",
							itemName: "库位调整"
						}, {
							name: 'LocationRemove',
							url: "../../static/img/huoweitiaozheng1.png",
							itemName: "货位调整"
						}, {
							name: 'SplitBoxPage',
							url: "../../static/img/chaixiang.png",
							itemName: "标签拆分"
						}, {
							name: 'MergeBoxPage',
							url: "../../static/img/hexiang.png",
							itemName: "标签合并"
						}, {
							url: "../../static/img/budabiaoqian.png",
							itemName: "标签补印"
						}]
					},
					{
						imgUrl: "../../static/img/chuku.png",
						title: "出库",
						list: [{
              name: 'ShipRequestOut/ShipRequestOut',
							url: "../../static/img/jianhuoxiajia.png",
							itemName: "预约出库"
						}, {
							url: "../../static/img/caigoutuihuidan.png",
							itemName: "原PO退\n库"
						}, {
							url: "../../static/img/caigoutuihuidan.png",
							itemName: "退货PO返\n厂"
						}, {
							name: 'ScrapPickPage',
							url: "../../static/img/chanquanbaofei.png",
							itemName: "财务报废\n转库"
						}, {
							name: 'ScrapOutPickPage',
							url: "../../static/img/baofeichukudan.png",
							itemName: "实物报废\n出库"
						}]
					},
					{
						imgUrl: "../../static/img/kucunpandian.png",
						title: "盘点",
						list: [{
							name: 'CheckRecord/CheckRecord',
							url: "../../static/img/kucunpandian.png",
							itemName: "盘点扫描"
						}, {
							url: "../../static/img/pandian(1).png",
							itemName: "盘点确认"
						}, {
							url: "../../static/img/pandian(2).png",
							itemName: "盘点审核"
						}]
					},
					{
						imgUrl: "../../static/img/cangkulikudongjie.png",
						title: "立库",
						list: [{
							url: "../../static/img/bangdongjiebang_X.png",
							itemName: "母托绑定\n&解绑"
						}, {
							url: "../../static/img/bansong.png",
							itemName: "搬送任务\n下发"
						}, {
							url: "../../static/img/xinxitongbu.png",
							itemName: "货位同步"
						}, {
							url: "../../static/img/kucungengxin.png",
							itemName: "托盘同步"
						}]
					}
				],
				loading: false // 全局加载状态
			}
		},
		created() {
			// 调用uniapp的api获取系统信息,如浏览器可视区高度
			uni.getSystemInfo({
				success: (res) => {
					// 将upx转换成px
					// 可视区高度减去导航栏高度
					this.mainH = res.windowHeight - uni.upx2px(8) + 'px';
				}
			})
			// 得到页面加载完成时所有的.min节点的坐标位置,主要为top值
			this.coordinate()
		},
		methods: {
			navigateToDetail(name) {
				//检查toke是否超时，如果超时，则跳转到登录页面,如果未超时跳转到对应页面
				if (this.$store.state.token == null || this.$store.state.token == '') {
					uni.navigateTo({url: '/pages/login/index'});
					}
				// 检查 name 是否为空或未定义
				if (!name || name.trim() === '') {
					// 使用 uni.showToast 显示弹窗提示
					uni.showToast({
						title: '功能开发中', // 提示信息
						icon: 'none', // 图标类型，'none' 表示不显示图标
						duration: 2000 // 提示框显示的毫秒数，默认为 1500ms
					});
					return; // 阻止后续代码执行，即不进行页面跳转
				}
				// 若 name 不为空，则执行页面跳转
				uni.navigateTo({
					url: `/pages/material/features/${name}`
				});
			},
			// 扫码
			re() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 搜索
			searchTo() {
				// 跳转路由，跳转到搜索页面
				uni.navigateTo({
					url: "../searchmain/searchmain"
				})
			},
			// 侧边栏切换
			asid(index) {
				// 变色
				this.num = index
				// 通过uniapp的scroll-into-view实现与右侧功能区节点的切换联动
				this.rightview = 'rightIndex' + index
			},
			// 滑动触顶事件
			scrolltop() {
				this.num = 0
			},
			// 滑动触底事件
			scrollbuttom() {
				this.num = this.nodes.length - 1
			},
			// 滑动右边内容区实现与左侧菜单栏联动效果
			scrollright(e) {
				// 拿到滑动的距离(记住初始滑动距离是0！！很重要)
				for (let i = 1; i < this.nodes.length; i++) {
					if (e.detail.scrollTop + this.nodes[0] >= this.nodes[i] && e.detail.scrollTop + this.nodes[0] <= this.nodes[i + 1]) {
						this.num = i
					} else if (e.detail.scrollTop + this.nodes[0] < this.nodes[1]) {
						this.num = 0
					} else if (e.detail.scrollTop + this.nodes[0] > this.nodes[this.nodes.length - 1]) {
						this.num = this.nodes.length - 1
					}
				}
			},
			// 获取右侧内容区每个指定节点的坐标信息(即左侧菜单栏所对应的每一个功能区的顶部坐标),该方法只在created生命周期中执行一遍即可
			coordinate() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".min").boundingClientRect((data) => {
					for (let i = 0; i < data.length; i++) {
						this.nodes.push(data[i].top)
					}
				}).exec();
			}
		}
	}
</script>

<style>
	.active {
		color: #aaaa7f;
	}

	.min {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.mini {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.min-img {
		width: 48upx;
		height: 48upx;
		filter: brightness(50%);
		opacity: 0.6;
	}

	.text {
		width: 100upx;
		margin: 0 auto;
		align-items: center;
		opacity: 0.3;
	}

	.aside-main {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.scroll-Y1 {
		flex: 1;
		box-sizing: border-box;
	}

	.scroll-Y1 view {
		text-align: left; /* 修改为左对齐 */
		margin-top: 80upx;
		padding-left: 20upx; /* 添加左侧内边距 */
	}

	.scroll-Y2 {
		flex: 3;
		box-sizing: border-box;
		align-items: center;
	}

	.scroll-Y2 view {
		text-align: center;
		margin: 30upx 30upx 0upx 0upx;
	}

	.icon {
		width: 50upx;
		height: 50upx;
		margin-top: 20upx;
	}

	.icon1 {
		width: 30upx;
		height: 30upx;
		position: absolute;
		top: 25upx;
		left: 20upx;
	}

	.btn {
		width: 240upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0;
		padding: 0;
		font-size: 30upx;
	}

	.serch {
		height: 60upx;
		flex: 2;
		margin-left: 20upx;
		margin-right: 20upx;
		box-sizing: border-box;
		border: solid 1upx #ccc;
		border-radius: 10upx;
		position: relative;
	}

	.serch input {
		height: 60upx;
		margin-left: 60upx;
	}

	.fui-section__title {
		width: 100%;
		text-align: left; /* 修改为左对齐 */
	}

	.divider-vertical {
		width: 1px; /* 竖线的宽度 */
		height: 100% + 0px; /* 竖线的高度，与 scroll-view 相同 */
		background-color: #ccc; /* 竖线的颜色 */
		/* 如果需要，可以添加 margin 或 padding 来调整位置 */
		margin: 20rpx;
	}

	.divider-horizontal {
		width: 100%; /* 或者你需要的宽度 */
		height: 1px; /* 横线的高度 */
		background-color: #ccc; /* 横线的颜色 */
		margin: 8px 0; /* 可选的，增加上下边距 */
	}

	/* 添加新的样式来调整左侧菜单项的布局 */
	.scroll-Y1 .mini {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.scroll-Y1 .mini .min-img {
		margin-right: 10upx; /* 图片和文本之间的间距 */
	}

	.card-description {
		margin: 8px;
		font-size: 14px; /* 调整字体大小 */
	}
</style>