仓库

manifest.json

@@ -2,8 +2,8 @@
     "name" : "护理单元",
     "appid" : "__UNI__FB2D473",
     "description" : "护理单元",
-    "versionName" : "1.6.4",
-    "versionCode" : 164,
+    "versionName" : "1.6.6",
+    "versionCode" : 166,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

pages/Warehouse/procurement.vue

@@ -3,67 +3,464 @@
 		<!-- 采购 -->
 		<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   scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
+						<view class="boxitem" v-for="(v,i) in 66" :key='i' :class="{'yujing':i==1,'active':i==0}">
+							<view>纸尿裤-拉拉裤纸尿裤-拉拉裤</view>
+							<view>规格型号:  800mm*680mm</view>
+							<view>采购单位： 片</view>
+							<view>
+								<view class="carditem" :class="{'hl':i==0,'yl':i==1,'bj':i>=2}">
+									<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill" v-if="i==0"></image>
+									<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill" v-if="i==1"></image>
+									<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill" v-if="i>=2"></image>
+									保洁
+								</view>
+								<view class="znk">
+									<image src="/static/index/warehouse/procurement/znk.png" mode="aspectFill"></image>
+								</view>
+								<view class="num">
+									<view>500</view>
+									<view>库存数量</view>
+								</view>
+							</view>
+						</view>
+						<view style="height: 23vw;"></view>
 				</scroll-view>
+				<view class="mblbg"> </view>
+				<view class="fxj">
+					<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" rightbuttonname="扫描"/>
+				</view>
 			</view>
 			<view class="rights">
 				<view class="shitem">
+					<view class="shypk">
+						<view>生活用品库</view>
+						<view>
+							 
+							 <view class="swsh guodu" :class="shyp?'act':''" @click="switchshyp">
+							 	<view class="guodu"></view>
+							 </view>
+							 <text>
+								 {{shyp?'启用':'停用'}}
+							 </text>
+						</view>
+					</view>
+					<view class="jqry">
+						<view class="left tp">
+							<image src="/static/index/warehouse/procurement/jqr.png" mode="aspectFill"></image>
+						</view>
+						<view class="rigname">
+							<view>李树奎</view>
+							<view>
+								<text>男</text>
+								<text>50岁</text>
+								<text>13358863266</text>
+							</view>
+						</view>
+					</view>
 					
 				</view>
+				<view class="typeitem">
+					<view class="toptype">
+						<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
+					</view>
+					<view class="scroltype">
+						<scroll-view   scroll-y="true" scroll-with-animation 
+						:scroll-top="scroll.scrolltop3" class="scroll-Y"  >
+							<view :class="scroll.act3==i?'act':''" v-for="(v,i) in ['活血化瘀止痛类','通络止痛类']"   @click="typescroll(3,i)">
+								{{v}}
+							</view>
+						</scroll-view>
+						
+						<scroll-view   scroll-y="true" scroll-with-animation
+						:scroll-top="scroll.scrolltop2" class="scroll-Y"  >
+							<view :class="scroll.act2==i?'act':''" v-for="(v,i) in ['液体制剂','中药制剂','中医辩证']"   @click="typescroll(2,i)">
+								{{v}}
+							</view>
+						</scroll-view>
+						
+						<scroll-view   scroll-y="true" scroll-with-animation
+						:scroll-top="scroll.scrolltop1" class="scroll-Y">
+							<view :class="scroll.act1==i?'act':''" 
+							v-for="(v,i) in
+							 ['中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品',
+							 '中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品']"
+								@click="typescroll(1,i)">
+								{{v}}
+							</view>
+						</scroll-view>
+					</view>
+				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
+	import { ref, onMounted, reactive,onBeforeUnmount, computed, nextTick,defineProps } from 'vue';
+	 const navurl = ref('');
+	 const scrolltop = ref(0)
+	 const getblue = ref(false);
+	 const shyp = ref(false);
+	 const scroll = reactive({scrolltop1:0,scrolltop2:0,scrolltop3:0,act1:0,act2:0,act3:0});
 	 
+	 const switchshyp = ( )=>{
+		 shyp.value = shyp.value?false:true;
+	 }
+	const typescroll = (e: number,i: number)=>{
+		 scroll['act'+e] = i;
+		 scroll['scrolltop'+e] = (i -2) * 50;
+		 
+		 console.log(scroll['scrolltop'+e]);
+		 console.log(scroll['act'+e])
+	 }
+	 const movecard = (type : number) => {
+	   console.log(type)
+	   switch (type){
+	   	case 0:
+	 		// 上
+	   		break;
+	   	case 1:
+	 		// →
+	   		break;
+	   	case 2:
+	 		// 下
+	   		break;
+	   	case 3:
+	 		// ←
+	   		break;
+	   	case 4:
+	 		// 扫描
+	 		 
+	   		break;
+	   	case 5:
+	 		// 返回
+	 		uni.navigateBack()
+	   		break;
+	   		
+	   	default:
+	   		break;
+	   }
+	 }
 </script>
 
 <style lang="less">
+	.tp{
+		image{
+			width: 100%;
+			height: 100%;
+		}
+	}
 .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;
-		}
-	}
+	padding: 0vw 2vw 0;
 	.rights{
 		width: 25vw;
-		height: 100%;
+		height:calc(100% - 4vw);
+		margin-top: 4vw;
+		.typeitem{
+			width: 100%;
+			height: 54vh;
+			.scroltype{
+				width: 100%;
+				height:calc(54vh - 2vw);
+				display: flex;
+				justify-content: space-around;
+				.scroll-Y{
+					width: 7vw;
+					height:calc(54vh - 2vw);
+					view{
+						width: 7vw;
+						height: 3.8vw;
+						background: rgba(255,255,255,.5);
+						border-radius: 1.9vw;
+						font-weight: 400;
+						font-size: .9vw;
+						color: #212327;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						padding: 0 1.4vw;
+						margin-bottom: .8vw;
+						text-align: center;
+					}
+					.act{
+						background: rgba(255,255,255,1) !important;
+						color: #0385FA !important;
+					}
+				}
+			}
+			.toptype{
+				width: 100%;
+				height: 2vw;
+				display: flex;
+				justify-content: space-around;
+				margin: .4vw 0 .4vw 0;
+				>view{
+					width: 7vw;
+					height: 1.9vw;
+					background: rgba(255,255,255,.5);
+					border-radius: .9vw;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-weight: 400;
+					font-size: .9vw;
+					color: #333333;
+				}
+			}
+		}
 		.shitem{
 			width: 24.0vw;
 			height: 10.3vw;
 			background: #E8E9ED;
 			border-radius: 1.6vw;
 			padding: 1.8vw;
-			
+			.jqry{
+				width: 100%;
+				display: flex;
+				align-items: center;
+				.left{
+					width: 5vw;
+					height: 5vw;
+				}
+				.rigname{
+					height: 3vw;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-around;
+					&:nth-child(1){
+						font-weight: bold;
+						font-size: 1.4vw;
+						color: #212327;
+					}
+					&:nth-child(2){
+						width: 11vw;
+						font-weight: 400;
+						font-size: 1vw;
+						color: #212327;
+						display: flex;
+						justify-content: space-between;
+					}
+				}
+			}
+			.shypk{
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				view{
+					&:nth-child(1){
+						font-weight: bold;
+						font-size: 1.0vw;
+						color: #333333;
+					}
+					&:nth-child(2){
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						text{
+							font-weight: 400;
+							font-size: .8vw;
+							color: #666666;
+						}
+						.guodu{
+							transition: .4s;
+							-webkit-transform-style: preserve-3d;
+							-webkit-overflow-scrolling: touch;
+						}
+						.swsh{
+							width: 2.7vw;
+							height: 1.5vw;
+							background: #D6D8DC;
+							border-radius: .75vw;
+							border: 1px solid #D6D8DC;
+							padding: 0.2vw;
+							box-sizing: border-box;
+							display: flex;
+							align-items: center;
+							>view{
+								width: 1.1vw;
+								height: 1.1vw;
+								background: #FCFCFD;
+								border-radius: 50%;
+							}
+						}
+						.act{
+							background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
+							border: 1px solid rgba(0, 130, 251, 0.34) !important;
+							padding-left: 1.3vw;
+							
+							view{
+								background: #0385FA;
+								position: absolute;
+							}
+						}
+						
+					}
+				}
+			}
 		}
 	}
+	.lefts{
+		width: 70vw;
+		margin-left: 1vw;
+		height:calc(100%);
+		position: relative;
+		.fxj{
+			width: 23vw;
+			height: 22vw;
+			position: absolute;
+			left: 0;
+			bottom: 2vw;
+			z-index: 11;
+			border-radius: 1.6vw;
+		}
+		.mblbg{
+			width: 23vw;
+			height: 21vw;
+			position: absolute;
+			left: -0.2vw;
+			bottom: 0.5vw;
+			border-radius: 1.6vw;
+			  filter: blur(15rpx);
+			background: RGBA(239, 240, 244, 1);
+			z-index: 10;
+		}
+		.scroll-Y{
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			.boxitem{
+				&:nth-child(1),&:nth-child(2),&:nth-child(3){
+					margin-top: 4vw;
+				}
+			}
+		}
+		.boxitem{
+			width: 22vw;
+			height: 19.3vw;
+			background: rgba(255,255,255,.7);
+			border-radius: 1.6vw;
+			margin: 0 1.3vw 1.2vw 0;
+			border: 2px dashed #fff;
+			display: inline-block;
+			padding: 2.3vw;
+			position: relative;
+			>view{
+				.hl{
+					color: #0385FA;
+					background: #E7F0FB;
+				}
+				.yl{
+					background:#DCF6F3;
+					color: #00C6A9;
+				}
+				.bj{
+					background: #E9EBFC;
+					color: #727BFF;
+				}
+				
+				
+				>&:nth-child(1){
+					font-weight: bold;
+					font-size: 1.3vw;
+					color: #212327;
+				}
+				>&:nth-child(2){
+					font-weight: 400;
+					font-size: 10rpx;
+					color: #555555;
+					margin-top: .9vw;
+				}
+				>&:nth-child(3){
+					font-weight: 400;
+					font-size: 10rpx;
+					color: #666666;
+					margin-top: .6vw;
+				}
+				>&:nth-child(4){
+					width: 100%;
+					height: 10vw;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					
+				}
+				.num{
+					position: absolute;
+					bottom: 2vw;
+					left: 2.5vw;
+					display: flex;
+					flex-direction: column;
+					view{
+						&:nth-child(1){
+							font-weight: bold;
+							font-size: 2.2vw;
+							color: #333333;
+							margin-bottom: .6vw;
+						}
+						&:nth-child(2){
+							font-weight: 400;
+							font-size: .9vw;
+							color: #999999;
+						}
+					}
+					
+				}
+				.znk{
+					width: 12vw;
+					height: 11.5vw;
+					position: absolute;
+					right: 0;
+					bottom: 0;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.carditem{
+					width: 5.8vw;
+					height: 2.1vw;
+					border-radius: 1.0vw;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-weight: 400;
+					font-size: .9vw;
+					margin-top: .8vw;
+					image{
+						width: 1.4vw;
+						height: 1.4vw;
+					}
+				}
+			}
+		}
+		.yujing{
+			background:rgba(255, 87, 87, 0.095);
+			border: 2px solid rgba(255, 102, 107, 0.51) !important;
+			box-shadow: 0 0 8px rgba(255, 102, 107, 0.51);
+			view{
+				.num{
+					view{
+						&:nth-child(1){
+							color: #FF5757 !important;
+						}
+					}
+					
+				}
+			}
+		}
+		.active{
+			border: 2px dashed #017DE9 !important;
+		}
+	}
+	
 }
 </style>
 <style>