xinwang/pages/user/minMember.vue

<template>
	<view class="content">
		<view class="top">
			<image src="../../static/img/tgbg.png" mode=""></image>
			<view class="top-val">
				{{allMun || 0}}<text>人</text>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'height': height}" class="list"  @scrolltolower="loadData()">
			 <empty v-if="loaded && list.length == 0" ></empty>
			<view class="apply-item flex" v-for="(item,index) in list" :key="index">
				<view class="item-left flex">
					<image :src="item.avatar"> mode="" class="item-img"></image>
					<view class="item-info flex">
						<view class="name flex">
							<view class="">
								{{ item.nickname }}
							</view>
							<image src="../../static/img/lv02.png" mode="" v-if="item.level == 2"></image>
							<image src="../../static/img/lv03.png" mode="" v-if="item.level == 3"></image>
							<image src="../../static/img/lv04.png" mode="" v-if="item.level == 4"></image>
						</view>
						<view class="phone">
							{{ item.spread_time }}
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType" v-if="!loaded"></uni-load-more>
			<view class="btn-jg"></view>
		</scroll-view>
	</view>
</template>

<script>
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {getMyTvillage} from '@/api/user.js'
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return {
				height: '',
				list: [],
				loaded: false,
				loadingType: 'more',
				page: 1,
				limit: 10,
				allMun: 0,
			}
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.list').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData() {
				let obj = this
				if(obj.loadingType == 'loading') {
					return
				}
				if(obj.loadingType == 'noMore') {
					return 
				}
				obj.loadingType = 'loading'
				getMyTvillage({
					page: obj.page,
					limit: obj.limit
				}).then(({data}) => {
					obj.allMun = data.count
					obj.list = obj.list.concat(data.data)
					obj.page++
					if(obj.limit == data.data.length){
						obj.loadingType = 'more'
						return
					}else {
						obj.loadingType = 'noMore'
					}
					obj.$set(obj,'loaded',true)
				}).catch( err => {
					console.log(err)
					obj.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 750rpx;
		height: 400rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
		.top-val {
			width: 100%;
			height: 100%;
			line-height:400rpx;
			text-align: center;
			font-size: 72rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF4C4C;
			position: absolute;
			top: 0;
			text {
				font-size: 36rpx;
			}
		}
		
	}
	.btn-wrapper {
		width: 100%;
		height: 116rpx;
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #fff;
		.btm-btn {
			margin: 0 auto;
			width: 674rpx;
			height: 88rpx;
			background: #FF4C4C;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	
	.btn-jg {
		height: 116rpx;
	}
	.list {
		height: 100%;
		// position: relative;
		// background-color: red;
		.apply-item {
			background-color: #fff;
			height: 130rpx;
			border-bottom: 1px solid #F0F0F0;
			padding: 0 35rpx 0 20rpx;
			&:last-child {
				border: none;
			}
			.item-left {
				.item-img {
					height: 80rpx;
					width: 80rpx;
					border-radius: 80rpx;
					background-color: red;
				}
				.item-info {
					height: 80rpx;
					flex-direction: column;
					padding-left: 20rpx;
					justify-content: space-around;
					align-items: flex-start;
					line-height: 1;
					.name {
						font-size: 30rpx;
						font-family: PingFangSC;
						font-weight: 500;
						color: #3F454B;
					}
					.phone {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.item-btn {
				.err-btn {
					width: 98rpx;
					height: 47rpx;
					border: 1px solid #000000;
					border-radius: 5rpx;
					line-height: 47rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.pas-btn {
					width: 98rpx;
					height: 47rpx;
					background: linear-gradient(-35deg, #F8DD4F, #FBEB77);
					border-radius: 5rpx;
					line-height: 47rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 10rpx;
				}
			}
			.item-right {
				line-height: 129rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			
		}
	}
</style>