zhuangxiu/pages/user/myteam.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				<text>{{ item.text }}</text>
				<text v-if="item.num>0">({{ item.num || '' }})</text>
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<view class="searchInput flex">
						<view class="searchBox flex">
							<image class="search" src="../../static/icon/search.png" mode="widthFix"></image>
							<input class="input" type="text" @confirm="changeSearchList('')" v-model='search'
								confirm-type='搜索' />
							<image @click="search=''" class="exit" src="../../static/icon/goodsExit.png"
								mode="widthFix"></image>
						</view>
						<view class="searchImg flex">
							<picker mode="selector" range-key="text" :range="searchList" @change="changeSearchList">
								<image class="searchList" src="../../static/icon/searchList.png" mode="widthFix">
								</image>
							</picker>
						</view>
					</view>
					<!-- 空白页 -->
					<!-- #ifdef H5 -->
					<empty src="../../static/error/emptyItem.png"
						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<empty src="../static/error/emptyItem.png"
						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<!-- #endif -->
					<!-- 订单列表 -->
					<view v-for="(item, index) in tabItem.orderList" :key="item.uid" class="andr-mt-lBox flex">
						<!-- 订单列表 -->
						<image :src="item.avatar" class="andr-mt-avatar andr-mt-marR20 flex-shrink-false" mode="scaleToFill"></image>
						<view class="andr-mt-fdC">
							<view class="andr-mt-lname flex-start">
							<text class="clamp padding-r-20">
							{{ item.nickname }}
							</text>
							<image v-if="item.level>0" class="tipLevel flex-shrink-false" :src="`../../static/image/level${item.level-1}.png`" mode="heightFix"></image>
							</view>
							<view class="andr-mt-ltime margin-t-10">{{ item.time }}</view>
							<view class="andr-mt-ltime margin-t-20">推广数：{{ item.childCount }}</view>
						</view>
						<view class="rightText">
							<view class="money">
								{{item.numberCount}}
							</view>
							<view class="allOrder margin-t-20">
								消费{{item.orderCount}}单
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		spreadPeople
	} from '@/api/user.js';
	import {
		userinfo
	} from '@/api/user.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getMoneyStyle
	} from '@/utils/rocessor.js';
	export default {
		filters: {
			getMoneyStyle
		},
		data() {
			return {
				// 查询key
				search: '',
				searchIndex: 0, //当前选中对象
				searchList: [{
						text: '团队排序',
						key: 'childCount DESC'
					},
					{
						text: '金额排序  ',
						key: 'numberCount DESC'
					},
					{
						text: '订单排序',
						key: 'orderCount DESC'
					}
				],
				userInfo: {},
				// 头部图高度
				maxheight: '',

				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '一级团队',
						loadingType: 'more',
						num: 0, //人数
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 1,
						text: '二级团队',
						num: 0, //团队人数
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					}
				],
				money: ''
			};
		},
		onLoad(options) {},
		onShow() {
			this.loadData();
			// 获取用户积分
			let obj = this;
			userinfo({})
				.then(({
					data
				}) => {
					console.log(data);
					obj.userInfo = data;
				})
				.catch(e => {});
		},
		methods: {
			// 页面跳转
			navto(e) {
				uni.navigateTo({
					url: e
				});
			},
			//获取收入支出信息
			async loadData(source) {
				let obj = this;
				//这里是将订单挂载到tab列表下
				let index = obj.tabCurrentIndex;
				let navItem = obj.navList[index];
				let state = navItem.state;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				spreadPeople({
						page: navItem.page,
						limit: navItem.limit,
						grade: state,
						keyword: this.search,
						sort: this.searchList[this.tabCurrentIndex].key
					})
					.then(({
						data
					}) => {
						obj.navList[0].num = data.total;
						obj.navList[1].num = data.totalLevel;
						if (data.list.length > 0) {
							navItem.orderList = navItem.orderList.concat(data.list);
							console.log(navItem.orderList);
							navItem.page++;
						}
						if (navItem.limit == data.list.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						}
						uni.hideLoading();
						obj.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			// 查询对象数据
			changeSearchList(e) {
				if (e) {
					this.searchIndex = e.detail.value;
				}
				// 重新初始化
				this.navList[tabCurrentIndex].page = 1;
				this.navList[tabCurrentIndex].limit = 10;
				this.navList[tabCurrentIndex].loadingType = 'more';
				this.navList[tabCurrentIndex].orderList = [];

				this.loadData()
			}

		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.searchInput {
		padding: 0 30rpx;

		.searchBox {
			background-color: #FFFFFF;
			border-radius: 100rpx;
			padding: 0 30rpx;
			height: 70rpx;
			flex-grow: 1;

			.input {
				flex-grow: 1;
				padding: 0 20rpx;
			}

			.search {
				width: 36rpx;
			}

			.exit {
				width: 36rpx;
			}
		}

		.searchImg {
			height: 70rpx;
			width: 70rpx;
			justify-content: center;
			margin-left: 30rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;

			.searchList {
				width: 36rpx;
			}
		}
	}

	.money-box {
		background-color: $base-color;
		padding-top: var(--status-bar-height);
		// height: 368rpx;
		height: 180rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ffffff;

		// text-align: center;
		.text {
			// padding-top: 147rpx;
			font-size: $font-sm;
		}

		.money {
			font-size: 56rpx;
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	// 列表

	.swiper-box {
		padding-top: 10rpx;
		height: calc(100% - 40px);

		.order-item {
			padding: 20rpx 30rpx;
			line-height: 1.5;

			.title-box {
				.title {
					font-size: $font-lg;
					color: $font-color-base;
				}

				.time {
					font-size: $font-base;
					color: $font-color-light;
				}
			}

			.money {
				color: #fd5b23;
				font-size: $font-lg;
			}
		}
	}

	.list-scroll-content {
		height: 100%;
		padding-top: 30rpx;
	}

	.content {
		height: 100%;

		.empty-content {
			background-color: #ffffff;
		}
	}

	.andr-mt-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: $font-color-light;
	}

	.andr-mt-avatarBd {
		border: 2px solid #ffffff;
	}

	.andr-mt-cname {
		font-size: 28rpx;
		color: #ffffff;
	}

	.andr-mt-flex {
		display: flex;
	}

	.andr-mt-lBox {
		background-color: #ffffff;
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
		margin: 30rpx;
		border-radius: 20rpx;
	}

	.andr-mt-marR20 {
		margin-right: 20rpx;
	}

	.andr-mt-fdC {
		flex-grow: 1;
		overflow: hidden;
	}

	.rightText {
		line-height: 1;

		.money {
			font-size: 36rpx;
			font-weight: bold;

		}

		.allOrder {
			font-size: 22rpx;
			color: $font-color-disabled;
		}
	}

	.andr-mt-lname {
		font-size: 32rpx;
		color: #3f454b;
		overflow: hidden;
		.tipLevel{
			height: 36rpx;
			margin-right: 20rpx;
		}
	}

	.andr-mt-ltime {
		line-height: 1;
		font-size: 22rpx;
		color: $font-color-disabled;
	}
</style>