digitalMen/pages/user/commission/team.vue

<!-- 分享记录 -->
<template>
	<view class="">
		<view style="color: #000000;">
			<tn-nav-bar backgroundColor="#ffffff" :bottomShadow="false">我的团队</tn-nav-bar>
			<!-- <view :style="{height: tobheight+'px'}"></view> -->
		</view>
		<z-paging ref="paging" refresher-complete-delay="200" v-model="jobList" @query="queryList">
			<view slot="top" class="z_tabs" :style="{ marginTop: tobheight + 'px' }"></view>
			<view class="page_box">
				<!-- 标题栏 -->
				<view class="head_box">
					<view class="nav-box">
						<!-- 标题栏 -->
						<!-- <shopro-navbar back-icon-color="#fff" :background="{}" :backTextStyle="{ color: '#fff', fontSize: '40rpx', fontWeight: '500' }" backText="分享记录"></shopro-navbar> -->
					</view>
					<!-- 分类tab -->
					<view class="tab-box u-flex">
						<view class="tab-item u-flex-1" v-if="setting.level > index" v-for="(tab, index) in tabsList" :key="tab.value" @tap="onTab(index)">
						<view class="u-flex">
							<text class="tab-title" :class="{ 'title-active': tabCurrent === index }">{{ index+1 }}级团队</text>
							
							<text v-if="tabCurrent == index">({{total}}人)</text>
							
						</view>
							
							<text class="underline" :class="{ 'underline-active': tabCurrent === index }"></text>
						</view>
					</view>
				</view>

				<view class="content_box">
					<view class="log-list u-flex" v-for="(item,index) in jobList" :key="index">
						<view class="log-avatar-wrap">
							<u-avatar :src="item.avatar" size="30"></u-avatar>
							<!-- <image class="log-avatar" :src="item.avatar" mode=""></image> -->
							</view>
						<view class="item-right">
							<view class="name">{{ item.nickname?item.nickname+'('+item.id_number+')':'未注册用户'}}</view>
							<view class="item-bottom u-flex u-row-between">
								<view class="time">{{ item.create_time }}</view>
								<view class="from-text">来自链接分享</view>
							</view>
						</view>
					</view>

					<!-- <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box"> -->
					<!-- 分享记录列表 -->
					<!-- <view class="log-list u-flex" v-for="item in shareLogList" :key="item.userinfo.id">
					<view class="log-avatar-wrap"><image class="log-avatar" :src="item.userinfo.avatar" mode=""></image></view>

					<view class="item-right">
						<view class="name">{{ item.userinfo.nickname }}</view> -->
					<!-- <view class="content u-flex">
							<view class="content-img-wrap" v-if="item.type_data"><image class="content-img" :src="item.type_data.image" mode=""></image></view>

							<view class="content-text">{{ item.msg }}</view>
						</view> -->
					<!-- <view class="item-bottom u-flex u-row-between">
							<view class="time">{{ item.create_time }}</view>
							<view class="from-text">来自链接分享</view>
						</view>
					</view>
				</view> -->
					<!-- 缺省页 -->
					<!-- <shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据"></shopro-empty> -->
					<!-- 更多 -->
					<!-- <u-loadmore v-if="shareLogList.length" height="0rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view> -->
				</view>

				<view class="foot_box"></view>
			</view>
		</z-paging>
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	data() {
		return {
			jobList: [],
			isLoading: true,
			shareLogList: [], //分享记录
			tabCurrent: 0, //默认
			tabsList: [
				// {
				// 	name: '全部',
				// 	value: 'all'
				// },
				// {
				// 	name: '名片',
				// 	value: 'index'
				// },
				// {
				// 	name: '商品',
				// 	value: 'goods'
				// },
				// {
				// 	name: '拼团',
				// 	value: 'groupon'
				// }
				{
					name: '一级团队',
					value: 'first'
				},
				{
					name: '二级团队',
					value: 'second'
				},
				{
					name: '三级团队',
					value: 'third'
				}
			],
			typeObj: {
				index: '名片',
				goods: '商品',
				groupon: '拼团',
				link: '链接'
			},
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			level: 1,
			isEmpty: false,
			tobheight: 45,
			platform: this.$platform.get(),
			setting:{},
			total:0
		};
	},
	computed: {
		...mapGetters(['appInfo', 'userInfo'])
	},
	onLoad() {
		const that = this;
		if (this.platform == 'wxMiniProgram') {
			var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight;
			var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop;
			this.tobheight = menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height;
		}
		this.getSetting();
	},
	// onPullDownRefresh() {
	// 	this.currentPage = 1;
	// 	this.lastPage = 1;
	// 	this.shareLogList = [];
	// 	this.getShareLog();
	// },
	methods: {
		queryList(pageNo, pageSize) {
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			const params = {
				page: pageNo,
				limit: pageSize,
				level: this.level
			};
			this.$http('commission.teamList', params).then(res => {
				if (res.code == 0) {
					
					this.total = res.data.total
					
					this.$refs.paging.complete(res.data.data);
					this.isLoading = false;
				}
			});
		},
		getSetting(){
			this.$http('conf.getGroupConf',{group:'system.commission'}).then(res => {
				if (res.code == 0) {
					uni.setNavigationBarTitle({
						title: this.appInfo.site_name
					});
					this.setting = res.data
				}
			});
		},
		// 切换分类
		onTab(index) {
			this.tabCurrent = index;
			this.level = index+1;
			// this.shareLogList = [];
			// this.getShareLog();
			// if (this.tabCurrent !== type) {
			// 	this.tabCurrent = type;
			// this.currentPage = 1;
			// this.lastPage = 1;
			// 	this.shareLogList = [];
			// 	this.getShareLog();
			// }
			this.jobList = [];
			this.$refs.paging.reload(true);
		},

		// 分享记录数据
		// getShareLog() {
		// 	let that = this;
		// 	that.loadStatus = 'loading';
		// 	that.$http('commission.teamList', {
		// 		level: that.level,
		// 		page: that.currentPage
		// 	}).then(res => {
		// 		uni.stopPullDownRefresh();
		// 		if (res.code === 0) {
		// 			that.shareLogList = [...that.shareLogList, ...res.data.data];
		// 			that.lastPage = res.data.last_page;
		// 			that.isEmpty = !that.shareLogList.length;
		// 			that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
		// 		}
		// 	});
		// },

		// 加载更多
		// loadMore() {
		// 	if (this.currentPage < this.lastPage) {
		// 		this.currentPage += 1;
		// 		this.getShareLog();
		// 	}
		// }
	}
};
</script>

<style lang="scss">
// nav
.head_box {
	height: 280rpx;
	background: url('http://file.shopro.top/imgs/commission/share_head_bg.png') no-repeat;
	background-size: 100% auto;
	position: relative;
}

// 分类
.tab-box {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0px 0px;
	position: absolute;
	width: 100%;
	bottom: 0;

	.tab-item {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.tab-title {
			color: #666;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 90rpx;
		}

		.title-active {
			color: #333;
		}

		.underline {
			display: block;
			width: 68rpx;
			height: 4rpx;
			background: #fff;
			border-radius: 2rpx;
		}

		.underline-active {
			background: #5e49c3;
			display: block;
			width: 68rpx;
			height: 4rpx;
			border-radius: 2rpx;
		}
	}
}

// 分享记录列表
.log-list {
	background-color: #fff;
	padding: 30rpx;
	margin: 10rpx 0;
	align-items: flex-start;

	.log-avatar-wrap {
		margin-right: 14rpx;

		.log-avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}

	.item-right {
		flex: 1;
		.name {
			font-size: 28rpx;
			font-weight: 500;
			color: #7f7aa5;
			margin-bottom: 28rpx;
		}

		.content {
			background: rgba(241, 241, 241, 0.46);
			border-radius: 2rpx;
			padding: 10rpx;
			margin-bottom: 20rpx;

			.content-img-wrap {
				margin-right: 16rpx;
				width: 80rpx;
				height: 80rpx;

				.content-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 6rpx;
				}
			}

			.content-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.item-bottom {
			width: 100%;
			.time {
				font-size: 22rpx;
				font-weight: 500;
				color: #c8c8c8;
			}

			.from-text {
				font-size: 22rpx;
				font-weight: 500;
				color: #c8c8c8;
			}
		}
	}
}
</style>