medicine-xcx/pagesA/my_other_list/promotion/invitelist/invitelist.vue

<template>
	<view>
		<view class="top_box">
			<view class="chanmel_image">
				<image :src="userInfo.headUrl" mode=""></image>
			</view>
			<view class="title_box">
				<view class="left_text">
					<text>我的团队：</text>
					<text>{{fansSize}}人</text>
				</view>
				<view class="right_text">
					<text>我的推荐人：</text>
					<text v-if="Object.keys(fans_userInfo).length >0">{{fans_userInfo.nickName}}</text>
					<text v-else>平台</text>
				</view>
			</view>
		</view>
		<!-- 选择框 -->
		<view class="select_pic_video">
			<u-subsection mode="subsection" :list="listOneTow" fontSize="30" height="61"
				:current="current" @change="sectionChange"></u-subsection>
		</view>
		<!-- 数据展示 -->
		<view class="item_list_box" v-if="member_list.length>0">
			<view class="item" v-for="(item,index) in member_list" :key="index">
				<u-badge :offset="['52','668']" :isDot="true" bgColor="#157DF6" showZero='0' type="success"></u-badge>
				<image :src="item.headUrl" mode=""></image>
				<view class="item_text_box">
					<view class="left_box">
						<text>{{item.nickName}}</text>
						<text>注册时间：{{item.createTime}}</text>
					</view>
					<image  v-if="item.level" :class="item.level==4?'img2':'img1'" :src="IMG_URL+'vip/'+ (item.level) +'.png'" mode="widthFix" ></image>
				</view>
			</view>
		</view>
		<!-- 数据为空 -->
		<u-empty v-else text="无数据" mode="list"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listOneTow: ['一级推广','二级推广'],
				current: 0,
				member_list: [],
				userInfo: {},
				fans_userInfo: {},
				fansSize: 0,
				pageNo: 1,
				pageSize: 10,
				IMG_URL: '',
				total: null,
				isLock: false,
			}
		},
		onPullDownRefresh() {
			this.pageNo = 1,
			this.pageSize = 10,
			this.IMG_URL = '',
			this.total = null,
			this.isLock = false;
			this.fans_userInfo = {}
			this.member_list = []
			this.getFansList();
			
		},
		onReachBottom() {
			this.pageNo+=1;
			this.isLock = true;
			if(total!== null  && this.pageNo * this.pageSize > this.total){
				this.$Toast('已经没有数据了')
			}
			if(this.isLock) {
				this.getFansList();
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("__user_info");
			this.IMG_URL = this.$IMG_URL;
			console.log(this.IMG_URL)
			this.getFansList();
		},
		methods: {
			getFansList() {
				// 获取粉丝列表
				uni.showLoading();
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type: this.current
				}
				this.$api('getFansList',params).then(res => {
					let { code, result, message} = res;
					uni.hideLoading();
					this.isLock = false;
					if(code == 200) {
						
						console.log(result)
						if(this.total == null) {
							this.total = result.fansInfoPage.total;
							// 将推广人的姓名截取
						
							if(result.pidUserInfo){
								if(result.pidUserInfo.nickName.length > 8){
									result.pidUserInfo.nickName = result.pidUserInfo.nickName.substr(0,8) + '...'
								}
							}
							if(result.pidUserInfo!==null){
								this.fans_userInfo = result.pidUserInfo;
							}
						
							
							this.fansSize = result.fansSize
						}
						this.member_list = this.member_list.concat(result.fansInfoPage.records)
						uni.stopPullDownRefresh()
					}else {
						this.$Toast(message);
						uni.stopPullDownRefresh()
					}
				}).catch(err => {
					this.isLock = false;
					uni.stopPullDownRefresh()
					this.$Toast(err.message)
				})
			},
			sectionChange(index){
				
				this.current = index;
				console.log(index,this.current);
				this.member_list = [];
				this.pageNo = 1;
				this.total = null;
				this.getFansList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-badge{
		padding: 0 !important;
	}
	.top_box{
		.chanmel_image{
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
			}
		}
		.title_box{
			display: flex;
			justify-content: space-around;
			font-size: 24rpx;
			color: #3B3B3B;
			margin-top: 24rpx;
			.left_text{
				// margin-left: 120rpx;
				font-size: 28rpx;
			}
			.right_text{
				// margin-right: 140rpx;
				font-size: 28rpx;
			}
			.left_text,
			.right_text{
				text{
					&:last-child{
						color: #E72A37;
					}
				}
			}
		}
	}
	.select_pic_video {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 28rpx;
		margin-bottom: 38rpx;
		background-color: #fff;
		border-radius: 30rpx;
		/deep/ .u-subsection {
			border-radius: 30rpx !important;
			width: 556rpx !important;
			height: 61rpx !important;
			.u-item {
				border: none !important;
			}
			.u-item-bg {
				background-color: #01AEEA !important;
				border-radius: 30rpx !important;
				color: #FFF;
			}
		}
	}
	.item_list_box{
		margin-top: 40rpx;
	}
	.item{
		position: relative;
		width: 686rpx;
		margin: 0 auto;
		padding-bottom: 5rpx;
		border-bottom: 1px solid #ECECEC;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		&:last-child{
			border-bottom: none;
		}
		image{
			width: 88rpx;
			height: 88rpx;
			margin-left: 36rpx;
			border-radius: 8rpx;
		}
		.item_text_box{
			flex: 1;
			font-size: 20rpx;
			color: #929292;
			margin-left: 16rpx;
			margin-right: 18rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left_box{
				display: flex;
				flex-direction: column;
				font-size: 30rpx;
			}
			.img1{
				width: 140rpx;
			}
			.img2{
				width: 160rpx;
			}
			
		}
	}
	
</style>