FE-lab-xcx/pages_manage/views/accessControl/searchSub.vue

<template>
	<view id="searchSub">
		<view class="top-max-big-box">
			<view class="search-box">
				<img class="img-view" :src="imagesUrl('commonality/icon_aqjc_ss.png')">
				<input type="text" v-model="searchValue" placeholder="实验室名称" maxlength="20">
				<view class="button-view" @click="searchButton()">搜索</view>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="list">
			<view class="for-sub-box" v-for="(item,index) in dataList" :key="index">
				<view class="for-text-box">{{item.subName}}{{item.roomNum?'('+item.roomNum+')':''}}</view>
				<view class="for-right-button" @click="checkSub(item)">
					<view></view>
					<view>选择</view>
					<view></view>
				</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
			<view class="get-data-null-p" v-else="getDataType">- 滑动加载更多 -</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		systemSubjectGetAppSubjectByLogin
	} from '@/pages_manage/api/index.js'
	export default {
		data() {
			return {
				searchValue:'',
				getDataType: false,
				getData: {
					page: 1,
					pageSize: 20,
				},
				dataList: [],
				total: 0,
			}
		},
		onLoad(option) {
			// if(option.subName){
			// 	//有查询过
			// 	this.$set(this,'data1',option.subName);
			// 	this.scrollGet();
			// }else{
			// 	//无查询过
			// 	this.scrollGet();
			// }
		},
		onShow() {

		},
		mounted() {
			this.getList();
		},
		methods: {
			//选择实验室
			checkSub(item){
				uni.setStorageSync('searchSubData', JSON.stringify(item));
				uni.navigateBack();
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.getData.pageSize <= self.getData.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.getData.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取实验室
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.getData))
				obj.searchValue = this.searchValue
				const {
					data
				} = await systemSubjectGetAppSubjectByLogin(obj);
				if (data.code == 200) {
					if (self.getData.page == 1) {
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.getData.pageSize <= self.getData.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.getData.pageSize <= self.getData.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},

			// 搜索按钮
			searchButton() {
				this.$set(this.getData,'page',1);
				this.getList();
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#searchSub {
		height: 100%;
		display flex;
		flex-direction column;

		.top-max-big-box {
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.search-box {
				width: 690rpx;
				height: 78rpx;
				border: 1rpx solid #E0E0E0;
				border-radius: 50rpx;
				display: flex;

				.img-view {
					display: inline-block;
					margin: 27rpx 17rpx 0 37rpx;
					width: 26rpx;
					height: 26rpx;
				}

				input {
					height: 78rpx;
					line-height: 78rpx;
					flex: 1;
					font-size: 24rpx;
				}

				.button-view {
					width: 100rpx;
					line-height: 78rpx;
					text-align: center;
					font-size: 24rpx;
					color: #0183FA;
				}
			}
		}

		.list {
			flex: 1;
			overflow-y scroll;
			padding: 0 30rpx;
			box-sizing: border-box;
			padding-bottom: 160rpx;
			margin-top:20rpx;
			background-color: #fff;
			.for-sub-box{
				display: flex;
				border-bottom: 1rpx dashed #E0E0E0;
				.for-text-box{
					flex:1;
					line-height:42rpx;
					padding:40rpx 0 40rpx 0;
				}
				.for-right-button{
					width:100rpx;
					display: flex;
					flex-direction: column;
					view:nth-child(1){
						flex:1;
					}
					view:nth-child(2){
						line-height:42rpx;
						text-align: right;
						color:#0183FA;
						font-size:28rpx;
					}
					view:nth-child(3){
						flex:1;
					}
				}
			}
			.get-data-null-p {
				text-align: center;
				line-height: 100rpx;
				padding-bottom: 80px;
				color: #999;
			}
		}
	}
</style>