market-app-ui/pages/market/group/gourpIndex.vue

<template>
	<view class="">
		<view class="tab" style="height: 60px;">
			<view style="display: flex;margin-top: 10px;">
				<u--input placeholder="输入名字" border="surround" v-model="param.name" @clear="param.name='';list=[];getData()"
					clearable>
				</u--input>
				<view class="reset_btn" @click="param.pageNo=1;list=[];getData()">搜索</view>
			</view>
		</view>
		<view style="padding: 10px 20px;">
			<u-divider :text="'总数：'+param.dataCount+'人'"></u-divider>
			<view v-for="(item,index) in list">
				<u-divider></u-divider>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="11">
						<view style="font-size: 18px;">{{item.name}} ({{item.phone}})</view>
					</u-col>
					<u-col span="1" justify="end">
						<view class="demo-layout bg-purple-light" style="float: right;" @click="makePhoneCall(item.phone)">
							<u-icon name="phone-fill" size="23" style="margin-left: 5px;cursor: pointer;"
								color="#07c5ff"></u-icon>
						</view>
					</u-col>
				</u-row>

			</view>

		</view>
		<view style="height: 60px;"></view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				param: {
					pageNo: 1,
					pageSize: 15,
					name: '',
					dataCount:0
				},
				list: [],
				loadMore: false,
			};
		},
		onLoad() {

		},
		onShow() {
			this.getData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.param.pageNo = 1;
			this.param.name = '';
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载
		onReachBottom() {
			if (this.loadMore) {
				this.param.pageNo++;
				this.getData();
			}
		},
		methods: {
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			back() {
				uni.navigateBack()
			},
			getData() {
				this.http.request({
					url: '/level-one-server/app/TbPeople/getGroupPeople',
					data: this.param,
					success: res => {
						this.loadMore = parseInt(res.data.pageCount) > this.param.pageNo;
						this.param.dataCount=res.data.dataCount;
						if (res.data.data) {
							this.list.push(...res.data.data);
						}
						if (this.param.pageNo == 1 && res.data.data && res.data.data.length == 0) {
							this.list = []
						}
					}
				});
			},
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.tab {
		.reset_btn {
			line-height: 35px;
			padding: 0 15px;
			border: 1px solid #e2e2e2;
			border-radius: 8px;
			margin-left: 10px;
			background: #e2e2e2
		}
	}

	.my_top {
		position: relative;
		overflow: hidden;

		image {
			width: 100%;
		}
	}

	.list {
		position: relative;
		padding: 0px 20px 10px 20px;
		margin-top: -196px;

		.user {
			background-color: white;
			padding: 20px;
			border-radius: 8px;
			color: $font-c;

			.head {
				float: left;
				width: 55px;
				height: 55px;
			}

			.con {
				float: left;
				padding-left: 15px;
				width: 60%;

				.nickName {
					font-size: 17px;
					font-weight: bold;
				}

				.tag {
					background-color: #6799ad;
					color: white;
					float: left;
					font-size: 13px;
					padding: 2px 6px;
					border-radius: 5px;
					margin-top: 6px;
				}
			}

			.edit {
				float: right;
				font-size: 20px;
				margin-top: 17px;
			}
		}
	}

	.exit {
		margin-top: 20px;
		background-color: white;
		color: #f44336;
	}

	.back {
		position: fixed;
		width: 100%;
		bottom: 00px;
	}
</style>