boying/pages/user/team.vue

<template>
	<view class="content">
		<!-- 头部 -->

		<view class="container">
			<view class="jiedianbackground">
				<image src="../../static/img/jiedian.png" mode=""></image>
			</view>
			<view class="number-box">
				<view class="number">
					<text>{{childList.length}}</text>
					人
				</view>
				<view class="renshu">我的团队人数</view>
			</view>
		</view>
		<view class="message">
			<view class="back-box" @click="back()" v-if="id != userInfo.id">
				返回
			</view>
			<view class="relation-box">

				<view class="relation">
					<view class="headbox">
						<view class="head">
							<view class="photo">
								<image v-if="avatar" :src="avatar || '/static/error/missing-face.png'"></image>
							</view>
						</view>
					</view>
					<view class="information">
						<view class="name clamp">{{ name }}</view>
						<view class="cell clamp">{{ phone }}</view>
					</view>
				</view>
				<view class="sanchaji">
					<image src="../../static/img/sanchaji.png" mode=""></image>
				</view>
				<view class="subordinate flex">
					<view class="subordinate-box" v-for="(item, index) in childList" @click="findChildren(item)">
						<view class="head">
							<image :src="item.avatar || '/static/error/missing-face.png'" mode=""></image>
						</view>
						<view class="name clamp">{{ item.nickname }}</view>
						<view class="phone clamp">{{ item.mobile }}</view>
					</view>
					<template v-if="childList.length < 5">
						<view class="subordinate-box" v-for="item in (5-childList.length)">
							<view class="head"></view>
							<view class="name clamp"></view>
							<view class="phone clamp"></view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		children
	} from '@/api/user.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				name: '', //当前节点姓名
				phone: '', //当前节点手机号
				avatar: '', //当前节点头像
				id: '',
				childList: [], //当前节点的下级
				fatherList: []
			};
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		onLoad() {
			console.log(this.userInfo)
			this.name = this.userInfo.nickname;
			this.phone = this.userInfo.mobile;
			this.avatar = this.userInfo.avatar;
			this.id = this.userInfo.id
			this.loadData();
		},

		methods: {
			//返回

			loadData() {
				const obj = this;
				children({}, this.id).then(({
					data
				}) => {
					this.childList = data
					console.log(data)
				})
			},
			async findChildren(item) {
				//存father
				this.fatherList.push({
					name: this.name,
					phone: this.phone,
					avatar: this.avatar,
					id: this.id,
				})
				//设置新father

				this.id = item.id
				await this.loadData()
				this.name = item.nickname
				this.phone = item.mobile
				this.avatar = item.avatar
			},
			back() {
				let father = this.fatherList.pop()
				this.name = father.name
				this.phone = father.phone
				this.avatar = father.avatar
				this.id = father.id
				this.loadData()
			}
		}
	};
</script>

<style lang="scss">
	page {
		padding: 0;
		margin: 0;
		height: 100%;
		background-color: #000;
	}

	.container {
		width: 750rpx;
		height: 400rpx;
		position: relative;

		.jiedianbackground {
			position: absolute;
			width: 750rpx;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.number-box {
			width: 750rpx;
			height: 400rpx;
			position: absolute;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.number {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fad6b0;

				text {
					font-size: 72rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 86rpx;
				}
			}

			.renshu {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fad6b0;
			}
		}
	}

	.message {
		padding: 0 30rpx;
		position: relative;

		.back-box {
			width: 100rpx;
			height: 50rpx;
			border: 1px solid #fad6b0;
			// background-color: red;
			position: absolute;
			top: 0;
			right: 20rpx;
			color: #fad6b0;
			line-height: 50rpx;
			text-align: center;
			border-radius: 10rpx;
			font-size: 28rpx;
			z-index: 9;
		}

		.relation-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;


			.relation {
				position: relative;
				display: flex;
				align-items: center;

				.headbox {
					position: absolute;
					// width: 154rpx;
					// height: 154rpx;

					.head {
						width: 154rpx;
						height: 154rpx;
						background: #fff;
						box-shadow: 5rpx 0rpx 5rpx 0rpx rgba(110, 171, 78, 0.26);
						border-radius: 50%;
						overflow: hidden;

						.photo {
							width: 154rpx;
							height: 154rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.head-title {
						margin: -30rpx 30rpx 0 30rpx;
						width: 94rpx;
						height: 32rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					// .head-name{
					// 	max-width: 100%;
					// 	font-size: 32rpx;
					// 	font-weight: bold;
					// 	color: #333333;
					// }
					// .head-phone{
					// 	font-size: 26rpx;
					// 	font-weight: 500;
					// 	color: #999999;
					// }
				}

				.information {
					margin-left: 77rpx;
					display: flex;
					padding: 20rpx 10rpx;
					flex-direction: column;
					width: 297rpx;
					height: 137rpx;
					background: linear-gradient(90deg, #393326, #27221d);
					border: 4rpx solid #fad6b0;
					border-radius: 10rpx;

					.name {
						text-align: left;
						margin-left: 70rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #fad6b0;
					}

					.cell {
						text-align: left;
						margin-left: 70rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #fad6b0;
					}
				}
			}

			.sanchaji {
				margin: 30rpx 0;
				width: 90%;
				height: 91rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.subordinate {
				width: 750rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.subordinate-box {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;

					.head {
						border-radius: 50%;
						background: #fff;
						width: 120rpx;
						height: 120rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						max-width: 120rpx;
						margin-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.phone {
						max-width: 120rpx;
						margin-top: 10rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}

		.back {
			float: right;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 23rpx;
			}

			width: 104rpx;
			height: 39rpx;
			border: 2rpx solid #6eab4e;
			border-radius: 7rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6eab4e;
		}
	}
</style>