<template name="invite">
	<view>
		<scroll-view scroll-y="true" style="height: 100vh;width: 100vw;background-color: #3A3943;">
			<view>
				<view class="top-bg bg-img" :style="'background-image: url('+STATIC_URL+'invite-bg.png);'">
					<view class="top-con flex flex-direction  align-center">
						<view class="text-white" style="font-size: 90rpx;font-weight: 700;">邀好友 升店主</view>
						<view class="text-black bg-white" style="font-size: 24rpx;line-height: 35rp;border-radius: 18rpx;padding: 0 60rpx;">仅需10位</view>
					</view>
				</view>
				<view class="user-box bg-img" :style="'background-image: url('+STATIC_URL+'bg02.png);'">
					<view class="user-con text-white">
						<view class="flex">
							<image class="avatar" v-if="userInfo.headImgUrl" :src="IMAGE_URL+userInfo.headImgUrl" mode="aspectFill"></image>
							<view class="user-name" style="margin-top: 10rpx;">{{userInfo.nickname}}</view>
						</view>
					</view>
					<view class="line-box">
						<view class="text-white flex" style="line-height: 60rpx;font-size: 24rpx;">
							已邀请 <text style="margin-left: 10rpx;"></text>{{hasInviteNum}}
						</view>
						<u-line-progress :show-percent="false" height="8" :percent="percent" active-color="#fff"
						 inactive-color="#991323"></u-line-progress>
						<view class="flex text-white num-con">
							<view class="flex-sub" v-for="(item,index) in 10" :key="index">
								<view class="flex flex-direction align-center" v-if="index==0||index==3||index==7||index==9">
									<i class="iconfont iconsanjiao" style="font-size: 48rpx;"></i>
									<view class="">{{index+1}}人</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="code-box bg-white">
					<!-- <view class="code-top">
						<view class="flex justify-center align-center" style="margin-bottom: 15rpx;">
							<image src="/static/shop/left.png" mode="widthFix"></image>
							<view style="padding: 0 20rpx;font-weight: 700;">专属邀请码</view>
							<image src="/static/shop/right.png" mode="widthFix"></image>
						</view>
						<view class="flex justify-center align-center">
							<view class="invitationNo">{{invitationNo}}<text class="text-red copy" v-if="invitationNo" @tap="copy">复制</text></view>
						</view>
					</view> -->
					<view class="code-bottom">
						<view class="txt">专属权益</view>
						<view class="item flex align-center">
							<image src="/static/shop/01.png" mode="widthFix"></image>
							<view class="">
								<view class="txt">自购省钱</view>
								<view class="num">自己购物，平台返还5%-50%佣金</view>
							</view>
						</view>
						<view class="item flex align-center">
							<image src="/static/shop/02.png" mode="widthFix"></image>
							<view class="">
								<view class="txt">分享赚钱</view>
								<view class="num">分享商品链接，用户购买无退货获得佣金</view>
							</view>
						</view>
						<view class="item flex align-center">
							<image src="/static/shop/03.png" mode="widthFix"></image>
							<view class="">
								<view class="txt">0元开店</view>
								<view class="num">零成本、零库存、零风险、零门槛
								</view>
							</view>
						</view>
						<view class="item flex align-center">
							<image src="/static/shop/04.png" mode="widthFix"></image>
							<view class="">
								<view class="txt">专属培训</view>
								<view class="num">享受专属老师教授营销技巧，轻松创业</view>
							</view>
						</view>
						<template v-if="roleLevel!=500">
							<view class="item flex align-center">
								<image src="/static/shop/05.png" mode="widthFix"></image>
								<view class="">
									<view class="txt">店主晋升</view>
									<view class="num">有机会晋升至白银店铺，享受团队红利</view>
								</view>
							</view>
							<view class="item flex align-center">
								<image src="/static/shop/06.png" mode="widthFix"></image>
								<view class="">
									<view class="txt">权益卡包</view>
									<view class="num">有机会获得权益卡，畅享升级或保级绿色通道</view>
								</view>
							</view>
						</template>
					</view>
				</view>
				
				
				<view class="steps-box bg-white">
					<view class="flex justify-center align-end" style="padding: 15rpx 0;">
						<image class="steps-t-pic" src="/static/shop/left1.png" mode="widthFix"></image>
						<view class="step-title">简单三步 立享财富</view>
						<image class="steps-t-pic" src="/static/shop/right2.png" mode="widthFix"></image>
					</view>
					<view class="steps-con flex justify-center">
						<view class="flex flex-direction align-center">
							<image class="steps-pic" src="/static/shop/icon01.png" mode="widthFix"></image>
							<view class="">分享链接</view>
							<view class="">给好友</view>
						</view>
						<view class="line"></view>
						<view class="flex flex-direction align-center">
							<image class="steps-pic" src="/static/shop/icon02.png" mode="widthFix"></image>
							<view class="">好友打开链接</view>
							<view class="">注册信息</view>
						</view>
						<view class="line"></view>
						<view class="flex flex-direction align-center">
							<image class="steps-pic" src="/static/shop/icon03.png" mode="widthFix"></image>
							<view class="">好友下载APP</view>
							<view class="">邀请成功</view>
						</view>
					</view>
				</view>
				
				<button class="text-white" style="background-color: #D5101A;height: 88rpx;line-height: 88rpx; font-size: 30rpx; margin:0 30rpx 100rpx;"
				 open-type="share">马上去邀请</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"invite",
		data() {
			return {
				STATIC_URL:this.STATIC_URL,
				IMAGE_URL: this.IMAGE_URL,
				roleLevel: 500,
				userInfo: {
					nickname: "",
					headImgUrl: ""
				},
				invitationNo: "",
				percent: 0,
				hasInviteNum: 0
			};
		},
		created() {
			this.roleLevel = uni.getStorageSync("userInfo").roleLevel
			this.userInfo.nickname = uni.getStorageSync("userInfo").nickname
			this.userInfo.headImgUrl = uni.getStorageSync("userInfo").headImgUrl
			this.invitationNo = uni.getStorageSync("userInfo").invitationNo
			this.getInviteNum()
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.invitationNo,
					success: function() {
						console.log('success');
					}
				});
			},
			//查询已经邀请的人数
			getInviteNum() {
				this.$u.post('/api/v1/users/profile/invite/count').then(res => {
					console.log(res);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
					}
					this.hasInviteNum = res.data.data.count
					if (this.hasInviteNum <= 10) {
						this.percent = this.hasInviteNum * 10
					} else {
						this.percent = 100
					}
					console.log(this.percent)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		position: relative;
		height: 480rpx;
	}

	.top-con {
		position: absolute;
		width: 100%;
		left: 0;
		top: 40rpx;
	}

	.user-box {
		position: relative;
		top: -50rpx;
		left: 30rpx;
		width: 690rpx;
		height: 386rpx;
		border-radius: 10rpx;
		overflow: hidden;

		.user-con {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 35rpx;

			.avatar {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}

		.line-box {
			position: absolute;
			bottom: 40rpx;
			width: 590rpx;
			left: 50rpx;
			font-size: 24rpx;

			.num-con {
				position: relative;
				top: -16rpx;
			}
		}
	}

	.code-box {
		margin: 0 30rpx;
		// border-bottom-left-radius: 10rpx;
		// border-bottom-right-radius: 10rpx;
		border-radius: 10rpx;
		overflow: hidden;

		.code-top {
			padding: 40rpx 0;

			image {
				width: 136rpx;
			}
		}

		.code-bottom {
			padding: 30rpx 20rpx;
			border-top: 1rpx solid #F1F1F1;

			.item {
				height: 100rpx;
				font-size: 24rpx;

				image {
					width: 60rpx;
					margin-right: 20rpx;
				}
			}

			.txt {
				color: #333333;
				font-weight: 700;
				line-height: 45rpx;
			}

			.num {
				color: #aaa;
			}
		}
	}

	.steps-box {
		border-radius: 10rpx;
		padding: 30rpx 0;
		margin: 40rpx 30rpx;

		.steps-t-pic {
			width: 60rpx;
		}

		.step-title {
			color: #000;
			font-weight: 900;
			line-height: 55rpx;
			padding: 0 10rpx;
		}

		.steps-con {
			line-height: 30rpx;
			font-size: 20rpx;

			.line {
				width: 100rpx;
				margin: 40rpx 10rpx 0;
				border-top: 2rpx dashed #E53935;
			}

			.steps-pic {
				width: 80rpx;
			}
		}
	}

	.invitationNo {
		position: relative;
		font-size: 48rpx;
		color: #333;
		line-height: 60rpx;
		font-weight: 700;

		.copy {
			font-size: 20rpx;
			margin-left: 10rpx;
			text-decoration: underline;
			position: absolute;
			left: 100%;
			bottom: 0;
			white-space: nowrap;
		}

	}
</style>
