caimei-applets-caimei/components/module/listTemplate/memberList.vue

<template>
	<view class="container" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
		<list-skeleton v-if="showSkeleton" :listType='2'></list-skeleton>
		<scroll-view v-if="membersList.length > 0" class="league-scroll-view league-list-members" :style="{'height': getScrollHeight+'px'}" @scrolltolower="membersToLower" id="scroll-wrap" scroll-y>
			<view class="members-item league-list-item" v-for="(item,index) in membersList" :key="index" @click="memberClicked(item.id)" :thisId="item.id">
				<image class="league-list-img league-members-img" :src="item.logo"></image>
				<image class="mask-pic" src="../../../static/temp/mask.png"></image>
				<view class="league-details-info">
					<view>
						<image src="../../../static/temp/name-icon.png"></image>
						<text class="main-color">{{item.name}}</text>
					</view>
					<view>
						<image src="../../../static/temp/address-icon.png"></image>
						<text class="main-color">{{item.provinceCityDistrict}}</text>
					</view>
					<view>
						<image class="authenticated-icon" src="../../../static/temp/authenticated-icon.png"></image>
						<text class="green-color">{{item.brands.length}}个品牌已认证</text>
						<!-- <image class="arrow-right" src="../../static/temp/arrow-right.png"></image> -->
					</view>
				</view>
			</view>
			<view v-if="showLoading && membersList.length > 4">
				<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
				<view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
			</view>
		</scroll-view>
		<view class="empty-container" v-if="showEmptyTips">
			<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
			<text class="error-text">暂无内容</text>
		</view>
	</view>
</template>

<script>
	import listSkeleton from '@/components/module/listTemplate/listSkeleton'
	
	export default {
		name:'MemberList',
		components:{
			listSkeleton
		},
		props:{
			serverUrl:{
				type:String,
				default:""
			}
		},
	    data(){
	        return {
				windowHeight: '',
				showSkeleton: true,
				userID: '',
	            membersList:[],
				showEmptyTips: false,
	            getScrollHeight: 'auto',
				showLoading: false,
				loadingNow: true,
				loadingText: '上拉加载更多',
				pageSize: 10,
				pageNum: 1,
				hasNextPage: false,
				totalPage: 1,
				pullFlag: true
	        }
	    },
		created() {
			let self = this;
			const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
			self.windowHeight = windowHeight - 1;
			let obj=wx.createSelectorQuery();
			obj.select('page').boundingClientRect(function (rect) {
			    console.log(rect)
			})
		},
	    methods: {
			setScrollHeight(length) {
				let self = this;
				if(length > 6) {
					self.getScrollHeight = self.windowHeight - 1;
				} else {
					let obj=wx.createSelectorQuery();
					obj.selectAll('.league-list-item').boundingClientRect(function (rect) {
					    self.getScrollHeight = rect[0].height * length/2;
					})
					obj.exec() ;
				}
			},
	        membersToLower () {
	            if(this.hasNextPage && this.pullFlag) {
	            	this.getListFromServer(true);
	            }
	        },
	        memberClicked (id) {
	            wx.navigateTo({ url: `/pages/member_details/main?id=${id}`});
	        },
			getListFromServer(loadMore) {
				let self = this;
				self.showLoading = true;
				self.loadingNow = true;
				self.loadingText = '加载中';
				if(loadMore) {
					self.pageNum += 1;
				}
				this.$api.get(this.serverUrl,{index:this.pageNum,pageSize:this.pageSize},
					response => {
						const code = response.code;
						const resData = response.data;
						if(code == 1) { 
							const resList = resData.results;
							if(resList && resList.length > 0){
								self.hasNextPage = resData.hasNextPage;
								self.totalPage = resData.totalPage;
								if(loadMore) {
									self.membersList = [...self.membersList,...resList];
								} else {
									self.membersList = [...resList];
									self.setScrollHeight(self.membersList.length);
									self.showSkeleton = false;
								}
								// 防上拉暴滑
								self.pullFlag = false;
								setTimeout(()=>{
									self.pullFlag = true;
								},500)
								// 底部提示文案
								if(self.hasNextPage) {
									self.loadingText = '上拉加载更多';
								} else {
									self.showLoading = true;
									self.loadingNow = false;
								}
							} else {
								self.showEmptyTips = true;
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '网络错误，请稍后重试。',
								duration: 3000
							})
						}
					}
				)
				
				
			}
	    }
	}
</script>

<style lang="scss">
	.league-scroll-view {
	    width: 100%;
		background: #fff;
		border-top: 2rpx solid rgba(0,0,0,0.07);
	    -webkit-overflow-scrolling: touch;
		.league-list-item:nth-child(1), .league-list-item:nth-child(2) {
			margin-top: 24rpx;
		} 	
	}
	.league-list-item {
	    width: 45.2%;
	    height: 390rpx;
	    float: left;
	    margin-left: 2.86%;
	    margin-bottom: 24rpx;
	    padding-bottom:8rpx;
	    background: #fff;
		border: 2rpx solid #EFEFEF;
	    border-radius: 14rpx;
	    overflow: hidden;
	    position: relative;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
		.league-list-img {
		    width: 100%;
		    height: 204rpx;
		    border-radius: 14rpx 14rpx 0 0;
		}
		.mask-pic {
		    width: 100%;
		    height: 204rpx;
		    position: absolute;
		}
		.league-details-info {
		    width: 96%;
			margin-top: 24rpx;
		    font-size: 26rpx;
			image {
			    width: 30rpx;
			    height: 30rpx;
			    padding: 10rpx;
			    margin-left:-6rpx;
			}
			
			text {
			    width: 83%;
			    display: inline-block;
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			}
		}
		.league-details-info>view {
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: center;
		}
		.arrow-right {
		    width: 14rpx !important;
		    height: 22rpx !important;
		    margin-top: 2rpx;
		}
		.authenticated-icon {
		    margin-left: -1rpx !important;
		}
		.authenticated-icon + text {
		    margin-left: 5rpx;
		}
		.top-icon {
		    width: 82rpx;
		    height: 82rpx;
		    position: absolute;
		    top: 0;
		    right: 0;
		}
		.green-color {
			color: $green-color;
		}
	}
	.loading-wrapper {
		background: $sub-bg-color;
	}
</style>