xc/pages/user/myfans.vue

<template>
	<view class="content">
		<view class="top-fan">
			<image src="../../static/img/top-bg.png" mode=""></image>
		</view>
		<view class="fans-base flex">
			<view class="base-item">
				<view class="base-item-val">
					{{fans.count || 0}}
				</view>
				<view class="base-item-name">
					我的粉丝
				</view>
			</view>
			<view class="jg"></view>
			<view class="base-item">
				<view class="base-item-val">
					{{fans.active || 0}}
				</view>
				<view class="base-item-name">
					活跃粉丝
				</view>
			</view>
			<view class="jg"></view>
			<view class="base-item">
				<view class="base-item-val">
					{{fans.money || 0}}
				</view>
				<view class="base-item-name">
					总成交额
				</view>
			</view>
		</view>
		<view class="fans-tit">
			我的粉丝列表
		</view>
		<view class="fans-list-tit flex">
			<view class="list-item">
				姓名
			</view>
			<view class="list-item">
				ID
			</view>
			<view class="list-item">
				当日业绩
			</view>
			<view class="list-item">
				粉丝数
			</view>
		</view>
		<scroll-view scroll-y="true" class="swiper-box" :style="{'height':height}" @scrolltolower="getMyfans()">
			<view class="fans-list-val flex" v-for="(item,index) in list"
				:style="{'background':index%2 ==0 ? '#F9F9F9':'#fff'}">
				<view class="list-item clamp">
					{{item.real_name||item.nickname}}
				</view>
				<view class="list-item">
					{{item.uid}}
				</view>
				<view class="list-item">
					{{item.money}}
				</view>
				<view class="list-item">
					{{item.count}}
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getMyfans
	} from '@/api/user.js'
	export default {
		data() {
			return {
				height: '',
				list: [],
				page: 1,
				limit: 10,
				fans: {},
				loadingType: 'more'
			}
		},
		onLoad() {
			this.getMyfans()
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						// console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						// console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			getMyfans() {
				let obj = this
				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading' 
				getMyfans({
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					console.log(res)
					obj.fans = res.data;
					let ar = res.data.user.map((item)=>{
						if(item.real_name.length>2){
							let str =item.real_name.slice(1,item.real_name.length-1);
							let str2 = str.replace(/.*/g,'*');
							item.real_name =item.real_name.slice(0,1)+str2+item.real_name.slice(item.real_name.length-1);
						}else if(item.real_name.length==2){
							item.real_name =item.real_name.slice(0,1)+"*";
						}
						return item
					})
					obj.list = obj.list.concat(res.data.user)
					obj.page++
					if (res.data.user.length == obj.limit) {
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f5f4;
		height: 100%;
	}

	.content {
		background-color: #f3f5f4;
	}

	.top-fan {
		position: relative;
		width: 750rpx;
		height: 336rpx;

		image {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
	}

	.fans-base {
		position: relative;
		z-index: 2;
		width: 702rpx;
		height: 210rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: -147rpx auto 0;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;

		.jg {
			width: 2rpx;
			height: 96rpx;
			background: #DCDCDC;
		}

		.base-item {
			flex-grow: 1;

			.base-item-val {
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0C1732;
			}
		}
	}

	.fans-tit {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0C1732;
		padding: 45rpx 0 29rpx 40rpx;
	}

	.fans-list-tit {
		width: 710rpx;
		height: 100rpx;
		background: #FFE1E2;
		border-radius: 20rpx 20rpx 0px 0px;
		margin: auto;
		text-align: center;
		;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #DC262B;

		.list-item {
			width: 25%;
			flex-shrink: 0;
		}
	}

	.fans-list-val {
		width: 710rpx;
		height: 100rpx;
		margin: auto;
		text-align: center;
		;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0C1732;

		.list-item {
			// flex-grow: 1;
			width: 25%;
			flex-shrink: 0;
		}
	}
</style>