<template>
	<view class="user" :style="{'padding-bottom': current == 2?'0rpx':'130rpx'}">
		<view class="user-navbar">
			<u-navbar :title="title" back-icon-color="#333333" :immersive="true" :background="background"></u-navbar>
		</view>
		<view class="user-pic">
			<image mode="widthFix" src="@/static/pic.jpg"></image>
		</view>
		<view class="user-hd">
			<view class="a">
				<view class="title">李大花</view>
				<view class="vip">VIP1</view>
				<image class="sex" v-if="true" src="@/static/peiwan-nv.png"></image>
				<image class="sex" v-else src="@/static/peiwan-nan.png"></image>
				<view class="city"><image class="location" src="@/static/dingwei2.png"></image>江苏 · 南京</view>
			</view>
			<view class="b">
				<view class="tag">26岁</view>
				<view class="tag">172cm</view>
				<view class="tag">65kg</view>
				<view class="tag">互联网测试</view>
			</view>
			<view class="c">
				#交友宣言，世间无敌，舍我其谁。霸气长存，风云变色。
			</view>
			<view class="d" :class="isPlay?'d-on':''" @click="toToggle()">
				288″
			</view>
		</view>
		<view class="user-tab">
			<view class="tab">
				<u-tabs :list="list" bg-color="transparent" :is-scroll="false" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs>
			</view>
		</view>
		<view class="user-bd" v-if="current == 0">
			<view class="xiangce">
				<view class="title">相册
					<view class="more" @click="openPage(7)">10张<image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="list">
					<image v-for="i in 4" :key="i" src="@/static/pic.jpg"></image>
				</view>
			</view>
			<view class="xiangce">
				<view class="title">认证状态
				</view>
				<view class="list">
					<view class="tag">手机号认证</view>
					<view class="tag">实名认证</view>
					<view class="tag">真人认证</view>
				</view>
			</view>
			<view class="xiangce">
				<view class="title">情感喜好
				</view>
				<view class="qinggan">
					<view class="dd">情感状态：<text>单身</text></view>
					<view class="dd">喜欢什么样的异性：
						<view class="b">
							<view class="tag">颜值高</view>
							<view class="tag">腿长</view>
							<view class="tag">社牛</view>
							<view class="tag">单纯</view>
							<view class="tag">热情</view>
						</view>
					</view>
				</view>
			</view>
			<view class="xiangce">
				<view class="title">个人信息
				</view>
				<view class="qinggan">
					<view class="li">年收入：<text>6-8w</text></view>
					<view class="li">家乡：<text>江苏·南京</text></view>
					<view class="li">学历：<text>本科</text></view>
					<view class="li">星座：<text>处女座</text></view>
				</view>
			</view>
		</view>
		<view class="user-bd" v-if="current==1">
			<view class="yuewan">
				<view class="title">约玩项目
					<view class="location">
						<image src="@/static/dingwei.png"></image>距离1000.00km
					</view>
				</view>
				<view class="list">
					<view class="item" :class="clickIndex == idx?'item-active':(idx <= 3?'item-on':'')" v-for="idx in 9" :key="idx">
						<view class="name">K歌</view>
						<view class="price">158.00起</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user-bd" v-if="current==2">
			<view class="dongtai">
				<view class="item" v-for="i in 10" :key="i" @click="openPage(5,1)">
					<view class="a">
						<view class="fl">
							<image src="@/static/nv.png"></image>
							<view class="info">
								<view class="name">幽默的先生</view>
								<view class="desc">2024-06-06 11:23</view>
							</view>
						</view>
						<view class="fr">
							<image src="@/static/shenglue.png"></image>
						</view>
					</view>
					<view class="b">今天天气真好啊！碧蓝的天空，绿油油的油菜花，空中飘香，远远的山脉看着忽远忽近。</view>
					<view class="c">
						<image mode="aspectFill" src="@/static/1.png"></image>
						<image mode="aspectFill" src="@/static/2.png"></image>
						<image mode="aspectFill" src="@/static/3.png"></image>
					</view>
					<view class="d">
						<view class="fl">
							<view class="li">
								<image src="@/static/xiaoxi.png"></image>69
							</view>
							<view class="li">
								<image src="@/static/dianzan.png"></image>896
							</view>
							<view class="li" @click.stop="openPage(2)">
								<image src="@/static/fenxiang.png"></image>分享
							</view>
						</view>
						<view class="fr" @click.stop="openPage(3)">搭讪</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user-fd" v-if="current == 0">
			<view class="item" @click="openPage(1)">{{isCollect?'已关注':'+关注'}}</view>
			<view class="item item-on" @click="openPage(3)">
				<image src="@/static/dashan-xin.png"></image>搭讪
			</view>
			<view class="item item-on">
				<image src="@/static/dashan-siliao.png"></image>私信
			</view>
		</view>
		<view class="user-fd" v-if="current == 1">
			<view class="item" @click="openPage(1)">{{isCollect?'已关注':'+关注'}}</view>
			<view class="items" @click="openPage(4)">
				<image src="@/static/peiwan-rili.png"></image>立即约玩
			</view>
		</view>
		<dashan :isDashan="isDashan" />
		<share :isShare="isShare" />
	</view>
</template>

<script>
	const systemInfoSync=uni.getSystemInfoSync();
	export default {
		data() {
			return {
				clickIndex: 1,
				isShare: false,
				isCollect: false,
				isDashan: false,
				isPlay: false,
				title: "",
				isScroll: false,
				background: {
					// 导航栏背景图
					background: 'transparent',
				},
				current: 0,
				statusBarHeight: 0,
				list:[{'name': '资料'},{'name': '陪玩'},{'name': '动态'}],
				activeStyle: {'fontSize': '35rpx'}
			};
		},
		onPageScroll(e) {
			if(e.scrollTop<=10){
				this.background = {
					// 导航栏背景图
					background: 'transparent',
				}
				this.title =""
			}else{
				const t = e.scrollTop>=44?1:(e.scrollTop/44).toFixed(2)
				this.title="李大花个人资料"
				this.background = {
					// 导航栏背景图
					background: 'rgba(255,255,255,'+t+')',
				}
			}
		},
		onLoad() {
			this.statusBarHeight = systemInfoSync.statusBarHeight;
		},
		methods: {
			openPage(index,id){
				if(index == 1){
					this.isCollect = !this.isCollect
				}else if(index == 2){
					this.isShare = !this.isShare
				}else if(index == 3){
					this.isDashan = !this.isDashan
				}else if(index == 4){
					uni.navigateTo({
						url: "/pages/peiwan/confirm?id="+id
					})
				}else if(index == 5){
					uni.navigateTo({
						url: "/pages/dongtai/detail?id="+id
					})
				}else if(index == 7){
					uni.navigateTo({
						url: "/pages/peiwan/xiangce?id="+id
					})
				}
			},
			changeTabs(index){
				this.current = index
			},
			toToggle () {
				this.isPlay = !this.isPlay
			},
		}
	}
</script>

<style scoped lang="scss">
.user{
	overflow: hidden;
	&-pic{
		width: 100%;
		image{
			width: 100%;
		}
	}
	&-fd{
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 21;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.item{
			width: 220rpx;
			display: flex;
			line-height: 70rpx;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 28rpx;
			background: #FCFCFC;
			border-radius: 70rpx;
			border: 1px solid #000000;
			color: #000000;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			&-on{
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				color: #FFFFFF;
			}
		}
		.items{
			width: 462rpx;
			display: flex;
			line-height: 70rpx;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 28rpx;
			border-radius: 70rpx;
			border: 1px solid #000000;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			color: #FFFFFF;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
	&-bd{
		padding: 0 25rpx;
		overflow: hidden;
		.xiangce{
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				.more{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.list{
				width: 100%;
				display: flex;
				align-items: center;
				image{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
					&:first-child{
						margin-left: 0;
					}
				}
				.tag{
					padding: 0 30rpx;
					line-height: 50rpx;
					height: 50rpx;
					background: #000000;
					border-radius: 50rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
					margin-top: 20rpx;
					&:first-child{
						margin-left: 0;
					}
				}
			}
			.qinggan{
				background: #F7F7F7;
				border-radius: 20rpx;
				padding: 0 30rpx 30rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				margin-top: 20rpx;
				overflow: hidden;
				text{
					color: #222222;
				}
				.dd{
					margin-top: 30rpx;
				}
				.li{
					width: 50%;
					float: left;
					margin-top: 30rpx;
				}
				.b{
					display: flex;
					align-items: center;
					.tag{
						padding: 0 20rpx;
						height: 50rpx;
						font-weight: 500;
						border-radius: 50rpx;
						font-size: 24rpx;
						line-height: 50rpx;
						color: #FFFFFF;
						margin-top: 20rpx;
						margin-left: 20rpx;
						&:first-child{
							margin-left: 0;
						}
						&:nth-child(1){
							background: linear-gradient(0deg, #A348DA, #F090F2);
						}
						&:nth-child(2){
							background: linear-gradient(0deg, #017CF9, #10D9F2);
						}
						&:nth-child(3){
							background: linear-gradient(0deg, #7C58DB, #9AA4FF);
						}
						&:nth-child(4){
							background: linear-gradient(0deg, #EC1C71, #FF8CAC);
						}
						&:nth-child(5){
							background: linear-gradient(0deg, #FA7B0B, #F7D345);
						}
					}
				}
			}
		}
		.yuewan{
			overflow: hidden;
			margin-top: 20rpx;
			.list{
				width: 110%;
				overflow: hidden;
				margin-top: 20rpx;
				.item{
					width: 240rpx;
					height: 140rpx;
					background: url(@/static/icon-xianxia.png) center top no-repeat;
					background-size: contain;
					float: left;
					text-align: left;
					padding: 30rpx;
					box-sizing: border-box;
					border: 1px solid #F3F4F5;
					&-on{
						background: url(@/static/icon-xianshang.png) center top no-repeat;
						background-size: contain;
					}
					&-active{
						border: 1px solid #000;
					}
					.name{
						font-weight: 500;
						font-size: 30rpx;
						color: #222222;
						white-space: nowrap;
						overflow: hidden;
					}
					.price{
						font-weight: 500;
						font-size: 24rpx;
						color: #E70C0C;
						margin-top: 10rpx;
					}
				}
			}
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				.location{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666666;
					image{
						width: 22rpx;
						height: 22rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.dongtai{
			padding-bottom: 20rpx;
			overflow: hidden;
			.item{
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.d{
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 42rpx;
					margin-top: 20rpx;
					text-align: left;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fl{
						flex: 1;
						display: flex;
						align-items: center;
						.li{
							display: flex;
							align-items: center;
							width: 120rpx;
							image{
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;
							}
						}
					}
					.fr{
						width: 90rpx;
						line-height: 44rpx;
						background: #000000;
						border-radius: 44rpx;
						text-align: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				.c{
					width: 110%;
					margin-top: 20rpx;
					overflow: hidden;
					image{
						width: 210rpx;
						height: 210rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}
				}
				.b{
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					line-height: 42rpx;
					margin-top: 20rpx;
					text-align: left;
				    display: -webkit-box;
				    -webkit-box-orient: vertical;
				    -webkit-line-clamp: 2; /* 定义文本的行数 */
				    overflow: hidden;
				    text-overflow: ellipsis;
				}
				.a{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fl{
						flex: 1;
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						image{
							width: 80rpx;
							height: 80rpx;
							background: #E6E9ED;
							border-radius: 50%;
							margin-right: 20rpx;
						}
						.info{
							flex: 1;
						}
						.name{
							font-weight: 400;
							font-size: 30rpx;
							color: #222222;
						}
						.desc{
							font-weight: 400;
							font-size: 22rpx;
							color: #B6BCC2;
							margin-top: 10rpx;
						}
					}
					.fr{
						width: 32rpx;
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
	}
	&-tab{
		display: flex;
		margin-top: 10rpx;
		overflow: hidden;
		.tab{
			width: 400rpx;
		}
	}
	&-hd{
		width: 100%;
		background: #FFFFFF;
		border-radius: 0px 0px 20rpx 20rpx;
		padding: 25rpx;
		box-sizing: border-box;
		position: relative;
		.d{
			width: 165rpx;
			height: 95rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			background: url(@/static/icon-bofang.png) center top no-repeat;
			background-size: contain;
			line-height: 88rpx;
			text-indent: 90rpx;
			position: absolute;
			right: 0;
			top: 5rpx;
			z-index: 2;
			&-on{
				background: url(@/static/icon-zanting.png) center top no-repeat;
				background-size: contain;
			}
		}
		.b{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.tag{
				padding: 0 20rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
				line-height: 40rpx;
				border-radius: 40rpx;
				background: #F2F2F2;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
			}
		}
		.c{
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;
			text-align: left;
			margin-top: 30rpx;
		}
		.a{
			width: 100%;
			display: flex;
			align-items: center;
			.name{
				font-weight: 500;
				font-size: 36rpx;
				color: #222222;
			}
			.vip{
				width: 60rpx;
				line-height: 32rpx;
				background: url(@/static/vip-bg.png) center top no-repeat;
				background-size: contain;
				text-align: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				overflow: hidden;
				margin-left: 20rpx;
			}
			.sex{
				margin-left: 20rpx;
				width: 30rpx;
				height: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.city{
				padding: 0 20rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
				line-height: 40rpx;
				border-radius: 40rpx;
				background: #F2F2F2;
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				image{
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>
