weapp/pages/challengeChoose/challengeChoose.vue

<template>
	<view class="challenge-choose-container">
		<view class="search-top">
			<view class="input-left">
				<input
					v-model="phone"
					type="text"
					class="input-body"
					placeholder="请输入代理昵称或手机号"
				/>
				<view v-if="phone" class="clear" @click="phone = ''"></view>
			</view>
			<view class="right-btn" @click="toSearch">查询</view>
		</view>
		<scroll-view class="user-list" scroll-y="true" @scrolltolower="toMore">
			<template v-if="list.length > 0">
				<view
					v-for="(item, index) in list"
					:key="index"
					class="user-item"
				>
					<view
						class="user-avatar"
						:style="{ backgroundImage: `url(${item.avatar})` }"
					/>
					<view class="user-info">
						<view class="user-name">{{ item.nickname.slice(0,6) }}</view>
						<view class="user-score">学分：{{ item.integral }}</view>
					</view>
					<view class="btn" @click="choose(item)">挑战</view>
				</view>
			</template>
			<template v-if="!isMore">
				<view class="noTip">没有更多了</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import { api_getCrown } from '@/api.js'
	export default {
		data() {
			return {
				pageTitle: '选择代理',
				scrollViewHeight: 0,
				list: [],
				phone: '',
				searchParams: {
					page_index: 1,
					search_content: ''
				},
				isMore: true
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			toSearch() {
				this.searchParams.search_content = this.phone
				this.searchParams.page_index = 1
				this.list = []
				this.getList()
			},
			toMore() {
				if(!this.isMore) return false
				this.searchParams.page_index += 1
				this.getList()
			},
			getList() {
				uni.loading()
				let { page_index, search_content } = this.searchParams
				this.$ajax.get(`${api_getCrown}?page_index=${page_index}&search_content=${search_content}` ).then(([, { data: { data: { list }}}]) => {
					uni.hideLoading()
					if(list.length < 20) {
						this.isMore = false
					}
					this.list = [...this.list, ...list]
				})
			},
			choose({ id, nickname, avatar }) {
				uni.pkInfo = {
					accept_id: id,
					accept_avatar: avatar,
					accept_nickname: nickname,
				}
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		.challenge-choose-container {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.search-top {
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				background-color: #FFFFFF;
				.input-left {
					flex: 1;
					overflow: hidden;
					height: 80rpx;
					border-radius: 80rpx;
					border: 1px solid #CCCCCC;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&::before {
						content: "";
						display: block;
						width: 40rpx;
						height: 40rpx;
						background: url(../../static/new_challenge/search.png) center no-repeat;
						background-size: 100%;
					}
					.clear {
						width: 32rpx;
						height: 32rpx;
						background: url(../../static/new_challenge/error.png) center no-repeat;
						background-size: 100%;
					}
					.input-body {
						flex: 1;
						overflow: hidden;
						margin: 0 10rpx;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
				.right-btn {
					width: 124rpx;
					height: 64rpx;
					border-radius: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
					color: #FFFFFF;
					font-size: 28rpx;
					margin-left: 30rpx;
				}
			}
			.user-list {
				flex: 1;
				overflow: hidden;
				background-color: #F9F9FB;
				.user-item {
					width: calc(100% - 60rpx);
					margin: 0 auto 30rpx auto;
					&:nth-of-type(1) {
						margin-top: 30rpx;
					}
					padding: 30rpx;
					border-radius: 24rpx;
					background-color: #FFFFFF;
					display: flex;
					align-items: stretch;
					justify-content: flex-start;
					.user-avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						background-color: #EEEEEE;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 100%;
						margin-right: 20rpx;
					}
					.user-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.user-name {
							color: #333333;
							font-size: 32rpx;
							font-weight: bold;
							line-height: 44rpx;
						}
						.user-score {
							color: #EA4A41;
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}
					.btn {
						width: 192rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						border-radius: 68rpx;
						background: linear-gradient(141deg, #F97C55 0%, #F44545 100%);
						color: #FFFFFF;
						font-size: 28rpx;
						margin-left: auto;
						align-self: center;
					}
				}
				.noTip {
					width: 100%;
					padding: 20rpx;
					text-align: center;
					color: #999999;
				}
			}
		}
	}
</style>