jiuyiUniapp/jiuyi/pages/index/myTeam.vue

<script setup>
	/**
	 * 我的团队
	 */
	import {
		onMounted,
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch,
		defineExpose,
	} from 'vue';
	import {
		useStore,
	} from 'vuex'

	import myteamApi from '@/api/myteam.js';
	import intergralApi from '@/api/intergral.js';
	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	const myQrcodeData = ref("")
	const teamData = ref([])
	const lowData = ref([])
	myQrcode()
	myTeam()

	// 我的团队
	function myTeam() {
		myteamApi.myTeam({

		}).then(rs => {
			teamData.value = rs.data
			console.log(rs)
		})
	}

	// 我的团队
	function lowTeam(item) {
		// 如果展示有数据
		if (item.showSecond) {
			item.showSecond = false
			lowData.value.length = 0
			return
		}
		myteamApi.lowTeam({
			query: {
				parentId: item.userId,
			}
		}).then(rs => {
			if (rs.code == 200) {
				lowData.value = rs.data
				if (rs.data.length > 0) {
					item.showSecond = true
				}
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 查看二维码
	function myQrcode() {
		intergralApi.myQrcode({}).then(rs => {
			if (rs.code == 200 && rs.data) {
				myQrcodeData.value = rs.data
			}
		})
	}
</script>

<template>
	<view class="appbw plr50 c333 f36">
		<view class="qrBox ver">
			<image class="qr" :src="myQrcodeData" mode="aspectFill" />
		</view>

		<view class="myTeam mtb60">
			<view class="title tac">我的团队</view>

			<!-- 团队 -->
			<view class="secTitle rows mt20">
				<view class="f1">当前团队基数</view>
				<view class="arrow" :class="{'active': 1}">
					<uni-icons type="right" />
				</view>
			</view>

			<!-- 团队 -->
			<view class="team oh mt30 plr30">
				<!-- 一级 -->
				<view class="li mtb30" v-for="(item,index) in teamData" :key="index">
					<view class="menber df aic">
						<view class="c333 f32">{{item.nickName}}</view>
						<uni-icons @click="lowTeam(item)" type="up" color="#A45EFF" size="28rpx" v-if="item.showSecond" />
						<uni-icons @click="lowTeam(item)" type="plusempty" color="#A45EFF" size="28rpx" v-else />
					</view>

					<!-- 二级人数 -->
					<view class="list" v-if="item.showSecond">
						<view class="secLi df" v-for="(secItem,secIndex) in lowData" :key="secIndex">
							<!-- 竖线 -->
							<view class="vertical df fdc">
								<view class="top"></view>
								<view class="bottom"></view>
							</view>

							<!-- 内容 -->
							<view class="content df aic f1 ptb10">
								<view class="line"></view>
								<view class="ml10 df aic c999 f28" :class="{'style1': secIndex == 0}">
									<view class="">{{secItem.nickName}}</view>
								</view>
							</view>
						</view>
					</view>

				</view>


			</view>
		</view>

		<!-- 上级推荐人 -->
		<view class="log mtb60 f28" v-if="0">
			<view class="title tac f32">上级推荐人</view>
			<view class="list">
				<view class="item rows mtb20">
					<view class="f1">
						<view>账户昵称</view>
					</view>
					<view class="">杨先生</view>
				</view>
				<view class="item rows mtb20">
					<view class="f1">
						<view>手机号</view>
					</view>
					<view class="">15xxxxxxxxx</view>
				</view>
			</view>
		</view>

		<!-- 上级推荐人 -->
		<view class="log mtb60 f28" v-if="0">
			<view class="title tac f32">间接推荐人</view>
			<view class="list">
				<view class="item rows mtb20">
					<view class="f1">
						<view>账户昵称</view>
					</view>
					<view class="">杨先生</view>
				</view>
				<view class="item rows mtb20">
					<view class="f1">
						<view>手机号</view>
					</view>
					<view class="">15xxxxxxxxx</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 二维码
	.qrBox {
		margin-top: 5vh;

		.qr {
			width: 374rpx;
			height: 374rpx;
		}
	}

	// 箭头
	.arrow {
		&.active {
			transform: rotate(90deg);
		}
	}

	// 团队
	.team {
		background-color: #FFFBF3;

		// 二级列表
		.list {
			padding-left: .5em;

			// 二级项
			.secLi:nth-last-child(1) {
				.bottom {
					opacity: 0;
				}
			}

			// 竖线
			.vertical {

				.top,
				.bottom {
					flex: 1;
					border-left: 2rpx solid #8A8A8A;
				}
			}

			// 横线
			.line {
				width: 50rpx;
				border-top: 2rpx solid #8A8A8A;
			}

			// 内容
			.content {

				.label {
					display: none;
				}

				.style1 {
					color: #FF8400;

					// 商家标签
					.label {
						display: block;
						background-image: linear-gradient(144deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}

				// 计数
				.count {
					background-image: linear-gradient(114deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
				}
			}
		}
	}
</style>