weapp-online/pages/search/search.vue

<template>
	<view class="list">
		<view class="top">
			<view class="search_con flexB">
				<view class="flexS search_inp">
					<text class="iconfont iconsousuo"></text>
					<input type="text" v-model="params.search_name" placeholder="请输入代理姓名或手机号查询" />
				</view>
				<view class="search" @click="getEnroll">搜索</view>
			</view>
		</view>
		<view class="scroll">
			<scroll-view scroll-y="true" @scrolltolower="more()">
				<view class="scroll_con">
					<view class="sign_list flexB" v-for="item in signList" :key="item.id">
						<view class="list_left flexS">
							<image :src="item.avatar"></image>
							<view>
								<text>{{ item.nickname }}</text>
								<view>{{ item.created_at }}</view>
							</view>
						</view>
						<view class="list_right">报名成功</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { enrollList } from '../../api/sign.js';
export default {
	data() {
		return {
			signList: [], //报名列表
			params: {
				page_size: 10,
				page_index: 1,
				type: 'all',
				order: '',
				search_name: ''
			}
		};
	},
	methods: {
		/*获取已报名的列表
		 *@params search_name 搜索内容
		 *@params page_size 当前显示条数
		 *@params page_index 当前显示页数
		 *@params type  传空值即可
		 *@params order 传空值即可
		 */
		getEnroll() {
			if (!this.params.search_name) {
				uni.showModal({
					content: '请输入代理姓名或手机号查询',
					showCancel: false
				});
				return false;
			}
			this.params.page_index = 1;
			let { page_size, page_index, type, order, search_name } = this.params;
			enrollList({
				page_size,
				page_index,
				type,
				order,
				search_name
			}).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.signList = res.data.list;
					} else {
						wx.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		//上拉加载更多
		more() {
			this.params.page_index++;
			let { page_size, type, order, search_name, page_index } = this.params;
			enrollList({
				page_size,
				page_index,
				type,
				order,
				search_name
			}).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.signList = this.signList.concat(res.data.list);
					} else {
						uni.showModal({
							content: '没有更多啦~',
							showCancel: false
						});
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>
<style>
page {
	height: 100%;
	width: 100%;
	background: #fff;
}
</style>
<style lang="scss">
.list {
	width: 100%;
	min-height: 100%;
	position: relative;
}
.top {
	width: 100%;
	// position: absolute;
	// top: 15rpx;
	// left: 0;
	// z-index: 9999;
	height: 10vh;
	padding: 15rpx 0;
	box-sizing: border-box;
	.search_con {
		width: 95%;
		margin: 0 auto;
	}
	.search_inp {
		width: 600rpx;
		height: 88rpx;
		background-color: #f2f4f5;
		border-radius: 44rpx;
		.iconfont {
			font-size: 45rpx;
			color: #999;
			margin: 0 21rpx 0 36rpx;
		}
	}
	.search {
		font-size: 36rpx;
		color: #333;
	}
}

.scroll {
	height: 90vh;
	background: #fff;
	// margin-top: 20rpx;
	// padding-top:120rpx;
	scroll-view {
		height: 100%;
	}
	.scroll_con {
		// padding-bottom:20rpx;
	}
	.sign_list {
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #fcfcfc;
		background: #fff;
		height: 106rpx;
		.list_left {
			image {
				height: 88rpx;
				width: 88rpx;
				border-radius: 50%;
				margin-right: 22rpx;
			}
			view {
				text {
					font-size: 32rpx;
					color: #333;
				}
				view {
					color: #666;
					font-size: 28rpx;
					margin-top: 15rpx;
				}
			}
		}
		.list_right {
			font-size: 32rpx;
			color: #999;
		}
	}
}
</style>