FE-lab-xcx/pages_supplierCylinderManagement/views/gasCylinderManagement/selectLab.vue

<!-- 选择实验室 -->
<template>
	<view id="gasCylinderSelectLab">
		<view class="top-input-max-box">
			<view class="input-box">
				<uni-icons type="search" class="icon-box" color="#7C7C7C" size="25"></uni-icons>
				<input class="uni-input input-min" confirm-type="search" @confirm="getList()"
					v-model="inputData" maxlength="20" placeholder="搜索实验室" />	
			</view>
			<view class="picker-box">
				<picker @change="bindPickerChangeA" :value="indexA" :range="arrayA">
					<view class="picker-min-box">
						<view>{{indexA==null?'学院':arrayA[indexA]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker>
				<picker @change="bindPickerChangeB" :value="indexB" :range="arrayB">
					<view class="picker-min-box">
						<view>{{indexB==null?'楼栋':arrayB[indexB]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker>
				<picker @change="bindPickerChangeC" :value="indexC" :range="arrayC">
					<view class="picker-min-box">
						<view>{{indexC==null?'楼层':arrayC[indexC]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<view class="content-box">
			<view class="null-p" v-if="!dataList[0]">暂无数据</view>
			<view class="for-max-big-box" @click="checkButton(item)"
			v-for="(item,index) in dataList" :key="index">
				<view class="for-title-box">
					<view>实验室名称：</view>
					<view>{{item.data1}}</view>
				</view>
				<view class="for-text-box">
					<view>楼栋：</view>
					<view>{{item.data2}}</view>
				</view>
				<view class="for-text-box">
					<view>楼层：</view>
					<view>{{item.data3}}</view>
				</view>
				<view class="for-text-box">
					<view>房间号：</view>
					<view>{{item.data4}}</view>
				</view>
			</view>
		</view>
		<uni-icons class="sao-code-box" type="scan" color="#fff" size="25"></uni-icons>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromPage:'',
				inputData:'',
				arrayA:[],
				indexA:null,
				arrayB:[],
				indexB:null,
				arrayC:[],
				indexC:null,
				dataList:[
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
					{
						data1:'实验室A',
						data2:'名义楼',
						data3:'8L',
						data4:'803',
					},
				],
			}
		},
		onLoad(options) {
			this.fromPage = options.from;
		},
		onShow() {

		},

		methods: {
			bindPickerChangeA(e) {
				this.indexA = e.detail.value
			},
			bindPickerChangeB(e) {
				this.indexB = e.detail.value
			},
			bindPickerChangeC(e) {
				this.indexC = e.detail.value
			},
			getList(){
				
			},
			checkButton(item){
				if(this.fromPage == 1){
					uni.redirectTo({
						url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/inbound?form='+encodeURIComponent(JSON.stringify(item))+'&pageType=2'
					});
				}else if(this.fromPage == 2){
					uni.redirectTo({
						url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/outbound?form='+encodeURIComponent(JSON.stringify(item))+'&pageType=2'
					});
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#gasCylinderSelectLab {
		height: 100%;
		width: 100%;
		display flex ;
		flex-direction column;
		overflow: hidden;
		position: relative;
		.top-input-max-box{
			background-color: #fff;
			.input-box{
				display: flex;
				border-radius:40rpx;
				background-color: #D4D4D4;
				margin:20rpx 20rpx 0 20rpx;
				color:#7C7C7C;
				.icon-box{
					margin:15rpx;
				}
				.input-min{
					height:80rpx;
					line-height:80rpx;
					flex:1;
				}
			}
			.picker-box{
					display: flex;
				.picker-min-box{
					height:80rpx;
					line-height:80rpx;
					display: flex;
					padding:0 30rpx;
					.icon-box{
						margin-left:10rpx;
					}
				}
			}
		}
		.content-box{
			flex:1;
			display flex ;
			flex-direction column;
			overflow: scroll
			padding-bottom:200rpx;
			.null-p{
				text-align: center;
				line-height:300rpx;
				color:#999;
			}
			.for-max-big-box{
				padding:20rpx 30rpx;
				background-color: #fff;
				border-radius:10rpx;
				margin:25rpx 25rpx 0;
				.for-title-box{
					display: flex;
					margin-bottom:20rpx;
					view{
						padding-bottom:20rpx;
						line-height: 60rpx
						border-bottom:1rpx solid #dedede;
						font-weight:700;
					}
					view:nth-child(1){
						color:#666666;
					}
					view:nth-child(2){
						flex:1;
						text-align: right;
					}
				}
				.for-text-box{
					display: flex;
					view{
						line-height: 60rpx
						font-weight:700;
					}
					view:nth-child(1){
						color:#666666;
					}
					view:nth-child(2){
						flex:1;
						text-align: right;
					}
				}
			}
		}
		.sao-code-box{
			width:100rpx;
			height:100rpx;
			line-height:100rpx;
			text-align: center;
			background-color: #266FFF;
			border-radius:50%;
			position: absolute;
			bottom:60rpx;
			left:50%;
			margin-left:-50rpx;
		}
	}
</style>