retailStore/pages/selfCenter/recommendTeam/index.vue

<template>
	<view>
		<view class="leader-info">
			<image :src="selfObj.headimg || '/static/bed2-bg.png' "></image>
			<view class="leader-column">
				<view>
					<!-- <text>晚霞</text><text class="invite">我</text> -->
					<text>{{ selfObj.name || '-' }}</text>
					<text class="mySelf">{{ selfObj.role || '我' }}</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="item.headimg || '/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="childItem.headimg || '/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>
var md5 = require('../../../common/md5.js')
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.getTeamRequest();
	},
	methods: {
		filterSelf(arr) {
			let that = this;
			let obj = arr.filter((item, index) => {
				return item.role === '我';
			});
			that.selfObj = obj[0];
			arr = arr.filter((item, index) => {
				return item.role !== '我';
			});
			for (let i = 0; i < arr.length; i++) {
				that.arrowFlagList.push(false);
			}
			return arr;
		},
		getTeamRequest(){
			 uni.showLoading({
				title: '加载中',
			});
			 let that = this;
			 uni.request({
				url: getApp().globalData.shareUrl, //需要设置为全局
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					method: 'getUserTeamList',
					timestamp: getApp().globalData.globalTimestamp, //Date.now()
					uid:getApp().globalData.user_id,
					sign: md5('getUserTeamList' + getApp().globalData.globalTimestamp)
				},
				success: res => {
					if (res.data.code === 200) {
						uni.hideLoading();
						that.teamList = that.filterSelf(res.data.msg)
					}
				}
			 }); 
		},
		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: 55px;
	text-align: center;
}

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

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

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