<template>
	<view class="box">
			
				<!-- 明细 -->
				<view class="mingxiBg"  v-if="arr.length > 0">
					
						<view v-for="(item,index) in arr" :key="index">
							<view class="itemBg">
								<image :src='item.headUrl' mode="" style="width: 72rpx; height: 72rpx; border-radius: 36rpx;"></image>
								<view class="nickName" v-if="item.nickName">{{item.nickName}}</view>
								<view class="time">{{item.createTime.slice(0,item.createTime.length-8)}}</view>
								
							</view>
						</view>
					
					
					
				</view>
				
			<!-- 上拉 加载更多 -->
			<view class="noMore" v-if="noMoreShow">没有更多数据</view>
			<!-- 无数据空白页 -->
			<nodata v-if="arr.length==0"></nodata>
			
	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},
		
		data() {
			return {
				arr: [],
				page: 1,
				noMoreShow: false,
				
			}
		},
		onShow() {
			
			this.page = 1;
			this.getItemData();
		},
		methods: {
			
			getItemData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'worldKeepCar/worldDistribution/listSubMemberPage',
					params = {
						page:this.page,
						limit:10,
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var list = res.data.Items
					
					// 处理 undefined和null转为空白字符串
					list.forEach((item, index) => {
						for (const key in item) {
							item[key] = this.$praseStrEmpty(item[key])
						}
					})
					
					
					if (this.page == 1) {
						this.arr = list
					} else {
						this.arr = this.arr.concat(list)
					}
					
					if (list.length < 10) {
						this.noMoreShow = true
					} else {
						this.noMoreShow = false
					}
					
					
				})
			},
		},
		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			this.page = 1;
			this.getItemData()
			
			
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.page++;
		
			this.getItemData()
		
		},
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding-top: 20rpx;
	}
	.mingxiBg{
		margin: 0rpx 24rpx;
		background-color: #FFFFFF;
		
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	
	.itemBg {
	
		height: 98rpx;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.nickName {
		font-size: 30rpx;
		color: #3C3C3C;
		flex-grow: 1;
		margin: 0 15rpx;
	}
	
	.time {
		font-size: 30rpx;
		color: #999999;
		margin: 0 15rpx;
	}
	
	.jine {
		font-size: 32rpx;
		color: #FF4F00;
		font-weight: bold;
		margin: 0 15rpx;
	}
	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>
