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">
						<uv-empty mode="data" icon="/static/img/no-empty.png"></uv-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>