<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
			<view class="user-header">
				<view class="header-bg">
					<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/hero-grid.png" mode="widthFix"></image>
				</view>
				<cu-custom :bgColor="scrollHeight>20?'bg-bluev-head':'none'">
					<block slot="content">我的</block>
				</cu-custom>
				<view class="user-detail-body">
					<view class="avatar"><image src="/static/rank/avatar.jpeg" mode="widthFix"></image></view>
					<view class="detail-info">
						<view class="name">
							<view class="text">我是庄小周</view>
							<view class="level">
								<image src="/static/mine/level.png"></image>Lv.1
							</view>
						</view>
						<view class="desc">ID：234234234 <text class="cuIcon-copy"></text></view>
					</view>
					<view class="detail-status">
						<!-- <view class="status-btn full"><text class="cuIcon-edit"></text><view class="text">已签约</view></view> -->
						<view class="status-btn"><text class="cuIcon-edit"></text><view class="text">未签约</view> </view>
					</view>
				</view>
			</view>
			<view class="user-body">
				<view class="user-total">
					<view class="total-item">
						<view class="num">102</view>
						<view class="name">完成任务</view>
					</view>
					<view class="total-item">
						<view class="num">102</view>
						<view class="name">收益(元)</view>
					</view>
					<view class="total-item">
						<view class="num">102</view>
						<view class="name">粉丝</view>
					</view>
					<view class="total-item">
						<view class="num">10<text>%</text></view>
						<view class="name">平均转化率</view>
					</view>
				</view>
				<view class="user-level">
					<view class="user-level-body">
						<view class="level-top">
							<view class="level-name">LV.3黄金达人</view>
							<view class="level-more">查看等级 <text class="cuIcon-right"></text></view>
						</view>
						<view class="level-mid">距离下一等级还差119</view>
						<view class="level-foot">
							<view class="level-step">
								<view class="success" style="width: 50%;"></view>
							</view>
							<view class="level-num"><text>181</text>/300</view>
						</view>
					</view>
				</view>
				<view class="user-menu-service">
					<view class="title">我的服务</view>
					<view class="service-body">
						<view class="service-item">
							<view class="icon">
								<image src="/static/mine/task.png" mode="widthFix"></image>
								<view class="dot">
									<image src="/static/mine/msg-dot.png"></image>
									<view class="num">5</view>
								</view>
							</view>
							<view class="name">我的任务</view>
						</view>
						<view class="service-item">
							<view class="icon"><image src="/static/mine/income.png" mode="widthFix"></image></view>
							<view class="name">我的收益</view>
						</view>
						<view class="service-item">
							<view class="icon"><image src="/static/mine/certify.png" mode="widthFix"></image></view>
							<view class="name">达人认证</view>
						</view>
						<view class="service-item">
							<view class="icon"><image src="/static/mine/service-bind.png" mode="widthFix"></image></view>
							<view class="name">帐号绑定</view>
						</view>
					</view>
				</view>
				<view class="user-menu-normal">
					<view class="title">常用功能</view>
					<view class="normal-body">
						<view class="normal-item">
							<view class="icon"><image src="/static/mine/common-favorite.png" mode="widthFix"></image></view>
							<view class="name">我的收藏</view>
							<view class="more"><text class="cuIcon-right"></text></view>
						</view>
						<view class="normal-item">
							<view class="icon"><image src="/static/mine/common-history.png" mode="widthFix"></image></view>
							<view class="name">浏览记录</view>
							<view class="more"><text class="cuIcon-right"></text></view>
						</view>
						<view class="normal-item">
							<view class="icon"><image src="/static/mine/common-cooperate.png" mode="widthFix"></image></view>
							<view class="name">商务合作</view>
							<view class="more"><text class="cuIcon-right"></text></view>
						</view>
						<view class="normal-item">
							<view class="icon"><image src="/static/mine/common-leader.png" mode="widthFix"></image></view>
							<view class="name">成为团长</view>
							<view class="more"><text class="cuIcon-right"></text></view>
						</view>
						<view class="normal-item">
							<view class="icon"><image src="/static/mine/common-address.png" mode="widthFix"></image></view>
							<view class="name">收货地址</view>
							<view class="more"><text class="cuIcon-right"></text></view>
						</view>
						<view class="normal-item">
							<view class="icon"><image src="/static/mine/common-setting.png" mode="widthFix"></image></view>
							<view class="name">设置</view>
							<view class="more"><text class="cuIcon-right"></text></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<halfLogin ref="loginCom"></halfLogin>
	</view>
</template>

<script>
var app;
export default {
	data() { 
		return {
			scrollHeight:0,
		}
	},
	onLoad() {
		app = this;
	},
	methods: {
		pageScroll(event) {
			var scrollHeight = event.detail.scrollTop;
			app.scrollHeight = scrollHeight;
		}
	}
}
</script>

<style lang="scss">
page{background-color: #f8f8f8;}

.user-header{position: relative;background: linear-gradient(180deg, #87e0ff 10%, rgba(207, 238, 248, 0.35) 69.55%, rgba(245, 245, 245, 0) 100%);overflow: hidden;}
.user-header .header-bg{
	position: absolute;
	left: -304rpx;
	top: -278rpx;
	width: 1266rpx;
	height: 608rpx;
	opacity: 0.4;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.user-header .header-bg image{width: 100%;}

.user-detail-body{margin: 20rpx;display: flex;align-items: center;position: relative;z-index: 99;}
.user-detail-body .avatar image{width: 100rpx;height: 100rpx;border-radius: 100%;}
.user-detail-body .detail-info{margin-left: 20rpx;}
.user-detail-body .detail-info .name{display: flex;align-items: center;gap: 10rpx;}
.user-detail-body .detail-info .name .text{font-family: "bluevBold";color: #000;font-weight: 800;font-size: 30rpx;}
.user-detail-body .detail-info .name .level{display: flex;align-items: center;background: linear-gradient(270deg, #4C4C4C 0%, #7D7D7D 100%);font-size: 22rpx;color: #fff;border-radius: 20rpx;padding: 5rpx 10rpx;gap: 5rpx;}
.user-detail-body .detail-info .name .level image{width: 30rpx;height: 30rpx;}
.user-detail-body .detail-info .desc{color: #666;font-size: 24rpx;margin-top: 10rpx;}
.user-detail-body .detail-info .desc text{font-size: 26rpx;}
.user-detail-body .detail-status{margin-left: auto;margin-right: 0;} 
.user-detail-body .detail-status .status-btn {font-size: 24rpx;padding: 10rpx 15rpx;border-radius: 40rpx;display: flex;align-items: center;gap: 10rpx;color: #7F8185;background-color: transparent;justify-content: center;}
.user-detail-body .detail-status .status-btn text{font-size: 28rpx;margin-top: 2rpx;}
.user-detail-body .detail-status .status-btn.full{background-color: #03BEFF;color: #fff;}

.user-body{margin: 20rpx;}
.user-body .user-total{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;flex-direction: row;}
.user-body .user-total .total-item{min-width: 0%;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1;}
.user-body .user-total .total-item .num{color: #212226;font-size: 36rpx;font-weight: 800;line-height: 1.1;text-align: center;}
.user-body .user-total .total-item .name{color: rgba(21, 21, 21, 0.45);font-size: 22rpx;line-height: 1.2;text-align: center;margin-top: 10rpx;}

.user-body .user-level{background: linear-gradient(0deg, #f0fbff 0%, #b0e9ff 100%);padding: 2rpx;box-sizing: border-box;border-radius: 24rpx;margin: 20rpx 0;}
.user-body .user-level-body{padding: 28rpx 28rpx 32rpx;border-radius: 22rpx;background: linear-gradient(180deg, #def6ff 0%, #eefaff 52%, #ffffff 100%);box-sizing: border-box;}

.user-body .user-menu-normal{background-color: #fff;border-radius: 20rpx;padding: 28rpx;margin-bottom: 20rpx;}
.user-body .user-menu-normal .title{font-size: 32rpx;color: #000;font-weight: 800;line-height: 2;}
.user-body .normal-body{}
.user-body .normal-body .normal-item{display: flex;align-items: center;gap: 20rpx;height: 80rpx;line-height: 80rpx;}
.user-body .normal-body .normal-item:last-child{border-bottom: 0;}
.user-body .normal-body .normal-item .name{font-size: 28rpx;color: #000;}
.user-body .normal-body .normal-item .icon {display: flex;align-items: center;justify-content: center;}
.user-body .normal-body .normal-item .icon image{width: 48rpx;height: 48rpx;}
.user-body .normal-body .normal-item .more{margin-left: auto;margin-right: 0;color: rgba(0, 0,0 ,.2);}

.user-body .user-menu-service{background-color: #fff;border-radius: 20rpx;padding: 28rpx;margin-bottom: 20rpx;}
.user-body .user-menu-service .title{font-size: 32rpx;color: #000;font-weight: 800;line-height: 2;}
.user-body .user-menu-service .service-body{display: flex;align-items: flex-start;justify-content: space-between;margin-top: 20rpx;}
.user-body .user-menu-service .service-body .icon {position: relative;}
.user-body .user-menu-service .service-body .icon image{width: 72rpx;height: 72rpx;}
.user-body .user-menu-service .service-body .icon .dot{display: flex;align-items: center;width: 51rpx;height: 51rpx;position: absolute;top: -25rpx;right: -45rpx;z-index: 99;justify-content: center;}
.user-body .user-menu-service .service-body .icon .dot image{width: 51rpx;height: 51rpx;position: absolute;top: 0;right: 0;z-index: 98;}
.user-body .user-menu-service .service-body .icon .num{color: #fff;position: relative;z-index: 99;font-size: 22rpx;font-weight: 800;font-family: "bluevBold";}

.user-body .user-menu-service .service-body .name{color: #212226;font-size: 28rpx;margin-top: 10rpx;}
.user-body .user-menu-service .service-body .service-item{display: flex;align-items: center;flex-direction: column;}
.user-body .user-level-body .level-foot{display: flex;align-items: center;justify-content: space-between;gap: 20rpx;}
.user-body .user-level-body .level-foot .level-step{background-color: #E4E4E4;height: 10rpx;flex: 1;border-radius: 10rpx;}
.user-body .user-level-body .level-foot .level-step .success{background-color: #87E0FF;height: 10rpx;border-radius: 10rpx;}
.user-body .user-level-body .level-foot .level-num{color: #999;font-size: 22rpx;}
.user-body .user-level-body .level-foot .level-num text{color: #666;}
.user-body .user-level-body .level-mid{margin: 10rpx 0;font-size: 22rpx;color: #8C8C8C;}
.user-body .user-level-body .level-top{display: flex;align-items: center;justify-content: space-between;}
.user-body .user-level-body .level-top .level-name{color: #000;font-weight: 800;font-family: "bluevBold";font-size: 30rpx;}
.user-body .user-level-body .level-top .level-more{color: #666;font-size: 22rpx;}
</style>
