student_search.vue 2.8 KB
<template>
	<view class="entrance_info">
		<view class="tel_index_bg"></view>
		<view class="entrance_info-main">
			<view class="stu_search">
				<u-icon name="search" size="30" color="#659ff5"></u-icon>
				<input v-model="keywords" confirm-type="search" @confirm="confirm" class="stu_search-input" type="text"
					placeholder="搜索姓名" placeholder-style="color: #428DFE">
			</view>	
			<view class="stu_num">
				<image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image>
				<text class="stu_num-text">共{{ total }}人</text>
				<image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image>
			</view>
			<scroll-view :scroll-y="true" class="list-h" @scrolltolower="getData">
				<view class="entrance_info-main-l" v-if="dataList.length">
					<list-item v-for="item in dataList" :info="item" :key="item" @click.native="selected(item)"/>
				</view>
				<u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" ></u-empty>
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	import ListItem from "./components/ListItem/index.vue"
	export default {
		components: {
			ListItem
		},
		data() {
			return {
				keywords: '',
				page: 1,
				dataList: [],
				total: 0
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			selected(item) {
				uni.$emit('selected_student', item)
				uni.navigateBack({
					delta: 1
				})
			},
			getData() {
				var datas = {
					search: this.keywords,
					page: this.page,
					limit: 20
				}
				var jkurl = '/admin/user_list'
				
				this.$service.P_post(jkurl, datas).then(res => {
					this.total = res.data.total
					if(this.dataList.length < this.total) {
						if(this.page === 1) {
							this.dataList = res.data.data
						} else {
							this.dataList.push(...res.data.data)
						}
						this.page++
					}
				})
			},
			confirm() {
				this.page = 1
				this.dataList = []
				this.total = 0
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
.entrance_info{
	.tel_index_bg{
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		min-height: 220rpx;
		background: linear-gradient(0deg, #f8f8f8 0%, #ffffff 25%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
	}
	.stu_search {
		background-color: rgba(#fff, 0.4);
		height: 68rpx;
		display: flex;
		border-radius: 200rpx;
		align-items: center;
		padding: 0 20rpx;
	
		.stu_search-input {
			flex-grow: 1;
		}
	}
	.stu_num {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 30rox;
		color: #477FF6;
		justify-content: center;
	
		.stu_num-icon {
			height: 12rpx;
			width: 50rpx;
		}
	
		.stu_num-text {
			color: #477FF6;
			margin: 0 20rpx;
		}
	}
	.entrance_info-main{
		position: relative;
		z-index: 1;
		padding: 15rpx 25rpx;
		.list-h{
			height: calc(100vh - 242rpx);
		}
	}
}
</style>