2021-9-24

api/apply.js

@@ -15,4 +15,30 @@ export function getApplyList(data) {
 		method:'get',
 		data
 	})
+}
+
+//通过审核
+export function passApply(data,id) {
+	return request({
+		url: '/api/activity/pass/' + id,
+		method:'post',
+		data
+	})
+}
+
+//审核不通过
+export function cancelApply(data,id) {
+	return request({
+		url: '/api/activity/cancel/' + id,
+		method:'post',
+		data
+	})
+}
+//上传凭证uploadApply
+export function uploadApply(data,id) {
+	return request({
+		url: '/api/activity/upload/' + id,
+		method:'post',
+		data
+	})
 }

pages/public/register.vue

@@ -101,7 +101,7 @@ export default {
 				mobile: obj.phone, //账号
 				code: obj.code, //验证码
 				password: obj.password ,//密码
-				spread:this.invitation//上级推广人
+				spread:2//上级推广人
 			}).then(function(e) {
 				uni.showToast({
 					title:'注册成功',

pages/upload/upload.vue

@@ -26,14 +26,20 @@
 	</view>
 </template>
 <script>
-
+	import {
+		uploadApply
+	} from '../../api/apply.js'
 	import { uploads } from '@/api/user.js';
 	export default {
 		data() {
 			return {
 				imgone: '',
-				imgtow: '',
+				imgtow: '',
+				apply_id: '',
 			}
+		},
+		onLoad(opt) {
+			this.apply_id = opt.id
 		},
 		methods: {
 			upimg(name) {
@@ -45,7 +51,38 @@
 				})
 			},
 			sub() {
-				
+				let obj = this
+				if(obj.imgone == '' && obj.imgtow == '') {
+					return obj.$api.msg('请上传凭证')
+				}
+				uni.showLoading({
+					title: '提交中...',
+					mask: true
+				})
+				let arr = []
+				if(obj.imgone) {
+					arr.push(obj.imgone)
+				}
+				if(obj.imgtow) {
+					arr.push(obj.imgtow)
+				}
+				console.log(arr,'arr')
+				uploadApply({
+					images:arr
+				},obj.apply_id).then( res => {
+					uni.hideLoading()
+					uni.showToast({
+						title:'提交成功',
+						duration:2000
+					});
+					setTimeout(function() {
+						uni.navigateBack();
+					}, 800);
+					console.log(res,'+++++++++++++++++')
+				}).catch( err => {
+					uni.hideLoading()
+					console.log(err)
+				})
 			}
 		}
 	}

pages/user/applyList.vue

@@ -9,31 +9,34 @@
 			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
 				<scroll-view scroll-y="true" class="list-scroll-content" :style="{'height':height}">
 					<!-- 申请列表 -->
-					<view class="apply-box" v-for="item in 20">
+					<!-- 空白页 -->
+					<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
+					<view class="apply-box" v-for="item in tabItem.orderList">
 						<view class="box-top">
-							<image src="" mode="" class="user-img"></image>
+							<image :src="item.user_info.avatar" mode="" class="user-img"></image>
 							<view class="user-info">
 								<view class="user-name clamp">
-									假猪套 假猪套假猪套假
+									{{item.user_info.nickname}}
 								</view>
 								<view class="user-phone">
-									13245678911
+									{{item.user_info.mobile}}
 								</view>
 							</view>
 						</view>
 						<view class="apply-info flex">
 							<view class="img-wrap">
-								<image src="" mode="" class="upimg" v-for="item in 2"></image>
+								<image :src="imgitem" mode="" class="upimg" v-for="imgitem in item.voucherimages"></image>
 							</view>
 							<view class="btn-wrap flex" v-if="tabCurrentIndex == 0">
-								<view class="btn btn-reject">拒绝</view>
-								<view class="btn btn-pass">通过</view>
+								<view class="btn btn-reject" @click="cancelApply(item)">拒绝</view>
+								<view class="btn btn-pass" @click="passApply(item)">通过</view>
 							</view>
 							<view class="btn-wrap" v-if="tabCurrentIndex == 1">
-								已通过
+								{{item.status == 1 ? "已通过": "未通过"}}
 							</view>
 						</view>
 					</view>
+					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
 				</scroll-view>
 			</swiper-item>
 		</swiper>
@@ -42,9 +45,14 @@
 
 <script>
 	import {
-		getApplyList
+		getApplyList, passApply, cancelApply
 	} from '../../api/apply.js'
+	
+	import empty from '@/components/empty';
 	export default {
+		components: {
+			empty
+		},
 		data() {
 			return {
 				height: '',
@@ -99,7 +107,7 @@
 				console.log('swiper')
 				let index = this.tabCurrentIndex;
 				let navItem = this.navList[index];
-				let state = navItem.state + 1;
+				let state = navItem.state;
 				if (source === 'tabChange' && navItem.loaded === true) {
 					//tab切换只有第一次需要加载数据
 					return;
@@ -114,8 +122,42 @@
 					page: navItem.page,
 					limit: navItem.limit,
 					status: state
-				}).then( res => {
+				}).then( ({data}) => {
+					let arr = data.list.map( item => {
+						let arr = item.voucherimages.split(',')
+						console.log(arr,'ddddddddddddddddddddddd')
+						item.voucherimages = arr
+						return item
+					})
+					navItem.orderList =  navItem.orderList.concat(arr)
+					if(data.list.length == navItem.limit) {
+						navItem.page++
+						navItem.loadingType = 'more'
+					}else {
+						navItem.loadingType = 'noMore'
+					}
+					this.$set(navItem,'loaded',true)
+				})
+			},
+			cancelApply(item) {
+				console.log(item,'cancelApply')
+				cancelApply({},item.id).then( res => {
+					console.log(res)
+					let s = obj.navList[obj.tabCurrentIndex].orderList.indexOf(item);
+					obj.navList[obj.tabCurrentIndex].orderList.splice(s, 1);
+				}).catch( err => {
+					console.log(err)
+				})
+			},
+			passApply(item) {
+				let obj = this
+				console.log('passApply')
+				passApply({},item.id).then( res => {
 					console.log(res)
+					let s = obj.navList[obj.tabCurrentIndex].orderList.indexOf(item);
+					obj.navList[obj.tabCurrentIndex].orderList.splice(s, 1);
+				}).catch(err => {
+					console.log(err)
 				})
 			}
 		}

pages/user/promotion.vue

@@ -21,8 +21,9 @@
 				<view class="font">成交人数</view>
 			</view>
 		</view> -->
-		<view class="swiper-box" :style="{ height: maxheight + 'px' }">
-			<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
+		<view class="swiper-box" :style="{ height: height }">
+			<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData" :style="{ height: height }">
+
 				<!-- 空白页 -->
 				<!-- <empty v-if="list.length === 0"></empty> -->
 
@@ -57,28 +58,25 @@ export default {
 		empty,
 		uniLoadMore
 	},
-	onReady() {
-		//初始化获取页面宽度
-		uni.createSelectorQuery()
-			.select('.content')
-			.fields(
-				{
-					size: true
-				},
-				data => {
-					console.log(data);
-					console.log(Math.floor((data.width / 750) * 300));
-					//保存头部高度
-					this.maxheight = data.height - Math.floor((data.width / 750) * 570);
-					console.log(this.maxheight);
-				}
-			)
-			.exec();
+	onReady(res) {
+		var obj = this;
+		uni.getSystemInfo({
+			success: resu => {
+				const query = uni.createSelectorQuery();
+				query.select('.swiper-box').boundingClientRect();
+				query.exec(function(res) {
+					console.log(res, 'ddddddddddddd');
+					obj.height = resu.windowHeight - res[0].top + 'px';
+					console.log('打印页面的剩余高度', obj.height);
+				});
+			},
+			fail: res => {}
+		});
 	},
 	data() {
 		return {
 			// 头部图高度
-			maxheight: '',
+			height: '',
 			tabCurrentIndex: 0,
 			all: '100',
 			list: '',
@@ -108,7 +106,8 @@ export default {
 				data.forEach(e => {
 					e.time = getTime(e.createtime);
 				});
-				obj.list = obj.list.concat(data);
+				// obj.list = obj.list.concat(data);
+				obj.list = data
 				obj.page++;
 				if (data.length == obj.limit) {
 					console.log(data.length, obj.limit, obj.loadingType);
@@ -242,8 +241,10 @@ page {
 }
 //列表
 
+
 .swiper-box {
 	padding-top: 80rpx;
+
 	.order-item {
 		padding: 20rpx 30rpx;
 		line-height: 1.5;

pages/user/shareQrCode.vue

@@ -1,42 +1,41 @@
 <template>
 	<view class="content">
-		<!-- <view class="qrimg">
-			<tki-qrcode
-				:cid="cid"
-				ref="qrcode"
-				:val="val"
-				:size="size"
-				:unit="unit"
-				:background="background"
-				:foreground="foreground"
-				:pdground="pdground"
-				:icon="icon"
-				:iconSize="iconSize"
-				:lv="lv"
-				:onval="onval"
-				:loadMake="loadMake"
-				:usingComponents="usingComponents"
-				@result="qrR"
-			/>
-		</view> -->
+		<view class="qrimg">
+			<tki-qrcode :key="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid" cid="tki-qrcode-canvas"
+				ref="qrcode"
+				:val="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid"
+				:size="300" unit="upx" background="#ffffff" foreground="#333333" pdground="#333333" icon=""
+				:iconSize="40" :lv="3" :onval="true" :loadMake="true" :usingComponents="true" />
+		</view>
+		<tki-qrcode :key="baseURL + '/index?petent=' + userInfo.id" cid="tki-qrcode-canvas"
+			ref="qrcode"
+			:val="baseURL + '/index?petent=' + userInfo.id"
+			:size="300" unit="upx" background="#ffffff" foreground="#333333" pdground="#333333" icon=""
+			:iconSize="40" :lv="3" :onval="true" :loadMake="true" :usingComponents="true" />
 		<!-- #ifndef MP-ALIPAY -->
-		<canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
+		<!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" /> -->
 		<!-- #endif -->
 		<!-- #ifdef MP-ALIPAY -->
-		<canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" class="tki-qrcode-canvas" />
+		<!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" class="tki-qrcode-canvas" /> -->
 		<!-- #endif -->
-		<view :style="{ display: loading ? 'none' : 'block' }" class="tki-qrcode-canvas"><image :src="ctxSrc" mode="scaleToFill" class="tki-qrcode-canvas"></image></view>
+		<!-- <view :style="{ display: loading ? 'none' : 'block' }" class="tki-qrcode-canvas"><image :src="ctxSrc" mode="scaleToFill" class="tki-qrcode-canvas"></image></view>
 		<view class="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
 			<text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
-		</view>
+		</view> -->
 	</view>
 </template>
 
 <script>
-// import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
-import { spreadBanner } from '@/api/user.js';
+import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
+import { spreadBanner } from '@/api/user.js';
+
+import { mapState, mapMutations } from 'vuex';
 export default {
-	// components: { tkiQrcode },
+	components: { tkiQrcode },
+	computed:{
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
+		...mapState(['baseURL'])
+	},
 	data() {
 		return {
 			cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
@@ -50,10 +49,10 @@ export default {
 			icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
 			iconSize: 40, //二维码图标大小
 			lv: 3, //容错级别
-			onval: false, //监听val值变化自动重新生成二维码
+			onval: true, //监听val值变化自动重新生成二维码
 			loadMake: false, //组件初始化完成后自动生成二维码，val需要有值
 			usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
-			showLoading: false, //是否显示loading
+			showLoading: true, //是否显示loading
 			loadingText: '二维码生成中', //loading文字
 			src: '', // 二维码生成后的图片地址或base64
 			ratio: 1, //页面比例用于计算
@@ -64,39 +63,39 @@ export default {
 		};
 	},
 	onLoad() {
-		this.loadCodeList()
-	},
-	onReady() {
-		let obj = this;
-		let query = uni.createSelectorQuery();
-		// 获取页面比例
-		query
-			.select('.content')
-			.fields(
-				{
-					size: true
-				},
-				e => {
-					// 保存比例
-					this.ratio = e.width / 750;
-				}
-			)
-			.exec();
-		// 获取画布宽高信息
-		query
-			.select('#qrShareBox')
-			.fields(
-				{
-					size: true
-				},
-				e => {
-					// 保存画布宽高信息
-					obj.canHeight = e.height;
-					obj.canWeidth = e.width;
-				}
-			)
-			.exec();
+		// this.loadCodeList()
 	},
+	// onReady() {
+	// 	let obj = this;
+	// 	let query = uni.createSelectorQuery();
+	// 	// 获取页面比例
+	// 	query
+	// 		.select('.content')
+	// 		.fields(
+	// 			{
+	// 				size: true
+	// 			},
+	// 			e => {
+	// 				// 保存比例
+	// 				this.ratio = e.width / 750;
+	// 			}
+	// 		)
+	// 		.exec();
+	// 	// 获取画布宽高信息
+	// 	query
+	// 		.select('#qrShareBox')
+	// 		.fields(
+	// 			{
+	// 				size: true
+	// 			},
+	// 			e => {
+	// 				// 保存画布宽高信息
+	// 				obj.canHeight = e.height;
+	// 				obj.canWeidth = e.width;
+	// 			}
+	// 		)
+	// 		.exec();
+	// },
 	methods: {
 		loadCodeList() {
 			// 加载二维码信息
@@ -278,5 +277,15 @@ export default {
 	&.action-share-bottom {
 		background-color: $color-gray;
 	}
-}
+}
+.tki-qrcode {
+	width: 300rpx;
+	height: 300rpx;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		margin: auto;
+	}
 </style>

pages/user/team.vue

@@ -1,316 +1,380 @@
-<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>100</text>
-					人
-				</view>
-				<view class="renshu">我的团队人数</view>
-			</view>
-		</view>
-		<view class="message">
-			<!-- <view class="back" @click="navBack()" v-if="parentList.length > 0">
-				<image src="../../static/img/zhengyi10.png" mode=""></image>
-				返回
-			</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">
-						<view class="head"><image :src="item.avter || '/static/error/missing-face.png'" mode=""></image></view>
-						<view class="name clamp">{{ item.name }}</view>
-						<view class="phone clamp">{{ item.phone }}</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: [] //当前节点的下级
-		};
-	},
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	onLoad() {
-		this.name = this.userInfo.nickname;
-		this.phone = this.userInfo.phone;
-		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)
-			})
-		}
-	}
-};
-</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;
-
-	.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;
-	}
-}
+<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>