web-app-v1/pages/scanQR/belong.vue

<template>
	<view>
		<view class="topt">
			<view class="search_con">
				<view class="search_inp">
					<view class="flex">
						<image src="../../static/fangwei/search.png" mode="widthFix"
							style="width: 40rpx;margin-right: 10rpx;"></image>
						<input type="text" v-model="params.search_name" placeholder="输入昵称或手机号" style="width: 370rpx;" />
					</view>
					<view class="search" @click="getEnroll">查询</view>
				</view>
			</view>
		</view>
		<view style="padding: 130rpx 0;">
			<view :class="active == index? 'botRed' : 'bot'" v-for="(item,index) in teamList" :key="index"
				@click="active = index">
				<view class="botLeft">
					<view class="img">
						<image :src="item.avatar" mode="widthFix" style="width: 68rpx;"></image>
					</view>
					<view class="right">
						<view class="right_top">
							<text>{{ getName(item.nickname) }}</text>
							{{ item.phone }}
						</view>
					</view>
				</view>
				<view :class="active == index? 'botRightRed' : 'botRight'">
					<view v-if="active == index" style="color: #FB231F;">
						✔
					</view>
				</view>
			</view>
		</view>

		<view class="fixedBot" @click="goDetail">
			<view class="fixedBot_btn">
				确定
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getLower
	} from '../../apis/fangwei.js';
	export default {
		data() {
			return {
				active: -1,
				params: {
					page: 1,
					search_name: ''
				},
				totalPage: 0,
				teamList: []
			}
		},
		onLoad() {
			this.getLowerAll()
		},
		onReachBottom: function() {
			this.more();
		},
		methods: {
			getName(name) {
				if (name) {
					return name.length > 9 ? name.slice(0, 9) + '...' : name;
				}
				return '';
			},
			getLowerAll() {
				getLower(this.params).then(res => {
					if (res.code == 200) {
						if (res.data.list.length == 0) {
							uni.showToast({
								title: '暂无符合条件人选',
								icon: 'none'
							})
							return false;
						}
						this.totalPage = Math.ceil(Number(res.data.total) / 20);
						this.teamList = res.data.list;
					} else {
						uni.showToast({
							title: res.message || '获取列表失败',
							icon: 'none'
						})
					}
				});
			},
			//加载获取更多
			more() {
				this.params.page++;
				if (this.params.page > this.totalPage) {
					this.$refs.uToast.show({
						title: '没有更多啦~',
						type: 'error',
						icon: false
					})
					return false;
				}
				getLower(this.params).then(res => {
					if (res.code == 200) {
						if (res.data.list.length > 0) {
							this.teamList = this.teamList.concat(res.data.list)
						}
					} else {
						uni.showToast({
							title: res.message || '获取列表失败',
							icon: 'none'
						})
					}
				});
			},
			getEnroll() {
				this.params.page = 1
				this.getLowerAll()
			},
			goDetail() {
				if (this.active == -1) {
					uni.showToast({
						title: '请选择所属者',
						icon: 'none'
					})
					return false
				}
				console.log(this.active, 111)
				const id = this.teamList[this.active].id
				uni.navigateTo({
					url: './detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topt {
		width: 100%;
		padding: 30rpx 24rpx 24rpx 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10000;

		.search_con {
			width: 700rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.search_inp {
			height: 80rpx;
			width: 100%;
			padding: 0 10rpx 0 30rpx;
			border-radius: 44rpx;
			background: #F9F9FB;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.flex {
				display: flex;
			}
		}

		.search {
			width: 132rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(92deg, #FF232C 0%, #FF571B 100%);
			border-radius: 32rpx;
		}
	}

	.bot {
		margin: 24rpx 24rpx 0 24rpx;
		height: 140rpx;
		background-color: #fff;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 16rpx;

		.botLeft {
			display: flex;
			align-items: center;

			.img {
				width: 68rpx;
				height: 68rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
			}

			.right {
				margin-left: 20rpx;

				&_top {
					font-size: 28rpx;
					color: #999999;

					text {
						font-size: 30rpx;
						font-weight: bold;
						color: #333;
						margin-right: 20rpx;
					}
				}

				&_red {
					background: #FB7500;
				}

				&_yellow {
					background-color: #D9AE00;
				}

				&_level {
					width: 116rpx;
					height: 42rpx;
					margin-top: 10rpx;
					text-align: center;
					line-height: 42rpx;
					border-radius: 4rpx;
					color: #fff;
					font-size: 24rpx;
				}
			}
		}

		.botRight {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			border: 2rpx solid #999999;
		}
	}

	.botRed {
		margin: 24rpx 24rpx 0 24rpx;
		height: 140rpx;
		background: linear-gradient(180deg, #F30000 0%, #FE4815 100%);
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 16rpx;

		.botLeft {
			display: flex;
			align-items: center;

			.img {
				width: 68rpx;
				height: 68rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
			}

			.right {
				margin-left: 20rpx;
				color: #fff;

				&_top {
					font-size: 28rpx;
					color: #fff;

					text {
						font-size: 30rpx;
						font-weight: bold;
						color: #FFF;
						margin-right: 20rpx;
					}
				}

				&_level {
					width: 116rpx;
					height: 42rpx;
					margin-top: 10rpx;
					text-align: center;
					line-height: 42rpx;
					background: #fff;
					border-radius: 4rpx;
					color: #FB231F;
					font-size: 24rpx;
				}
			}
		}

		.botRightRed {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background-color: #FFFFFF;
			text-align: center;
			line-height: 48rpx;
			font-weight: bold;
		}
	}

	.fixedBot {
		background-color: #fff;
		width: 750rpx;
		height: 102rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		&_btn {
			width: 702rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #F30000 0%, #FE4815 100%);
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}
	}
</style>