CBB3/pages/gz/user.vue

<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/tream_bg.png"></image>
		</view>
		<view class="app-h">
			<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="我的会员"></uni-nav-bar>
		</view>
		<view class="app-body">
			<view id="app-top">
				<view class="app-pannel">
					<view class="frinfo fx-r fx-bc fx-ac">
						<view class="item fx-h fx-bc fx-ac">
							<view class="count">{{data.all_price || 0}}</view>
							<view class="label">成交订单</view>
						</view>
						<view class="line"></view>
						<view class="item fx-h fx-bc fx-ac">
							<view class="count">{{data.subscribe_count || 0}}</view>
							<view class="label">总预约单</view>
						</view>
						<view class="line"></view>
						<view class="item fx-h fx-bc fx-ac">
							<view class="count">{{ data.user_count || 0 }}</view>
							<view class="label">总人</view>
						</view>
					</view>
					
				</view>
				<!--关键词搜索-->
				<view class="sreach fx-r fx-bc fx-ac">
					<image class="icon" src="/static/img/tb-seach.png"></image>
					<input type="text" v-model="keyword"  placeholder="请输入用户昵称/用户ID" placeholder-style="color: #B3B3B3;" />
					<view class="fx-g1"></view>
					<view class="search-btn"  @tap="tapSerach">搜索</view>
				</view>
			</view>
			<view class="ck-select fx-r fx-bc" @tap="tapCkSelect">
				<image class="select" v-if="!ckSelect" src="/static/img/rcheck.png" mode="widthFix"></image>
				<image class="select" v-else src="/static/img/rcheck-btn.png" mode="widthFix"></image>
				1个月持单
			</view>
			<scroll-view scroll-y class="scroll" style="position: absolute;width: calc(100% - 48rpx);"  :style="'height: calc(100vh - 45vw + 180rpx -  60px - ' + topViewHeight + 'px);'" @scrolltolower="onBottom">	
				<view class="sc-body">
					<view class="item" v-for="item in listAr">
						<view class="info fx-r fx-bc">
							<image class="avatar" mode="aspectFill" :src="item.avatar || '/static/img/user-avatar1.png' "></image>
							<view class="ir">
								<view class="fx-r fx-bc">
									<view class="title">{{ item.nickname }}</view>
									
									<view class="level fx-r fx-bc"  v-if="item.levelid == 1">
										<image src="/static/img/level-1.png"></image>
										<view class="name">会员</view>
									</view>
									
									<view class="level fx-r fx-bc" v-if="item.levelid > 1">
										<image src="/static/img/level-1.png"></image>
										<view class="name">vip会员</view>
									</view>
								</view>
								
								<view class="ifoot fx-r">
									<view class="iid">ID：{{ item.uid }}</view>
								</view>
							</view>
							<view class="fx-g2"></view>
							<view class="ir-r fx-h">
								<view class="l1" style="margin-bottom: 16rpx;">今日预约：<text v-if="item.booking_count > 0">已预约</text> <text v-else style="color: #000;">无</text></view>
								<view class="l1">持 单 量：<text>{{ item.pro_count }}</text>单</view>
							</view>
						</view>
						<view class="info-foot fx-r fx-bc">
							<view class="label">直推人数:</view>
							<view class="money">{{ item.user_count || '0' }}</view>
							<view class="label">人</view>
							<view class="fx-g1"></view>
							<view class="label">累计收益:</view>
							<view class="money">￥{{ item.totalEarnings || '0.00' }}</view>
							
						</view>
					</view>
					
					<view v-if="listAr.length > 0">
						<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
							<image src="/static/img/xloading.png"></image>
							<text>正在载入更多...</text>
						</view>
						<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
					</view>
					
					<view v-if="listAr.length == 0 && isFrite">
						<u-empty
									mode="data"
									icon="/static/img/no-empty.png"
								></u-empty>		
					</view>
					
				</view>
			</scroll-view>
			
		</view>
		
	</view>	
</template>
<style lang="scss">
	.app-bg{
		position: absolute;
		image{width: 100vw;height: 45vw;}
	}
	.app-h{
		height: 45vw;
	}
	.app-body{
		padding: 0px 24rpx;
		position: relative;
		top: -180rpx;
		.app-pannel{
			background: #fff;
			border-radius: 20rpx;
			.frinfo{
				padding-top: 60rpx;	
				padding-bottom: 46rpx;
				width: 100%;
				.item{
					width: calc(33% - 1px);
					.count{
						font-weight: bold;
						font-size: 40rpx;
						color: #0C1732;
					}
					.label{
						font-size:28rpx;
						color: #666666;
						margin-top: 10rpx;
					}
				}
				.line{
					width: 2rpx;
					height: 86rpx;
					background: #DCDCDC;
				}
			}
			
			.panel-inner{
				padding: 0px 36rpx;
				.li{
					border: 1px dashed #f1f1f1;
				}
				.info{
					padding: 16rpx 0;
					.icon{
						width: 36rpx;
						height: 38rpx;
					}
					.text{
						font-size: 26rpx;
						color: #333333;
						margin-left: 10rpx;
					}
					
					.more{
						.tag{
							font-size: 24rpx;
							color: #999999;
						}
						.pev{width: 15px;height: 15px;}
					}
				}
				
			}
			
			
		}

		.sreach{
			background: #fff;
			margin:20rpx 0;
			border-radius: 32rpx;
			padding: 16rpx 32rpx;
			.icon{
				width: 46rpx;
				height: 46rpx;
			}
			input{
				width: calc(100% - 46rpx - 16rpx - 50px);
				font-size: 16px;
			}
			.search-btn{
				font-size: 14px;
				color: #FF4C4C;
			}
		}
	
		.sc-body{
			.item{
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 16rpx 40rpx;
				.info{
					.avatar{width: 85rpx;height: 85rpx;border-radius: 50%;}
					padding-bottom: 26rpx;
					border-bottom: 1px solid #f1f1f1;
					.ir{
						margin-left: 20rpx;
						.title{
							font-weight: bold;
							font-size: 32rpx;
							color: #303133;
						}
						.ifoot{
							.iid{
								font-size: 26rpx;
								color: #666666;
							}
							.time{
								font-size: 26rpx;
								color: #666666;
							}
						}
					}
					.ir-r{
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						text{color: #FF4C4C;}
					}
				}
				.info-foot{
					height: 80rpx;
					.label{font-size: 28rpx;color: #303133;}
					.money{font-size: 28rpx;color: #FF4C4C;font-weight: bold;}
					.sbtn{
						border-radius: 28rpx;
						border: 1px solid #EE2F72;
						font-size: 24rpx;
						color: #FF4C4C;
						padding: 10rpx 16rpx;
					}
					.show-sbtn{
						color: #666666;
						font-size: 24rpx;
					}
				}
			}
		}
	}


.level{
	background: linear-gradient(to right, #f9ecc5 0%, #d6ba63 100%);
	border-radius: 20rpx;
	height: 30rpx;
	margin-left: 10rpx;
	padding: 0 10rpx;
	image{width: 20rpx;height: 20rpx;margin-right: 4rpx;}
	.name{
		font-size: 20rpx;
		color: #93794B;
		margin-right: 2px;
		&:last-child{
			 margin-right:0;
		}
	}
}

	
.ck-select{
	font-size: 14px;
	height: 30px;
	image{
		width: 18px;
		height: 18px;
		margin-right: 10rpx;
	}
}
	
</style>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
		    return {
				topViewHeight : 20,
				keyword		  : "",
				data 		  : {},
				listAr 		  : [],
				page:{
					page:1,
					isLoad:false,
					isFoot:false
				},
				isFrite:false,
				ckSelect : true
		    }
		}, 
		onLoad(options) {
			this.initView();
		},
			 
		methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * 加载基础配置
			 */
			initView:function(){
				//提示
				this.$nextTick(()=>{
					 uni.createSelectorQuery().in(this)
					 .select("#app-top").boundingClientRect(res=>{
						 this.topViewHeight = res.height;
						 console.log(this.topViewHeight);
					 }).exec();
				});
				
				this
					.request
					.post("gzUserInit")
					.then(res=>{
						if(res.code == 200) {
							this.data = res.data;
							this.getData();
						}
					});
			},
			
			/**
			 * 分页
			 */
			onBottom() {
				if(this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page ++;
				this.getData();
			},
			
			tapSerach:function(){
				this.getData(true);
			},
			tapCkSelect:function(){
				this.ckSelect = !this.ckSelect;
				this.getData(true);
			},
			/**
			 * 获取数据
			 */
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				if(isPull) {
					this.page.isFoot = false;
					this.page.page = 1;
				}
				this.page.isLoad = true;
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				post.keyword = this.keyword;
				post.isCkOrder = this.ckSelect ? 1 : 0;
				this
					.request
					.post("gzUserList",post)
					.then(res => {
						this.isFrite = true;
						uni.hideLoading();
						if(isPull) {
							this.listAr = res.data.list;
							this.page.isLoad = false;
							this.page.isFoot = false;
						} else {
							this.listAr = this.listAr.concat(res.data.list);
							this.page.isLoad = false;
						}
			
						//是否到底
						if(res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						}
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			}
			
	},
}
</script>