popularize-front/pages_my/user-info.vue

<template>
	<view>
		<view class="head-box"></view>
		<uv-navbar autoBack title="个人资料" leftIconColor="#fff" :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
	
		<view class="content">
			<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="img-box">
					<image :src="info.headImage" mode=""></image>
					<view>点击更换头像</view>
				</view>
			<!-- 	<view class="line">
					<view class="">
						头像
					</view>
					<view class="">
						<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" style="width: 60rpx;height: 60rpx;"
							mode=""></image>
						<image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image>
					</view>
				</view> -->
			</button>
			
			<view class="name-box">
				<view class="name-val">{{info.nickName}}</view>
				<view class="sex-box">
					<image v-if="info.sex == '男'" src="@/static/image/center/nan-icon.png" mode=""></image>
					<image v-else src="@/static/image/center/nv-icon.png" mode=""></image>
				</view>
				<view class="age-box" v-if="calculateAge">{{calculateAge}}岁</view>
				<view class="age-box" v-else>未设置</view>
				<!-- <image src="@/static/image/center/nv-icon.png" mode=""></image> -->
			</view>
			<view class="form-box">
				<view class="form-box-line">
					<view class="label-box">
						<image src="./static/user-icon-1.png" mode="widthFix"></image>
						<view>国籍</view>
					</view>
					<view class="value-box">
					{{info.city || '未设置'}}
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">
						<image src="./static/user-icon-2.png" mode="widthFix"></image>
						<view>学历</view>
					</view>
					<view class="value-box">
						{{info.shcool || '未设置'}}
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">
						<image src="./static/user-icon-3.png" mode="widthFix"></image>
						<view>行业</view>
					</view>
					<view class="value-box">
						{{info.workValue || '未设置'}}
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">
						<image src="./static/user-icon-4.png" mode="widthFix"></image>
						<view>电话</view>
					</view>
					<view class="value-box">
						{{info.phone || '未设置'}}
					</view>
				</view>
				<view class="form-box-line">
					<view class="label-box">
						<image src="./static/user-icon-5.png" mode="widthFix"></image>
						<view>性别</view>
					</view>
					<view class="value-box">
						{{info.sex || '未设置'}}
					</view>
				</view>
			</view>
			<view class="tips-box">
				<view class="title-box">标签</view>
				<view class="tips-val">
						<view class="tips-item tips-1" v-for="(val,i) in stateArr" :key="i">{{val}}</view>
						<!-- <view class="tips-item tips-2">985</view> -->
						<!-- <view class="tips-item tips-3">设计师</view> -->
						<!-- <view class="tips-item tips-4">行业大牛</view> -->
					
				</view>
			</view>
			<view class="about-box">
				<uv-divider text="关于我" textSize="28rpx"></uv-divider>
				<view class="about-box-val">{{info.details || '未设置'}}</view>
			</view>
		</view>
		<view class="btn-box">
			<uv-button text="编辑信息" @click="editClick" color="#381615" shape="circle" :customStyle="btnCustomStyle"></uv-button>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				btnCustomStyle:{
					color:'#FF5858'
				},
				bgColor:'transparent',
				info:{},
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 50) {
				this.bgColor = '#49070c'
			}else{
				this.bgColor = 'transparent'
			}
		},
		onShow() {
			this.getUserInfo()
		},
		computed:{
			calculateAge() {
			    let today = new Date();
			    let birthDate = new Date(this.info.yearDate);
			    let age = today.getFullYear() - birthDate.getFullYear();
			    let m = today.getMonth() - birthDate.getMonth();
			    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
			        age--;
			    }
			    return age;
			},
			stateArr() {
				
				let arr = []
				
				if(this.info.state){
					arr.push(...this.info.state.split(','))
				}
				if(this.info.shcool){
					arr.push(...this.info.shcool.split(','))
				}
				if(this.info.shcoolType){
					arr.push(...this.info.shcoolType.split(','))
				}
				if(this.info.workValue){
					arr.push(...this.info.workValue.split(','))
				}
				return arr
			}
		},
		methods:{
			onChooseAvatar(res) {
				let self = this
				self.$Oss.ossUpload(res.target.avatarUrl)
				.then(url => {
					self.info.headImage = url
					this.$api('updateInfo',this.info, res => {
						if (res.code == 200) {
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
						}
					})
				})
			},
			getUserInfo() {
				this.$api('getInfo', res => {
					if (res.code == 200) {
						this.info = res.result
					}
				})
			},
			editClick() {
				uni.navigateTo({
					url:'/pages_my/user-msg'
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #060504;
	}
</style>
<style lang="scss" scoped>
	.chooseAvatar {
		width: 100%;
		padding: 0;
		margin: 0;
		border: none;
		background-color: transparent;
	}
	.head-box {
		background: url('@/static/image/nav-bg.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 534rpx;
		position: absolute;
		z-index: -1;
	}
	.content {
		margin-top: 40rpx;
		padding: 0 30rpx 170rpx;
		padding-top: calc(var(--status-bar-height) + 110rpx);
		.img-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			image {
				width: 176rpx;
				height: 176rpx;
				border-radius: 50%;
			}
			view {
				font-weight: 400;
				font-size: 24rpx;
				color: #CCCCCC;
				margin-top: 20rpx;
			}
		}
	
		.name-box {
			display: flex;
			align-items: center;
			.name-val {
				font-weight: 600;
				font-size: 32rpx;
				color: #E6E6E6;
				margin-right: 18rpx;
			}
			.sex-box {
				background-color: #0D1A20;
				width: 69rpx;
				height: 36rpx;
				border-radius: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
			.age-box {
				width: 85rpx;
				height: 36rpx;
				background: #261705;
				border-radius: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 23rpx;
				color: #FFA200;
			}
		}
		.form-box {
			background: #1B1713;
			border-radius: 27rpx;
			padding:0 40rpx;
			margin-top: 25rpx;
			margin-bottom: 44rpx;
			.form-box-line {
				height: 112rpx;
				border-bottom: 1px solid #403D3A;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&:last-child {
					border: none;
				}
				.label-box {
					font-weight: 400;
					font-size: 31rpx;
					color: #CCCCCC;
					display: flex;
					align-items: center;
					image {
						width: 35rpx;
						height: 35rpx;
						margin-right: 23rpx;
					}
				}
				.value-box {
					font-weight: 400;
					font-size: 28rpx;
					color: #CCCCCC;
				}
			}
			
			.form-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #CCCCCC;
				padding-top: 32rpx;
				
			}
			.choose-box {
				margin-top: 28rpx;
				display: flex;
				flex-wrap: wrap;
				.choose-item {
					width: 137rpx;
					height: 67rpx;
					border-radius: 13rpx;
					border: 1rpx solid #CCCCCC;
					text-align: center;
					line-height: 67rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #CCCCCC;
					margin-right: 15rpx;
					margin-bottom: 24rpx;
					&:nth-child(4n){
						margin-right: 0;
					}
				}
				.choose-class {
					background-color: #341616;
					color: #FF4747;
					border: 1rpx solid #FF4747;
				}
			}
		}
	
		.title-box {
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
		}
		.tips-box {
			margin-top: 30rpx;
			margin-bottom: 27rpx;
			.tips-val {
				display: flex;
				align-items: center;
				margin-top: 27rpx;
				.tips-item {
					width: 147rpx;
					height: 72rpx;
					border-radius: 13rpx;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 72rpx;
					text-align: center;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
					flex-wrap: wrap;
					&:nth-child(4n) {
						margin-right: 0;
					}
				}
				.tips-1 {
					background-color: #1F1404;
					color: #E17E09;
				}
				.tips-2 {
					background-color: #1F0E0D;
					color: #FF4747;
				}
				.tips-3 {
					background-color: #051529;
					color: #0979E1;
				}
				.tips-4 {
					background-color: #191F0E;
					color: #4EB477;
				}
			}
		}
		.about-box {
			.about-box-val {
				margin-top: 36rpx;
				background: #171310;
				border-radius: 20rpx;
				padding: 60rpx 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #CCCCCC;
				line-height: 46rpx;
			}
		}
	}
	.btn-box {
		background-color: #060504;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 40rpx;
		height: 150rpx;
		z-index: 999;
		box-sizing: border-box;
	}
</style>