jiuyiUniapp/jiuyi2/pages/index/myTeam.vue

<script setup>
	/**
	 * 我的团队
	 */
	import {
		onMounted,
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch,
		defineExpose,
	} from 'vue';
	import {
		useStore,
	} from 'vuex'
	import {
		onLoad,
		onReady,
		onHide,
		onShow,
		onUnload,
	} from '@dcloudio/uni-app'
	// 
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js';

	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 二维码数据
	const qrData = ref("")
	// 我的团队数据
	const team = ref({})
	// 展示我的团队
	const showTeam = ref(false)

	onLoad(() => {
		myQrcode()
		myTeam()
	})

	// 我的团队
	function myTeam() {
		api.team.myTeam({}).then(rs => {
			if (rs.code == 200) {
				team.value = rs.data
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 我的团队
	function lowTeam(item) {
		item.showSecond = !item.showSecond
	}

	// 查看二维码
	function myQrcode() {
		api.intergral.myQrcode({}).then(rs => {
			qrData.value = `data:image/png;base64, ${uni.arrayBufferToBase64(rs)}`
		})
	}
</script>

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

		<view class="log mtb60 f28" v-if="team.referrerUser">
			<view class="title tac f32">上级推荐人</view>
			<view class="list">
				<view class="item rows mtb20">
					<view class="f1">
						<view>账户昵称</view>
					</view>
					<view class="">{{team.referrerUser.userNickname}}</view>
				</view>
			</view>
		</view>

		<view class="log mtb60 f28" v-if="team.referrerReferrerUser">
			<view class="title tac f32">我的推荐人</view>
			<view class="list">
				<view class="item rows mtb20">
					<view class="f1">
						<view>账户昵称</view>
					</view>
					<view class="">{{team.referrerReferrerUser.userNickname}}</view>
				</view>
			</view>
		</view>

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

			<view class="secTitle rows mt30">
				<view class="f1">
					<text>当前团队基数</text>
					<text v-if="team.count">{{team.count}}人</text>
				</view>
				<view class="arrow" :class="{'active': showTeam}" @click="showTeam = !showTeam">
					<uni-icons type="right" />
				</view>
			</view>

			<view class="team oh mt20 plr30" v-if="showTeam">
				<!-- 一级 -->
				<view class="li mtb30" v-for="(item,index) in team.sonUser" :key="item.id">
					<view class="menber df aic">
						<view class="c333 f32">{{item.userNickname}}</view>
						<template v-if="item.sonList[0]">
							<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 />
						</template>
					</view>

					<!-- 二级人数 -->
					<view class="list" v-if="item.showSecond">
						<view class="secLi df" v-for="(secItem,secIndex) in item.sonList" :key="secItem.id">

							<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': secItem.isShop == 1}">
									<view class="count mr20 plr10 cfff br10">商</view>
									<view class="name">{{secItem.userNickname}}</view>
									<view class="label ml10">{{secItem.count}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fill"></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 {
				.style1 {
					// color: #FF8400;

					// 商家标签
					.label {
						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>