v3-lab-xcx/pages/views/pages_patrolInspector/chemicalCabinetQRcode.vue

<!-- 化学品柜-扫码 -->
<template>
  <view class="course">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="header">
			<view class="header_l">
				<img  :src="circularLogo">
			</view>
			<view class="header_r">
				<view class="header_r_t">{{infoData.cabinetName}}</view>
				<view class="header_r_b">规格：{{infoData.cabinetNorms}}门</view>
			</view>
		</view>
		<view  class="basics">
			<view class="basics_li">
				<view class="basics_li_l">学院：</view>
				<view class="basics_li_r">{{infoData.deptName}}</view>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">楼栋：</view>
				<view class="basics_li_r">{{infoData.buildName?infoData.buildName:'-'}}</view>
			</view>
			<view class="basics_li" style="border: none;">
				<view class="basics_li_l">实验室：</view>
				<view class="basics_li_r">{{infoData.subName?infoData.subName:'-'}}</view>
			</view>
		</view>
		<view class="cabinet_y">
			<view class="cabinet">
				<view class="cabinet_t" @click="handleClick('door')"><view></view><view>{{infoData.cabinetName}}</view></view>
				<view class="cabinet_b">
					<view class="cabinet_l"> 
						<view class="cabinet_l_li" v-for="(item,index) in infoData.leftList" :key="index">
							<view class="cabinet_l_li_t">{{item.doorName}}</view>
							<view class="cabinet_l_li_m">数 量：{{item.chemicalNum}}</view>
							<view class="cabinet_l_li_b">
								<view class="cabinet_l_li_b_l">管理员：</view>
								<view class="cabinet_l_li_b_r">
									<view v-for="(item2,index2) in item.cabinetAdminModelList" :key="index2">{{item2.userName}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cabinet_r">
						<view class="cabinet_l_li" v-for="(item,index) in infoData.rightList" :key="index">
							<view class="cabinet_l_li_t">{{item.doorName}}</view>
							<view class="cabinet_l_li_m">数 量：{{item.chemicalNum}}</view>
							<view class="cabinet_l_li_b">
								<view class="cabinet_l_li_b_l">管理员：</view>
								<view class="cabinet_l_li_b_r">
									<view v-for="(item2,index2) in item.cabinetAdminModelList" :key="index2">{{item2.userName}}</view>
								</view>
							</view>
						</view>
					</view>
					<img v-if="infoData.cabinetDoorModelList.length==1" class="left-handle" src="@/pages/images/handle-icon.png">
					<img v-if="infoData.cabinetDoorModelList.length<=2" class="right-handle" src="@/pages/images/handle-icon.png">
				</view>
			</view>
		</view>
	</scroll-view>
  </view>
</template>

<script>
import { config } from '@/api/request/config.js'
import {chemicalAppletCabinetDetail} from '@/pages/api/index.js'
export default {
  name: "rectifyList",
  components: {

  },
  data() {
    return {
		circularLogo:uni.getStorageSync('circularLogo'),
		baseUrl:config.base_url,
		pageType:0,
		form:{
		},
		id:'',//化学品柜id
		infoData:{
			cabinetDoorModelList:[],
		},
	}
  },
  onLoad(option) {
	this.id=option.code;
  },
  onShow() {

  },
  mounted(){
	  this.chemicalAppletCabinetDetail();
  },
  methods: {
		//滚动事件
		scrollGet(){},
	    handleClick(doType){
		  let self=this;
		  if(doType=='door'){
			 uni.navigateTo({
			     url: '/pages/views/pages_patrolInspector/chemicalCatalogue'
			 });
		  }
	    },
		//详情
		async chemicalAppletCabinetDetail(){
			let _this = this;
			const {data} = await chemicalAppletCabinetDetail({cabinetId:this.id});
			if(data.code == 200){
				let leftList=[];
				let rightList=[];
				if(data.data.cabinetDoorModelList.length<=2){
					for(let i=0;i<data.data.cabinetDoorModelList.length;i++){
						leftList.push(data.data.cabinetDoorModelList[i])
					}
				}
				if(data.data.cabinetDoorModelList.length>2){
					for(let i=0;i<data.data.cabinetDoorModelList.length;i++){
						if(i%2==0){
							leftList.push(data.data.cabinetDoorModelList[i])
						}else{
							rightList.push(data.data.cabinetDoorModelList[i])
						}
					}
					
				}
				data.data.leftList=leftList;
				data.data.rightList=rightList;
				this.$set(this, 'infoData', data.data);
			}
		},
  }
}
</script>

<style lang="stylus" scoped>
.course{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
	}
	.header{
		width: 750rpx;
		min-height: 275rpx;
		background: #0096F3;
		display: flex;
		justify-content: flex-start;
		.header_l{
			width: 150rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 75rpx;
			margin:62rpx 40rpx 62rpx 30rpx;
			>img{
				width: 150rpx;
				height: 150rpx;
			}

		}
		.header_r{
			.header_r_t{
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48rpx;
				margin-top: 68rpx;
			}
			.header_r_b{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 42rpx;
				margin-top: 36rpx;
				margin-bottom: 20rpx;

			}
		}
	}
	.basics{
		width: 750rpx;
		background: #FFFFFF;
		padding: 30rpx 30rpx 0rpx;
		box-sizing: border-box;
		.basics_li{
			width: 690rpx;
			height: auto;
			border-bottom: 1rpx solid #D8D8D8;
			padding: 20rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.basics_li_l{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
			.basics_li_r{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				text-align: right;
			}
		}

	}
	.cabinet_y{
		width: 750rpx;
		background: #FFFFFF;
		padding: 40rpx 125rpx 78rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.cabinet{
			position: relative;
			width: 500rpx;
			height: 650rpx;
			background: url("@/pages/images/doors-icon.png")  no-repeat center 0px;
			background-position: center 0px;
			background-size: cover;
			padding: 12rpx 16rpx 0;
			box-sizing: border-box;
			.cabinet_t{
				height: 86rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view:nth-of-type(1){
					width: 24rpx;
					height: 24rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-right: 16rpx;
					margin-left: 26rpx;
				}
				>view:nth-of-type(2){
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 43rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}	
			.cabinet_b{
				display: flex;
				justify-content: flex-start;
				.cabinet_l{
					height: 516rpx;
					padding: 40rpx 0 0 24rpx;
					box-sizing: border-box;
					overflow-y: auto;
					.cabinet_l_li{
						width: 198rpx;
						padding: 0 20rpx 16rpx;
						box-sizing: border-box;
						background: rgba(255,255,255,0.2);
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						.cabinet_l_li_t{
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 60rpx;
							text-align: center;
							border-bottom: 2rpx solid #FFFFFF;
						}
						.cabinet_l_li_m{
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 29rpx;
							margin-top: 26rpx;
						}
						.cabinet_l_li_b{
							display: flex;
							justify-content: flex-start;
							margin-top: 22rpx;
							.cabinet_l_li_b_l{
								font-weight: 400;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 29rpx;
							}
							.cabinet_l_li_b_r{
								>view{
									font-weight: 400;
									font-size: 20rpx;
									color: #FFFFFF;
									line-height: 29rpx;
									margin-bottom: 10rpx;
								}
							}
						}
					}
				}
				.cabinet_r{
					height: 516rpx;
					padding: 40rpx 0 0 24rpx;
					box-sizing: border-box;
					overflow-y: auto;
					.cabinet_l_li{
						width: 198rpx;
						padding: 0 20rpx 16rpx;
						box-sizing: border-box;
						background: rgba(255,255,255,0.2);
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						.cabinet_l_li_t{
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 60rpx;
							text-align: center;
							border-bottom: 2rpx solid #FFFFFF;
						}
						.cabinet_l_li_m{
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 29rpx;
							margin-top: 26rpx;
						}
						.cabinet_l_li_b{
							display: flex;
							justify-content: flex-start;
							margin-top: 22rpx;
							.cabinet_l_li_b_l{
								font-weight: 400;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 29rpx;
							}
							.cabinet_l_li_b_r{
								>view{
									font-weight: 400;
									font-size: 20rpx;
									color: #FFFFFF;
									line-height: 29rpx;
									margin-bottom: 10rpx;
								}
							}
						}
					}
				}
						
			}
			.left-handle{
				width: 26rpx;
				height: 100rpx;
				position: absolute;
				left: 210rpx;
				top: 274rpx;
			}
			.right-handle{
				width: 26rpx;
				height: 100rpx;
				position: absolute;
				left: 262rpx;
				top: 274rpx;
			}
		}
	}
}

</style>