retailStore/pages/selfCenter/recommendTeam/index.vue

<template>
	<view>
		<view class="leader-info">
			<image src="/static/bed2-bg.png"></image>
			<view class="leader-column">
				<view>
					<!-- <text>晚霞</text><text class="invite">我</text> -->
					<text>{{ selfObj.name }}</text>
					<text class="mySelf">我</text>
				</view>
				<view>
					<text style="color:#ccc">{{ selfObj.phone }}</text>
					<!-- <text style="color:#ccc;font-size: 28rpx;">188****2600</text> -->
				</view>
			</view>
		</view>
		<view v-for="(item, index) in teamList" :key="index" @click.stop="showChild(index)">
			<view class="leader-info">
				<image :src="!arrowFlagList[index] ? '/static/arrow-right3.png' : '/static/arrow-down.png'" class="arrow-style"></image>
				<image src="/static/bed2-bg.png"></image>
				<view class="leader-column">
					<view class="teamLevel-box">
						<view style="white-space: nowrap;">{{ item.name }}</view>
						<view class="invite">一级分销</view>
					</view>
					<view>
						<text style="color:#ccc;font-size: 28rpx;">{{ item.phone }}</text>
					</view>
				</view>
			</view>
			<view class="leader-info" v-show="arrowFlagList[index]" v-for="childItem in item.child" :key="childItem.id">
				<image src="/static/arrow-right3.png" class="arrow-style" style="visibility: hidden;"></image>
				<image src="/static/bed2-bg.png"></image>
				<view class="leader-column">
					<view class="teamLevel-box">
						<view style="white-space: nowrap;">{{ childItem.name }}</view>
						<view class="invited">二级分销</view>
					</view>
					<view>
						<text style="color:#ccc;font-size: 28rpx;">{{ childItem.phone }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'selfCenter',
			arrowFlagList: [],
			selfObj: {},
			teamList: [
				{
					name: '晚霞',
					role: '我',
					phone: '188****2600',
					id: 1
				},
				{
					name: '午霞',
					role: '一级分销',
					phone: '158****2666',
					id: 2,
					child: [
						{
							name: '早霞',
							role: '二级分销',
							phone: '168****2688',
							id: 3
						},
						{
							name: '早霞666',
							role: '二级分销',
							phone: '168****2688',
							id: 656
						}
					]
				},
				{
					name: '午霞2',
					role: '一级分销',
					phone: '158****2666',
					id: 4,
					child: [
						{
							name: '早霞2',
							role: '二级分销',
							phone: '168****2688',
							id: 5
						}
					]
				}
			]
		};
	},
	onLoad() {
		this.filterSelf();
	},
	methods: {
		filterSelf() {
			let that = this;
			let obj = that.teamList.filter((item, index) => {
				return item.role === '我';
			});
			that.selfObj = obj[0];
			that.teamList = that.teamList.filter((item, index) => {
				return item.role !== '我';
			});
			for (let i = 0; i < that.teamList.length; i++) {
				that.arrowFlagList.push(false);
			}
		},
		showChild(index) {
			this.arrowFlagList.splice(index, 1, !this.arrowFlagList[index]);
		}
	}
};
</script>

<style>
.leader-info {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 20rpx;
	border-bottom: 1px solid #ccc;
}
.leader-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 90rpx;
	font-size: 30rpx;
}
.leader-info image {
	height: 75rpx;
	width: 75rpx;
	border-radius: 50%;
	border: 1px solid #eee;
	margin-right: 3%;
}
.invite {
	background: red;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx;
	border-radius: 8rpx;
	margin-left: 5%;
	width: 50px;
}

.mySelf {
	background: orange;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx;
	border-radius: 8rpx;
	margin-left: 5%;
	width: 50px;
}

.invited {
	background: grey;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx;
	border-radius: 8rpx;
	margin-left: 5%;
	width: 50px;
}

.teamLevel-box {
	display: flex;
	align-items: center;
}
.arrow-style {
	width: 40rpx !important;
	height: 40rpx !important;
	border: none !important;
}
</style>