frontend-app/pages/mine_package/mine_my_team/mine_my_team.vue

<template>
	<view class="my_team_warp">
		<!-- 导航栏 -->
		<view class="header_">
			<view style="margin-top: 10rpx;">
				<up-image src="/static/common/left_b.png" width="18" height="20" bgColor="#f1f6ff00"
					@click="jumpMine" />
			</view>
			<view class="title_">我的推广</view>
		</view>
		<!-- 我的信息 -->
		<view class="my_info">
			<view class="left_">
				<up-image
					:src="userData.avatarUrl ? userData.avatarUrl: 'https://static.tbmall.xin/static/logo_y.png'"
					width="50" height="50" bgColor="#f1f6ff00" shape="circle" />
				<view class="left_msg">
					<view>
						<text>{{ userData.nickname || '信任桥用户' }}</text>
						<text style="margin-left: 20rpx;">{{ userData.gradeName }}</text>
					</view>
					<view class="left_msg_title">ID:{{ userData.id || 0 }}</view>
				</view>
			</view>
			<view class="right_" v-if="performanceData && performanceData.seniorId">
				<view>上级ID：{{ performanceData.seniorId || 0 }}</view>
			</view>
			<!-- 绑定 -->
			<view v-else @click="bindHowShow = true;" class="bind_how"> 点击绑定</view>

		</view>

		<view class="my_team_content_warp">
			<!-- 我的团队 -->
			<view class="card_comm my_team" @click="jumpMyTeam">
				<view class="card_title_comm">
					我的推广
				</view>
				<view class="my_team_count">
					<view style="margin-right: 10rpx;">{{ (performanceData && performanceData.teamCount) || 0 }}人</view>
					<view style="margin-top: 10rpx;">
						<up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00" />
					</view>
				</view>
			</view>
			<!-- 团队业绩 -->
			<view class="card_comm">
				<view class="card_title_comm card_title_comm2">
					<view>推广业绩</view>
					<up-image src="/pages/rwa_package/static/tips.png" width="16" height="16" bgColor="#f1f6ff00"
						@click="openTeamShow = true;" />
				</view>
				<view class="performance">
					<view class="performance_item">
						<view class="title_comm">{{ performanceData && performanceData.teamAmount || 0 }}</view>
						<view class="data_comm">订单金额</view>
					</view>
					<view class="fg_comm"></view>
					<view class="performance_item">
						<view class="title_comm">{{ performanceData && performanceData.teamNum || 0 }}</view>
						<view class="data_comm">订单数量</view>
					</view>
					<!-- <view class="fg_comm"></view> -->
					<!-- <view class="performance_item">
						<view class="title_comm">{{ performanceData && performanceData.myAmount || 0 }}</view>
						<view class="data_comm">直购订单金额</view>
					</view>
					<view class="fg_comm"></view>
					<view class="performance_item">
						<view class="title_comm">{{ performanceData && performanceData.myNum || 0 }}</view>
						<view class="data_comm">直购订单数</view>
					</view> -->
				</view>
			</view>
			<!-- 提成统计-->
			<view class="royalty_warp">
				<!-- 提成货币 -->
				<view class="card_item_comm"  style="padding: 30rpx 30rpx 0;">
					<view class="card_title_comm">
						贡献值奖励
					</view>
					<view class="commission_count">
						<view style="margin-right: 10rpx;">
							{{ selAcctCategory && Object.keys(selAcctCategory).length !== 0 ? selAcctCategory.value : '请选择' }}
						</view>
						<view style="margin-top: 10rpx;">
							<up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00" />
						</view>
					</view>
				</view>
				<view class="card_item_comm">
					<view class="card_title_comm card_title_comm2">
						<view>奖励统计</view>
						<up-image src="/pages/rwa_package/static/tips.png" width="16" height="16" bgColor="#f1f6ff00"
							@click="openTcShow = true;" />
					</view>
					<view class="performance">
						<view class="amount_item">
							<view class="title_comm">{{ (rewardSummary && rewardSummary.todayAmount) || 0 }}</view>
							<view class="data_comm">今日</view>
						</view>
						<view class="fg_comm"></view>
						<view class="amount_item">
							<view class="title_comm">{{ (rewardSummary && rewardSummary.unSettleAmount) || 0 }}</view>
							<view class="data_comm">当前未结算</view>
						</view>
						<view class="fg_comm"></view>
						<view class="amount_item">
							<view class="title_comm">{{ (rewardSummary && rewardSummary.settleAmount) || 0 }}</view>
							<view class="data_comm">已结清</view>
						</view>
					</view>
				</view>
				<view class="card_fg_comm"></view>
				<view class="card_item_comm">
					<view class="card_title_comm">奖励来源</view>
					<view class="royalty_list">
						<scroll-view scroll-y="true" @scrolltolower="loadMore"
							:style="{ 'height': 'calc(100vh - 1220rpx)' }">
							<view class="royalty_item" v-for="(item, index) in royaltyList" :key="index"
								v-if="royaltyList && royaltyList.length !== 0">
								<view>
									<view class="royalty_title_">{{ getValue(BALANCE_TYPE, item.bizType) }}</view>
									<view class="royalty_data_">{{ formatDate(item.ctdate) }}</view>
								</view>
								<view>
									<view class="royalty_title_ royalty_title_amount">{{ item.amount }}</view>
									<view class="royalty_data_">{{ item.status ? "已结算" : "未结算" }}</view>
								</view>
							</view>
							<view v-else class="not_order_warp">
								<up-image src="https://static.tbmall.xin/static/not_order.png"
									width="80" height="80" bgColor="#f1f6ff00"></up-image>
								<view class="not_order_msg_warp">暂无相关数据</view>
							</view>
							<view v-if="royaltyLoading" style="text-align: center;">加载中...</view>
						</scroll-view>
					</view>

				</view>
			</view>
		</view>
		<up-picker :show="currencyShow" ref="uPickerRef" :columns="currencyColumns" @confirm="currencyConfirm"
			:loading="currencyLoading" keyName="value" itemHeight="34" @cancel="currencyShow = false"
			@close="currencyShow = false"></up-picker>
		<!-- 团队业绩 -->
		<up-modal :show="openTeamShow" :showConfirmButton="false">
			<view class="slot-content">
				<view class="close_warp" @click="openTeamShow = false;">
					<u-icon size="22" name="close" ></u-icon>
					<!-- <up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
				</view>
				<view class="content_">
					<view class="content_1">温馨提示</view>
					<view class="content_2"><text style="font-weight: 400;color:#666">1、订单金额：邀请的所有人总消费金额</text></view>
					<view class="content_2"><text style="font-weight: 400;color:#666">2、订单数量：邀请的所有人下单总订单数</text></view>
					<view class="content_2"><text style="font-weight: 400;color:#666">3、直购订单金额：直接邀请的总订单金额</text></view>
					<view class="content_2"><text style="font-weight: 400;color:#666">4、直购订单数：直接邀请的总订单数</text></view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="openTeamShow = false;">确定</view>
				</view>
			</view>
		</up-modal>
		<!-- 提成统计 -->
		<up-modal :show="openTcShow" :showConfirmButton="false">
			<view class="slot-content">
				<view class="close_warp" @click="openTcShow = false;">
					<u-icon size="22" name="close" ></u-icon>
					<!-- <up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
				</view>
				<view class="content_">
					<view class="content_1">温馨提示</view>
					<view class="content_2"><text style="font-weight: 400;color:#666">1、今日：今日0点到当前时间的数据</text></view>
					<view class="content_2"><text style="font-weight: 400;color:#666">2、当前未结算：当前所有收货后未结算的数据</text></view>
					<view class="content_2"><text style="font-weight: 400;color:#666">3、直购订单金额：直推的总订单金额</text></view>
					<view class="content_2"><text style="font-weight: 400;color:#666">4、已结算：所有已结算的数据</text></view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="openTcShow = false;">确定</view>
				</view>
			</view>
		</up-modal>

		<!-- 绑定 -->
		<up-modal :show="bindHowShow" :showConfirmButton="true" :showCancelButton="true" @confirm="onBindConfirm"
			@cancel="bindHowShow = false" class="bind-show-model">
			<up-input placeholder="输入邀请码" border="surround" v-model="bindValue"></up-input>
		</up-modal>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import {
		getPerformance,
		getAcctCategory,
		getRewardSummaryRecord,
		getRewardSummary
	} from '@/pages/mine_package/api/team.js';
	import {
		formatDate
	} from '@/utils/index.js';
	import {
		BALANCE_TYPE,
		getValue
	} from '@/utils/enumUtils.js';
	import {
		getStorageFun,
		USER_DATA
	} from '@/utils/auth.js';
	import {
		getUserInfo,
		bindInvitationCode
	} from '@/api/auth.js'

	export default {
		computed: {
			BALANCE_TYPE() {
				return BALANCE_TYPE;
			},
		},
		data() {
			return {
				royaltyForm: {
					page: 1,
					pageSize: 15,
					category: null,
				},
				royaltyList: [], // 提成来源
				royaltyLoading: false,
				currencyShow: false,
				currencyColumns: [],
				currencyLoading: false,
				performanceData: {},
				selAcctCategory: {}, // 选择的账户
				rewardSummary: {}, // 提成统计
				openTeamShow: false, // 团队业绩的提示
				openTcShow: false, // 提成统计
				userData: {}, // 当前登录对象
				bindHowShow: false,
				bindValue: '',
			};
		},
		mounted() {
			this.getUserInfo();
			this.getPerformance();
			this.getAcctCategory();
		},
		methods: {
			formatDate,
			getValue,
			async onBindConfirm() {
				const result = await bindInvitationCode({
					inviteCode: this.bindValue,
				})

				if (result && result.bizcode === 100) {
					this.bindHowShow = false;
					this.$refs.uToastRef.show({
						type: 'success',
						message: "绑定成功",
					});
					this.getUserInfo();
					this.getPerformance();
					this.getAcctCategory();
				}

			},
			jumpMine() {
				uni.switchTab({ // 首页
					url: '/pages/mine/mine',
				})
			},
			jumpMyTeam() {
				const userData = getStorageFun(USER_DATA);
				uni.navigateTo({
					url: '/pages/mine_package/mine_my_team_list/mine_my_team_list',
				})
			},
			// 查询用户信息
			async getUserInfo() {
				const result = await getUserInfo();
				if (result && result.bizcode === 100) {
					const data = result.data;
					this.userData = result.data || {};
				}
			},
			// 查询团队业绩
			async getPerformance() {
				const resp = await getPerformance();
				if (resp && resp.bizcode === 100) {
					this.performanceData = resp.data;
				}
			},

			// 查询账户类型
			async getAcctCategory() {
				const resp = await getAcctCategory();
				if (resp && resp.bizcode === 100) {
					const data = resp.data || [];
					this.currencyColumns = [data];
					if (data && data.length !== 0) {
						this.selAcctCategory = data[0];
						this.royaltyForm.category = data[0].key;
						this.getRewardSummary();
						this.loadData();
					}
				}
			},

			// 选择地址的弹框
			currencyShowCheck(status) {
				this.currencyShow = status;
			},
			// 提交地址
			currencyConfirm(e) {
				const {
					columnIndex,
					value,
					values,
					index,
				} = e;
				const data = value[0];
				this.royaltyList = [];
				this.royaltyForm.page = 1;
				this.selAcctCategory = data;
				this.royaltyForm.category = data.key;
				this.getRewardSummary();
				this.loadData();
				this.currencyShowCheck(false);
			},


			// 查询提成概括
			async getRewardSummary() {
				const params = {
					category: this.royaltyForm.category,
				};
				const resp = await getRewardSummary(params);
				if (resp && resp.bizcode === 100) {
					this.rewardSummary = resp.data || [];
				}
			},

			// 加载数据的方法
			async loadData() {
				if (this.royaltyLoading) return; // 如果正在加载，则不重复加载
				this.royaltyLoading = true; // 设置加载状态为true
				try {
					// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
					const newData = await this.fetchData();
					if (newData.entitys && newData.entitys.length !== 0) {
						this.royaltyList = [...this.royaltyList, ...newData.entitys]; // 将新数据添加到列表中
						this.royaltyForm.page++; // 页码加1
					}
				} catch (error) {
					console.error('加载数据失败:', error);
				} finally {
					this.royaltyLoading = false; // 设置加载状态为false
				}
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData() {
				const params = {
					...this.royaltyForm,
				}
				const data = await getRewardSummaryRecord(params);
				if (data && data.bizcode === 100 && data.data) {
					return data.data
				} else {
					return [];
				}
			},
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my_team_warp {
		background-color: $app-bt-bj;
		height: calc(100vh - 144rpx);
		overflow: hidden;
		padding: 114rpx 0rpx 30rpx;

		.my_team_content_warp {
			padding: 0 30rpx;
		}

		.header_ {
			display: flex;
			align-items: center;
			justify-content: left;
			padding: 0 30rpx;
		}

		.title_ {
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-left: 20rpx;
		}

		.my_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #FFFFFF;
			margin-top: 30rpx;
			padding-left: 30rpx;

			.left_ {
				display: flex;
				align-items: center;
			}

			.left_msg {
				margin-left: 10rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.left_msg_title {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}

			.right_ {
				font-size: 23rpx;
				color: #000000;
				line-height: 33rpx;
				background-color: #EEEEEE;
				border-radius: 30rpx 0 0 30rpx;
				padding: 10rpx 20rpx;
			}
		}

		.card_comm {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 30rpx;
			margin-top: 20rpx;
		}

		.card_title_comm {
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
		}

		.card_title_comm2 {
			display: flex;
			justify-content: space-between;
		}

		.card_fg_comm {
			height: 10rpx;
			background: #EEEEEE;
			width: 100%;

		}

		.title_comm {
			font-weight: bold;
			font-size: 28rpx;
			color: #111111;
		}

		.fg_comm {
			width: 1rpx;
			height: 40rpx;
			background: #EEEEEE;
		}

		.data_comm {
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;
		}

		.card_item_comm {
			padding: 30rpx;
		}

		.my_team {
			display: flex;
			justify-content: space-between;

			.my_team_count {
				display: flex;
				align-items: center;
			}
		}

		.performance {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20rpx;

			.performance_item {
				width: 24%;
				text-align: center;
			}
		}

		.royalty_warp {
			border-radius: 30rpx;
			margin-top: 20rpx;
			background: #FFFFFF;

			.amount_item {
				width: 30%;
				text-align: center;
			}

			.amount_fg {
				width: 100%;
				height: 1rpx;
				background: #EEEEEE;
				border-radius: 1rpx;
				margin: 20rpx 0;
			}
		}

		.royalty_list {
			margin-top: 20rpx;

			// height: 440rpx;
			// overflow: auto;
			.royalty_item {
				display: flex;
				justify-content: space-between;
				background: #F5F5F5;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}

			.royalty_title_ {
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
			}

			.royalty_title_amount {
				color: $app-bt-bj;
			}

			.royalty_data_ {
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}

		.content_1 {
			margin-bottom: 40rpx;
		}

		.content_2 {
			text-align: left;
			margin-top: 10rpx;
		}
	}

	.commission_count {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(0, 0, 0, 0.06);
		border-radius: 8rpx;
		padding: 16rpx 10rpx 16rpx 26rpx;
		margin-top: 20rpx;
		font-size: 27rpx;
		color: rgba(0, 0, 0, 0.4);
		line-height: 38rpx;
	}

	.bind_how {
		width: 150rpx;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 45rpx;
		border: 1rpx solid #fff;
		margin-right: 10rpx;
		font-size: 24rpx;
	}
</style>