<template>
	<view class="content">
		<view class="header">
			<view class="userinfo">
				<view class="avator" >
					<image :src="avatar==''?'../../static/headtou.png':avatar" />
					<!-- <image src="../../static/userpic.png" mode="widthFix" /> -->
				</view>
				<view class="infoBox">
					<view class="identity">
						<view class="name" v-if="nickname==''">暂无昵称</view>
						<view class="name" v-else>{{nickname}}</view>
						<view class="vip flexone" v-if="userinfo.is_card==1||userinfo.is_vip==1||userinfo.is_company_vip==1">
							<image src="../../static/huiyuan.png" mode="widthFix" v-if="userinfo.is_card==1" />
							<view class="vipname" v-if="userinfo.is_vip==1">{{userinfo.level.name1}}</view>
							<view class="vipname" v-if="userinfo.is_company_vip==1">{{userinfo.level.name2}}</view>
						</view>
					</view>
					<view class='tuijian' v-if="parent_user.length!=0">推荐人：{{parent_user.nickname}}</view>
					<view class='tuijian' v-else>暂无推荐人</view>
				</view>
			</view>
			<view class="huiyuanimg">
				<image src="../../static/vipbg.png" mode=""></image>
				<view class="huiyuannei flextwo">
					<view class='huiyuanneileft flexone'>
						<view class="zuanshi">
							<image src="../../static/zuanshi.png" mode=""></image>
						</view>
						<view class="huiprice">
							<view class="huimonth">可提现佣金</view>
							<view class="huimoney">¥{{userinfo.distribution_money}}</view>
						</view>
					</view>
					<view class="huiyuanright" @click="tixian">提现</view>
				</view>
			</view>
			
		</view>
		<view class="xiaobox flextwo">
			<view class="xiaoitem flexfour">
				<view class="xiaotop">
					可提现佣金
				</view>
				<view class="xiaobot">
					￥{{userinfo.distribution_money}}
				</view>
			</view>
			<view class="xiaoitem flexfour">
				<view class="xiaotop">
					未结算佣金
				</view>
				<view class="xiaobot">
					￥{{userinfo.wjsyj}}
				</view>
			</view>
		</view>
		<view class="kindbox flexone">
			<view class="kinditem flexfour"  @click="fenxiao" data-url="/pages/usercenter/fenxiaoyongjin">
				<view class="kindimg">
					<image src="../../static/icon_yongjin.png" mode=""></image>
				</view>
				<view class='kindname'>分销佣金</view>
				<view class="kindmoney">￥{{userinfo.fxyj}}</view>
			</view>
			<view class="kinditem flexfour"  @click="fenxiao" data-url="/pages/usercenter/fenxiaodingdan">
				<view class="kindimg">
					<image src="../../static/icon_dingdan.png" mode=""></image>
				</view>
				<view class='kindname'>分销订单</view>
				<view class="kindmoney">￥{{userinfo.fxdd}}</view>
			</view>
			<view class="kinditem flexfour itemthree"  @click="fenxiao" data-url="/pages/usercenter/fenxiaotidetail">
				<view class="kindimg">
					<image src="../../static/icon_mingxi.png" mode=""></image>
				</view>
				<view class='kindname'>提现明细</view>
				<view class="kindmoney">￥{{userinfo.txmx}}</view>
			</view>
			
			<view class="kinditem flexfour" @click="fenxiao" data-url="/pages/usercenter/fenxiaomyteam">
				<view class="kindimg">
					<image src="../../static/icon_team.png" mode=""></image>
				</view>
				<view class='kindname'>我的团队</view>
				<view class="kindmoney">{{userinfo.team_number}}</view>
			</view>
			<view class="kinditem flexfour">
				<view class="kindimg">
					<image src="../../static/icon_qr.png" mode=""></image>
				</view>
				<view class='kindname'>推广二维码</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				showbanben: false,
				userinfo:'',
				nickname:'',
				avatar:'',
				parent_user:''
			}
		},
		onLoad() {
		this.getuserinfo()


		},
		methods: {
			// 分销跳转
			fenxiao(e){
				console.log(e)
				let url=e.currentTarget.dataset.url;
				uni.navigateTo({
					url:url
				})
			},
			tixian(){
				uni.navigateTo({
					url:'/pages/usercenter/cashOut'
				})
			},
			getuserinfo(){
				let that = this;
				var url = 'distribution/index';
				var params = {

				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.userinfo = res.data.data;
					this.parent_user=res.data.data.parent_user;
					console.log(this.parent_user)
					that.nickname = res.data.data.nickname;
					that.avatar = res.data.data.avatar;


				}).catch((err) => {

				})
			},

		}

	}
</script>

<style>
	@import url('../../base/usercenter');
	.kindimg{
		width:72rpx;
		height:72rpx;
		font-size: 0;
	}
	.kinditem{
		margin-right:110rpx;
		margin-bottom:40rpx;
	}
		
	.itemthree{
		margin-right:0
	}
	.kindname{
		color:#3D444C;
		font-size: 24rpx;
		margin-top:2rpx;
	}
	.kindmoney{
		color:#06121F;
		font-size: 24rpx;
		font-weight: bold;
		margin-top:10rpx;
	}
	.kindbox{
		width:686rpx;
		padding: 40rpx 0 0 86rpx;
		background: #fff;
		box-sizing: border-box;
		margin:32rpx auto 0;
		flex-wrap: wrap;
	}
	.xiaobox{
		width:686rpx;
		height:146rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		margin:34rpx auto 0;
		padding: 0 116rpx;
		box-sizing: border-box;
	}
	.xiaotop{
		color:#8C9198;
		font-size: 24rpx;
	}
	.xiaobot{
		color:#06121F;
		font-size: 26rpx;
		font-weight: bold;
		margin-top:6rpx;
	}
	page {
		background-color: #F9F9F9;
	}
	.tuijian{
		color:#C29445;
		font-size: 22rpx;
		margin-top:24rpx;
	}
	
	.header {
		background: #fff;
		padding: 0 32rpx 32rpx;
		box-sizing: border-box;
	}
	
	.userinfo {
		padding: 32rpx 0;
		
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.avator {
		width: 128rpx;
		height: 128rpx;
		font-size: 0;
		border-radius: 50%;
		border-radius: 64rpx;
	}
	
	.avator image {
		width: 100%;
		border-radius: 50%;
	}
	
	.infoBox {
		max-width: 466rpx;
		margin-left: 28rpx;
	
	}
	
	.identity {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}
	
	.name {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(19, 20, 21, 1);
	}
	
	.vip {
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		box-sizing: border-box;
		background: #F7CB8A;
		border-radius: 20rpx;
		margin-left: 16rpx;
		/* background: linear-gradient(90deg, rgba(244, 210, 151, 1) 0%, rgba(252, 191, 117, 1) 100%);
		border-radius: 20rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(120, 71, 0, 1);
		padding: 4rpx 12rpx;
		margin-left: 16rpx; */
	}
	
	.vipname {
		color: #784700;
		font-size: 22rpx;
	}
	
	.vip image {
		width: 24rpx;
		margin-right: 6rpx;
	}
	
	.userType {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(61, 69, 76, 1);
		line-height: 40px;
	}
	
	.userActive {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(194, 148, 69, 1);
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.userActive image {
		width: 32rpx;
		margin-right: 8rpx;
	}
	
	.setup {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 32rpx;
		top: 52rpx;
	}
	
	.setup image {
		width: 100%;
	}
</style>