weapp-online/pages/sign_up_list/sign_up_list.vue

<template>
	<view class="list">
		<view class="top">
			<view class="search flexB">
				<view class="search_con flexB">
					<view class="flexS search_inp">
						<image src="../../static/imgs/search1.png"></image>
						<input type="text" value="" placeholder="请输入代理昵称或手机号查询" v-model="params.search_name" @input="clear" />
					</view>
					<view class="search_btn" @click="getEnroll">搜索</view>
				</view>
			</view>
			<view class="change flexB">
				<view class="flexS left">
					<picker :range="state" :value="index" @change="changeState($event)" :range-key="'name'">
						<view class="picker flexS">
							<view class="picker_state">{{ state[index].name ? state[index].name : '已签到' }}</view>
							<view class="state flexC">{{ total ? total : 0 }}</view>
							<text class="iconfont iconxiajiantou"></text>
						</view>
					</picker>
				</view>
				<view class="right flexS">
					<view class="flexCC" @click="sort">
						<image src="../../static/imgs/up.png" v-if="sortState"></image>
						<image src="../../static/imgs/down.png" v-else></image>
					</view>
				</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" @click="skipDetail(item.user)">
						<view class="list_left flexS">
							<image :src="item.user.avatar"></image>
							<text style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:555rpx;">{{ item.user.nickname }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getSignDetail } from '../../api/sign.js';
export default {
	data() {
		return {
			state: [
				{
					id: 1,
					name: '有效报名'
				},
				{
					id: 2,
					name: '已签到'
				},
				{
					id: 3,
					name: '未签到'
				},
				{
					id: 4,
					name: '已退款'
				}
			],
			signList: [], //报名列表
			params: {
				page_size: 20,
				page_index: 1,
				type: 2, //1表示有效报名，2表示已签到，3表示未签到，4表示已退款
				sort: 'desc', //desc倒序（默认），asc正序
				search_name: ''
			},
			index: '',
			sortState: false,
			total: '', //总条数
			pages: '' //总页数
		};
	},
	onShow() {
		this.getEnroll();
	},
	methods: {
		//清除输入内容时重新加载列表
		clear(e) {
			if (!this.params.search_name) {
				this.getEnroll();
			}
		},
		search() {
			this.getEnroll();
		},
		skipDetail(user) {
			uni.navigateTo({
				url: '../sign_up_detail/sign_up_detail?id=' + user.id + '&sex=' + user.sex + '&phone=' + user.phone + '&avatar=' + user.avatar + '&nickname=' + user.nickname
			});
		},
		sort() {
			this.sortState = !this.sortState;
			if (this.params.sort == 'desc') {
				this.params.sort = 'asc';
				this.getEnroll();
				return false;
			}
			if (this.params.sort == 'asc') {
				this.params.sort = 'desc';
				this.getEnroll();
			}
		},
		/*
		 * 根据条件筛选列表
		 */
		changeState(e) {
			this.index = e.detail.value;
			let id = Number(this.index) + 1;
			this.params.type = id;
			this.getEnroll();
		},
		getEnroll() {
			this.params.page_index = 1;
			let { page_size, page_index, type, sort, search_name } = this.params;
			getSignDetail({
				page_size,
				page_index,
				type,
				sort,
				search_name
			}).then(res => {
				if (res.code == 200) {
					this.total = res.data.total;
					this.pages = Math.ceil(res.data.total / this.params.page_size);
					if (res.data.list.length > 0) {
						this.signList = res.data.list;
					} else {
						wx.showToast({
							title: '暂无数据',
							icon: 'none'
						});
						this.signList = '';
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		//上拉加载更多
		more() {
			if (this.params.page_index > this.pages) {
				uni.showToast({
					title: '没有更多啦~',
					icon: 'none'
				});
				return false;
			}
			this.params.page_index++;
			let { page_size, type, sort, search_name, page_index } = this.params;
			getSignDetail({
				page_size,
				page_index,
				type,
				sort,
				search_name
			}).then(res => {
				if (res.code == 200) {
					this.signList = this.signList.concat(res.data.list);
				} 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%;
	height: 20vh;
	box-sizing: border-box;
	background: #f9f9f9;
	.search {
		width: 100%;
		border: 1rpx solid #f9f9f9;
		background-color: #fff;
		.search_con {
			width: 690rpx;
			margin: 0 auto;
			height: 120rpx;
			.search_inp {
				width: 580rpx;
				height: 72rpx;
				background-color: #f9f9f9;
				border-radius: 36rpx;
				image {
					height: 32rpx;
					width: 30rpx;
					margin: 0 15rpx;
				}
			}
		}
		.search_btn {
			font-size: 32rpx;
			color: #333;
		}
	}
	.change {
		background-color: #fff;
		height: 100rpx;
		margin-bottom: 24rpx;
		.left {
			width: 90%;
			picker {
				width: 100%;
				.picker {
					.picker_state {
						padding-left: 25rpx;
						height: 100rpx;
						width: 100%;
						line-height: 100rpx;
					}
				}
				.state {
					height: 36rpx;
					background-color: #08b25a;
					margin: 5rpx 15rpx 0 20rpx;
					padding: 0 15rpx;
					border-radius: 18rpx;
					color: #fff;
					font-size: 24rpx;
				}
			}
		}

		.right {
			view {
				width: 100rpx;
				height: 99rpx;
				image {
					width: 24rpx;
					height: 34rpx;
					vertical-align: middle;
				}
			}
		}
	}
}
.scroll {
	height: 80vh;
	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 #f9f9f9;
		background: #fff;
		height: 120rpx;
		.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>