mall-front-app/pages/user/wallet/team.vue

<!-- 我的佣金 -->
<template>
	<s-layout class="wallet-wrap" :bgStyle="{'backgroundColor':'#ffffff'}" title="" navbar="normal">

		<view class="model-box ss-flex-col">
			<view class="all-title ss-p-x-45 ss-p-t-30">
				<text style="float: right;">{{ t('team.total_people',{count:state.teamCount}) }}</text>
			</view>

			<view class="list-box" style="width: 100%;padding: 0;height: calc(100vh - 7.5rem) ;">
				<!-- 推荐人 -->
				<view>
					<view class="list-item ss-flex ss-col-center ss-row-between "
						style="padding-top: 30rpx; padding-bottom: 0;">
						<view class="ss-flex ss-col-center"
							style="width: 100%;border-bottom: 1px solid #ededed;padding-bottom: 30rpx">
							<view>
								&nbsp;&nbsp;
							</view>
							<!-- 头像 -->
							<view class="avatar-box ss-m-x-20">
								<image class="avatar-img" :src="state.ancestor.avatar" mode="aspectFill"></image>
							</view>
							<view class="ss-flex ss-m-t-10"
								style="flex-direction: column;align-items: flex-start;width: calc(100% - 5.5rem);">
								<view class="name" style="width: 100%;">
									<text
										style="width:50%;display: inline-block;">{{ state.ancestor.username ||'昵称:'+state.ancestor.descNickName  }}</text>
									<text class="time"
										style="float: right;color: #666666">{{ t('team.retain_performance') }}：{{points2point(state.ancestor.residueSocial)}}</text>
								</view>
								<view class="time" style="width: 100%;color: #999;">
									<text>{{state.ancestor.socialStatusLevel || "等级1" }}</text> / <text>{{t('team.referrer')}}</text>
									<text style="float: right;"> {{ t('team.team_count',{count:state.ancestor.descendantsCount}) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 直推人和后代 -->
				<view>
					<scroll-view style="width: 100%;" scroll-y="true" @touchmove.stop>
						<view v-if="state.descendants.total > 0">
							<view class="list-item ss-flex ss-col-center ss-row-between "
								v-for="(item,index)  in state.descendants.list" :key="item.id"
								style="padding-top: 30rpx ;padding-bottom: 0;">
								<view class="ss-flex ss-col-center"
									style="width: 100%;border-bottom: 1px solid #ededed;padding-bottom: 30rpx">
									<view>
										{{item.sort}}
									</view>
									<!-- 头像 -->
									<view class="avatar-box ss-m-x-20">
										<image class="avatar-img" :src="
									   item.avatar || sheep.$url.static('/static/images/default_avatar.png')" mode="aspectFill"></image>
									</view>
									<view class="ss-flex ss-m-t-10"
										style="flex-direction: column;align-items: flex-start;width: calc(100% - 5.5rem);">
										<view class="name" style="width: 100%;">
											<text style="width:50%;display: inline-block;">
												{{ item.username || '昵称:'+ item.descNickName}}</text>
											<text class="time"
												style="float: right;color: #666666;">{{t('team.new_performance_value')}}：{{points2point(item.residueSocial)}}</text>
										</view>

										<view class="time" style="width: 100%;color: #999">
											{{item.socialStatusLevel}} / <text>{{item.depth == 1? t('team.direct_referral') :''}}</text>
											<text style="float: right;"> {{ t('team.team_count',{count:item.descendantsCount}) }}</text>

										</view>
									</view>
								</view>
							</view>
						</view>
						<s-empty v-else :text="t('team.no_team_members')" icon="/static/data-empty.png" />
					</scroll-view>

				</view>
			</view>
		</view>
		<uni-load-more v-if="state.descendants.total > 0" :status="state.loadStatus" :content-text="{
		  contentdown: t('common.click_to_load_more'),
		}" @tap="loadMore" />
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive
	} from 'vue';
	import _ from 'lodash';
	import dayjs from 'dayjs';
	import TeamApi from '@/sheep/api/distri/team';
	import {
		resetPagination
	} from '@/sheep/util';
	import {
		points2point
	} from '@/sheep/hooks/useGoods';
	import { t } from '@/locale'
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const sys_navBar = sheep.$platform.navbar;

	const state = reactive({
		currentTab: 0,
		pagination: {
			list: 0,
			total: 0,
			pageSize: 10,
			pageNo: 1,
		},
		loadStatus: '',
		descendants: {
			total: 0,
			list: []
		},
		teamCount: 0,
		ancestor: {

		}
	});


	const dateFilterText = computed(() => {
		if (state.date[0] === state.date[1]) {
			return state.date[0];
		} else {
			return state.date.join('~');
		}
	});

	async function getTeam() {
		state.loadStatus = 'loading';
		let {
			code,
			data
		} = await TeamApi.getTeam({
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
		});
		if (code !== 0) {
			return;
		}
		// 团队人员数量
		state.teamCount = data.teamCount
		// 直推人
		state.ancestor = data.ancestor

		let descendantsList = _.concat(state.descendants.list, data.descendants.list);

		// 后代
		state.descendants.list = descendantsList
		// console.log(state.descendants.list)

		// state.pagination.list = data.list;
		state.descendants.total = data.descendants.total;
		state.pagination.total = data.descendants.total;
		state.loadStatus = state.descendants.list.length < state.descendants.total ? 'more' : 'noMore';
	}

	onLoad(() => {
		state.today = dayjs().format('YYYY-MM-DD');
		state.date = [state.today, state.today];
		getTeam();
	});

	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getTeam();
	}

	onReachBottom(() => {
		loadMore();
	});
</script>

<style lang="scss" scoped>
	.score-box {
		margin: 20rpx;
		border-radius: 20rpx;
		padding-top: 100rpx;
	}

	.avatar-box {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #eaeaea;

		.avatar-img {
			width: 100%;
			height: 100%;

		}
	}

	.value-box {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50%;
		border: 2px solid #f6f6f6;
	}

	.btn {
		width: 300rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: $white;
		position: relative;
		z-index: 1;
	}

	.header-box {
		width: 100%;
		background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%) no-repeat;
		background-size: 750rpx 100%;
		padding: 0 0 120rpx 0;
		box-sizing: border-box;

		.score-box {
			height: 100%;

			.all-num {
				font-size: 50rpx;
				font-weight: bold;
				color: #fff;
				font-family: OPPOSANS;
			}

			.all-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #fff;
			}

			.cicon-help-o {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}

	// 筛选
	.filter-box {
		height: 114rpx;
		background-color: $bg-page;

		.total-box {
			font-size: 24rpx;
			font-weight: 500;
			color: $dark-9;
		}

		.date-btn {
			background-color: $white;
			line-height: 54rpx;
			border-radius: 27rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: $dark-6;

			.ss-seldate-icon {
				font-size: 50rpx;
				color: $dark-9;
			}
		}
	}

	.list-box {
		width: 500rpx;
		height: 600rpx;
		padding: 0 20rpx;
		overflow-y: auto;

		.list-item {

			background: #fff;
			// border-bottom: 1rpx solid #dfdfdf;
			padding: 30rpx;

			.name {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
				line-height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// margin-bottom: 20rpx;
			}

			.time {
				font-size: 24rpx;

				font-weight: 500;
				color: rgba(196, 196, 196, 1);
				line-height: 24px;
			}

			.add {
				font-size: 30rpx;

				font-weight: 500;
				color: #e6b873;
			}

			.minus {
				font-size: 30rpx;

				font-weight: 500;
				color: $dark-3;
			}
		}
	}
</style>