仓库首页

pages.json

@@ -147,6 +147,9 @@
 				"navigationStyle": "custom"
 			}
 		
+		},
+		{
+			"path" : "pages/Warehouse/procurement" 
 		}
 		
 		// {

pages/Warehouse/Warehouse.vue

@@ -2,23 +2,21 @@
 	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`"  v-show="isShow">
 		<view class="wareaitem">
 			<view class="wareaitem-item">
-				<view class="tp" v-for="(item,index) in 9" :key='index' >
+				<view class="tp" :class="'itemact'+(index+1)" v-for="(item,index) in animArray" :key='index' @click.stop="housactive(index)">
+					<image :src="'/static/index/warehouse/active/w'+index+'.png'" mode="aspectFill" v-if="housedex!=index"></image>
+					<donghua :width="item.width" :height="item.height" :links="item.url" :playing="index === housedex" v-show="index === housedex"/>
+					<!-- <image :src="'/static/index/warehouse/active/i'+index+'.png'" mode="aspectFill" v-if="housedex==index"></image> -->
+				</view>
+				
+				<view class="tp" :class="'wareitem'+index" v-for="(item,index) in 12" :key='index' >
 					<image :src="'/static/index/warehouse/w'+index+'.png'" mode="aspectFill"></image>
 				</view>
-				
-				<view class="tp" :class="'itemact'+item" v-for="(item,index) in 7" :key='index' @click.stop="housactive(index)">
-					<image :src="'/static/index/warehouse/active/i'+index+'.png'" mode="aspectFill" v-if="index>5||housedex==index"></image>
-				</view>
-				
 				<view class="tp ys" >
-					<image :src="'/static/index/warehouse/active/i7.png'" mode="aspectFill" ></image>
+					<image :src="'/static/index/warehouse/i7.png'" mode="aspectFill" ></image>
 				</view>
 				<view class="tp gifs" >
 					<image src="/static/index/warehouse/ys.gif" mode="aspectFill"></image>
 				</view>
-				<view class="tp w11" >
-					<image src="/static/index/warehouse/w11.png" mode="aspectFill"></image>
-				</view>
 				<view class="tp wclik"  @click.stop="housactive(1)">
 					 <!-- 采购增加层级高度方便点击 -->
 				</view>
@@ -33,7 +31,7 @@
 				</view>
 			</view>
 			
-			<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="125" />
+			<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
 			<view class="operationbtn">
 				<view v-for="(v,i) in ['请领出库','退货入库','库存盘点','实时监控']"
 				 @tap="onTap(i)" 
@@ -57,29 +55,37 @@
 	 const housactive = (index : number) => {
 		 if(index>5){return}
 		 housedex.value = index; 
-	 	console.log(index)
 	 }
+	 const navurl = ref('');
 	 const movecard = (type : number) => {
 	   console.log(type)
 	   switch (type){
 	   	case 0:
 		// 上
-		housedex.value>0?housedex.value--:housedex.value = 5
+		housedex.value>0?housedex.value--:housedex.value = 3
 	   		break;
 	   	case 1:
-		housedex.value>4?housedex.value = 0:housedex.value++
+		housedex.value>2?housedex.value = 0:housedex.value++
 		// →
 	   		break;
 	   	case 2:
-		housedex.value>4?housedex.value = 0:housedex.value++
+		housedex.value>2?housedex.value = 0:housedex.value++
 		// 下
 	   		break;
 	   	case 3:
-		housedex.value>0?housedex.value--:housedex.value = 5
+		housedex.value>0?housedex.value--:housedex.value = 3
 		// ←
 	   		break;
 	   	case 4:
 		// 确定
+		console.log('选中'+housedex.value)
+		if(housedex.value==1){
+			navurl.value = 'pages/Warehouse/procurement'
+		}
+			
+			uni.navigateTo({
+				url:'/'+navurl.value
+			})
 	   		break;
 	   	case 5:
 		// 返回
@@ -109,6 +115,66 @@
 	 	}
 	 }
 	 
+	 // 通用的生成函数
+	 function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
+	 	return Array.from({ length: count }, (_, i) => {
+	 		const idx = pad
+	 			? String(i + startIndex).padStart(2, '0')
+	 			: i + startIndex
+	 		return `${base}/${prefix}${idx}.${ext}`
+	 	})
+	 }
+	 const animArray = ref([
+	 	{
+	 		url: genPaths(
+	 			'/static/index/warehouse/animation',
+	 			'remit0',
+	 			5,    // 张数
+	 			'png',
+	 			1,     // 起始索引为 1
+	 			false  // 不补零
+	 		),
+			width: '29vw',
+			height: '21vw'
+	 	} ,
+		{
+			url: genPaths(
+				'/static/index/warehouse/animation',
+				'buy0',
+				5,    // 张数
+				'png',
+				1,     // 起始索引为 1
+				false  // 不补零
+			),
+			width: '26vw',
+			height: '16vw'
+		} ,
+		{
+			url: genPaths(
+				'/static/index/warehouse/animation',
+				'checkout0',
+				5,    // 张数
+				'png',
+				1,     // 起始索引为 1
+				false  // 不补零
+			),
+			width: '24vw',
+			height: '16vw'
+		} ,
+		{
+			url: genPaths(
+				'/static/index/warehouse/animation',
+				'Pick0',
+				4,    // 张数
+				'png',
+				1,     // 起始索引为 1
+				false  // 不补零
+			),
+			width: '17vw',
+			height: '13vw'
+		} 
+	 ])
+	 
 </script>
 
 <style lang="less">
@@ -118,7 +184,8 @@
 		position: fixed;
 		top: 0;
 		left: 0; 
-		background: rgba(255, 255, 255, 0.7);
+		background: url('/static/index/warehouse/bg.png')no-repeat;
+		background-size:cover cover;
 		.tp{
 			image{
 				width: 100%;
@@ -129,7 +196,7 @@
 			width: 20vw;
 			height: 10vw;
 			position: absolute;
-			right: 3vw;
+			right: 1.5vw;
 			bottom: 2vw;
 			display: flex;
 			justify-content: space-between;
@@ -143,7 +210,7 @@
 				justify-content: center;
 				align-items: center;
 				font-weight: 400;
-				font-size: 1vw;
+				font-size: 1.3vw;
 				color: #888D99;
 				margin: 0 0.3vw;
 				transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
@@ -181,193 +248,137 @@
 			height: 100%;
 			position: fixed;
 			top: 0;
-			left: 0;
+			left: -2vw;
-			background: url('/static/index/warehouse/bg.png')no-repeat;
-			background-size:cover cover;
 			
 			.itemact1 {
-				width: 25vw;
+				width: 29vw;
-				height: 19vw;
+				height: 21vw;
-				top: 21vw;
+				top: 23vw;
-				left: 8vw;
+				left: 6vw;
 				z-index: 31;
 			} 
 			.itemact2{
-				width: 20vw;
+				width: 26vw;
-				height: 13vw;
+				height: 16vw;
 				top: 15vw;
-				left: 43vw;
+				left: 41vw;
 				z-index: 27;
 			}
 			.itemact3{
-				width: 20vw;
+				width: 24vw;
-				height: 14vw;
+				height: 16vw;
-				top: 26vw;
+				top: 28vw;
-				left: 45vw;
+				left: 46vw;
-				z-index: 35;
+				z-index: 55;
 			} 
 			.itemact4{
-				width: 11vw;
+				width: 17vw;
-				height: 9vw;
+				height: 13vw;
-				top: 23vw;
+				top: 22vw;
-				left: 63vw;
+				left: 67vw;
 				z-index: 36;
 			}
-			.itemact6{
-				width: 15vw;
-				height: 10vw;
-				top: 25vw;
-				left: 80vw;
-				z-index: 35;
-			}
-			.itemact5{
-				width: 16vw;
-				height: 13vw;
-				top: 31vw;
-				left: 67vw;
-				z-index: 35;
-			}
-			.itemact7{
-				width: 48vw;
-				height: 22vw;
-				top: 35vw;
-				left: 22vw;
-				z-index: 31;
-			}
 			 
-			.itemact8{
-				width: 11vw;
-				height: 8vw;
-				top: 22vw;
-				left: 56vw;
-				z-index: 17;
-			}
-			 .itemact9{
-			 	width: 11vw;
-			 	height: 9vw;
-			 	top: 23vw;
-			 	left: 63vw;
-			 	z-index: 22;
-			 }
 			
 			.wclik{
-				width: 20vw;
+				width: 22vw;
-				height: 13vw;
+				height: 14vw;
-				top: 15vw;
+				top: 16vw;
-				left: 43vw;
+				left: 44vw;
 				z-index: 47;
 			}
 			
 			.gifs{
-				width: 38vw;
+				width: 41vw;
-				height:19.5vw;
+				height:20vw;
-				top: 19vw;
+				top: 21.6vw;
-				left: 26vw;
+				left: 27.5vw;
 				z-index: 29;
 			}
-			.w11{
+			
-				width: 3vw;
-				height:3vw;
-				top: 22.5vw;
-				left: 58vw;
-				z-index: 35;
-			}
 			.ys{
 					width: 11vw;
 					height: 8vw;
-					top: 22vw;
+					top: 24.2vw;
-					left: 56vw;
+					left: 57.9vw;
 					z-index: 28;
 				}
-			>view{
+				.wareitem1{
-				position: absolute;
+					width: 86vw;
-				&:nth-child(1){
+					height: 44vw;
-					width: 25vw;
+					top: 1vw;
-					height: 19vw;
+					left: 10.5vw;
-					top: 21vw;
-					left: 8vw;
-					z-index: 30;
-				}
-				&:nth-child(2){
-					width: 72vw;
-					height: 36vw;
-					top: 3vw;
-					left: 13.5vw;
 					z-index: 15;
 				}
-				&:nth-child(3){
+				.wareitem4{
-					width: 20vw;
-					height: 13vw;
-					top: 15vw;
-					left: 43vw;
-					z-index: 20;
-				}
-				&:nth-child(4){
-					width: 20vw;
-					height: 14vw;
-					top: 26vw;
-					left: 45vw;
-					z-index: 10;
-				}
-				&:nth-child(5){
 					width: 11vw;
 					height: 7vw;
-					top: 27vw;
+					top: 30.9vw;
-					left: 58vw;
+					left: 60vw;
 				}
-				&:nth-child(6){
+				.wareitem6{
-					width: 11vw;
+					width: 17vw;
-					height: 9vw;
+					height: 12vw;
-					top: 23vw;
+					top: 28vw;
-					left: 63vw;
+					right: -2vw;
-					z-index: 31;
+					z-index: 35;
 				}
-				&:nth-child(7){
+				.wareitem5{
-					width: 15vw;
+					width: 18vw;
-					height: 10vw;
+					height: 15vw;
-					top: 25vw;
+					top: 37vw;
-					left: 80vw;
+					left: 73vw;
+					z-index: 35;
 				} 
-				&:nth-child(8){
+				.wareitem8{
-					width: 16vw;
+					width: 26vw;
-					height: 13vw;
-					top: 31vw;
-					left: 67vw;
-				}
-				
-				&:nth-child(9){
-					width: 25vw;
 					height: 8vw;
-					top: 27vw;
+					top: 29.7vw;
-					left: 19.8vw;
+					left: 21.8vw;
+				}
+				.wareitem11{
+					width: 3vw;
+					height:3vw;
+					top: 24.5vw;
+					left: 60vw;
+					z-index: 35;
+				}
+				.wareitem10{
+					width: 55vw;
+					height: 27vw;
+					top: 38vw;
+					left: 20vw;
+					z-index: 36;
 				}
 				 
+			>view{
+				position: absolute;
 			}
 			
 		}
 			.annotation1{
-				top: 18.2vw;
+				top: 20.5vw;
-				left: 20.5vw;
+				left: 19vw;
 			}
 			.annotation2{
-				top: 12vw;
+				top: 13vw;
-				left: 48vw;
+				left: 47vw;
 			}
 			.annotation3{
-				top: 21vw;
+				top: 23vw;
-				left: 49vw;
+				left: 50vw;
 			}
 			.annotation4{
-				top: 17.5vw;
+				top: 17vw;
-				left: 65vw;
+				left: 68vw;
 			}
 			.annotation5{
-				top: 28vw;
+				top: 32vw;
-				left: 70vw;
+				left: 74vw;
 			}
 			.annotation6{
-				top: 21vw;
+				top: 23vw;
-				left: 83vw;
+				right: 6vw;
 			}
 			// title
 			.annotation {
@@ -386,7 +397,7 @@
 						box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(182,186,196,0.35);
 						border: 2rpx solid #FFFFFF;
 						font-weight: 400;
-						font-size: 1vw;
+						font-size: 1.3vw;
 						color: #333333;
 						display: flex;
 						align-items: center;

pages/Warehouse/procurement.vue

@@ -0,0 +1,73 @@
+<template>
+	<view>
+		<!-- 采购 -->
+		<view class="box">
+			<view class="lefts">
+				<scroll-view   scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
+						<view class="boxitem" v-for="(v,i) in 66" :key='i'></view>
+				</scroll-view>
+			</view>
+			<view class="rights">
+				<view class="shitem">
+					
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	 
+</script>
+
+<style lang="less">
+.box{
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	padding: 4vw 2vw 0;
+	overflow: hidden;
+	.lefts{
+		width: 70vw;
+		height: 100%;
+		margin-left: 1vw;
+		.scroll-Y{
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-wrap: wrap;
+		}
+		.boxitem{
+			width: 22vw;
+			height: 18vw;
+			background: rgba(255,255,255,.7);
+			border-radius: 1.6vw;
+			margin: 0 1.3vw 1.2vw 0;
+			border: 2px dashed #fff;
+			display: inline-block;
+		}
+		.active{
+			border: 2px dashed #017DE9 !important;
+		}
+	}
+	.rights{
+		width: 25vw;
+		height: 100%;
+		.shitem{
+			width: 24.0vw;
+			height: 10.3vw;
+			background: #E8E9ED;
+			border-radius: 1.6vw;
+			padding: 1.8vw;
+			
+		}
+	}
+}
+</style>
+<style>
+	page{
+		background: RGBA(239, 240, 244, 1);
+	}
+</style>

pages/Warehousing/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`">
-		<view class="index-title">
+		<!-- <view class="index-title">
 			<view class="index-title-left">
 				<image class="index-title-left-img" src="/static/index/customer.png" />
 				<view class="index-title-left-font">
@@ -24,9 +24,9 @@
 					生活用品库
 				</view>
 			</view>
-		</view>
+		</view> -->
 		<view class="index-content">
-			<view class="index-content-leftMenus">
+			<!-- <view class="index-content-leftMenus">
 				<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
 					<view class="blue-circle" v-show="index === menuIndex">
 						<image class="blue-circle-size" :src="`/static/index/ray.png`" />
@@ -41,7 +41,7 @@
 						{{item.name}}
 					</view>
 				</view>
-			</view>
+			</view> -->
 			<!-- 首页 -->
 			<storeroomindex :isShow="!menuIndex" />
 			<storeroomorders :isShow="menuIndex===1" />
@@ -61,7 +61,7 @@
 	 
 	// 暗黑模式
 	const darkFans = ref(false);
-	const menuIndex = ref(0);
+	const menuIndex = ref(3);
 	// 删除表格弹窗
 	const detailisopen = ref(false);
 	const detailisopacity = ref(false)