jp-xqjy/pages/user/personal.vue

<template>
	<view>
		<view class="personal">
			<u-navbar :border-bottom="false" :background="navbarBg" back-icon-color="#fff"></u-navbar>
			
			<view class="personalHead">
				<u-image width="100%" height="375px" :src="personalInfo.faceImage"></u-image>
			</view>
			<view class="personal-main">
				<view class="personal-name">
					<span>{{personalInfo.realName}}</span>
					<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
				</view>
				<view class="personal-space">
					<view class="personal-info">
						<span>{{baseInfo}}</span>
					</view>
					<view class="personal-address">
						<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
						<span>{{area}}</span>
					</view>
				</view>
				<view class="personal-att">
					<view class="personal-att-text">
						<h2>{{orgName}}</h2>
						<view class="u-flex" v-show="personalInfo.status == 1">
							<p>实名认证用户</p>
							<u-icon custom-prefix="custom-icon" name="check-line"></u-icon>
						</view>
					</view>
					<u-image width="60px" height="60px" src="/static/img/personal-att.png"></u-image>
				</view>
				<view class="personal-item">
					<view class="personal-tit">
						<u-icon custom-prefix="custom-icon" name="account-box-line" color="#FF5E5E" size="20px"></u-icon>
						<span>个人资料</span>
					</view>
					<view class="personal-con">
						<view class="personal-col">
							<p>会员号</p>
							<h4>N0.0001</h4>
						</view>
						<view class="personal-col">
							<p>学历</p>
							<h4>{{education}}</h4>
						</view>
						<view class="personal-col">
							<p>行业</p>
							<h4>{{profession}}</h4>
						</view>
						<view class="personal-col">
							<p>职业</p>
							<h4>{{work_post}}</h4>
						</view>
						<view class="personal-col">
							<p>月薪</p>
							<h4>{{salary_range}}</h4>
						</view>
						<view class="personal-col">
							<p>住房状况</p>
							<h4>{{house_status}}</h4>
						</view>
						<view class="personal-col">
							<p>婚姻状况</p>
							<h4>{{marriage_status}}</h4>
						</view>
						<view class="personal-col">
							<p>子女状况</p>
							<h4>{{children_status}}</h4>
						</view>
						<view class="personal-col">
							<p>出生地</p>
							<h4>{{address}}</h4>
						</view>
						<view class="personal-col">
							<p>现工作所在地</p>
							<h4>{{workAddress}}</h4>
						</view>
						<view class="personal-row">
							<p>兴趣爱好</p>
							<view class="personal-label" >
								<span v-for="(item,index) in interests" :key="index">
									{{item.name}}
								</span>
 							</view>
						</view>
					</view>
				</view>
				<view class="personal-item">
					<view class="personal-tit">
						<u-icon custom-prefix="custom-icon" name="file-list-3-line" color="#FF5E5E" size="20px"></u-icon>
						<span>自我评价</span>
					</view>
					<view class="personal-con">
						<view class="personal-text">
							{{personalInfo.selfEvaluation}}
						</view>
					</view>
				</view>
				<view class="personal-item">
					<view class="personal-tit">
						<u-icon custom-prefix="custom-icon" name="chat-heart-line" color="#FF5E5E" size="20px"></u-icon>
						<span>择偶标准</span>
					</view>
					<view class="personal-con">
						<view class="personal-col">
							<p>年龄范围</p>
							<h4>25~30</h4>
						</view>
						<view class="personal-col">
							<p>月薪</p>
							<h4>{{salary_range}}</h4>
						</view>
						<view class="personal-col">
							<p>学历</p>
							<h4>不限</h4>
						</view>
						<view class="personal-col">
							<p>职业</p>
							<h4>不限</h4>
						</view>
						<view class="personal-row">
							<p>现工作所在地</p>
							<h4>{{taWorkAddress}}</h4>
						</view>
						<view class="personal-row">
							<p>其他要求</p>
							<h4>{{personalInfo.taOther}}</h4>
						</view>
					</view>
				</view>
				<view class="personal-btn">
					<u-button type="error" shape="circle" :custom-style="customStyle" @click="edit">
						<span>编辑</span>
						<u-icon custom-prefix="custom-icon" name="edit-2-line"></u-icon>
					</u-button>
				</view>
			</view>
		</view>
 	</view>
</template>

<script>
	let _self;
	import * as loginApi from '@/apis/login.js'
	import {provinceData,setCityData,getCityData,getAeraData} from '@/apis/city.js';
	export default {
		data() {
			return {
				navbarBg: {
					background: 'none'
				},
				customStyle: {
					background: '#FF5E5E'
				}, 
				personalInfo:{
					faceImage:'http://rccs.oss-cn-hangzhou.aliyuncs.com/jp-xqjy/user2.jpg'
				},
				orgName:'',
				baseInfo:'',
				address:'',
				registered_residence:'',
				workAddress:'',
				area:'',
				taWorkAddress:'',
				interests:[],
				education:'',
				work_post:'',
				profession:'',
				salary_range:'',
				house_status:'',
				marriage_status:'',
				children_status:'',
				user_id:''
			}
 

		},
		methods:{
			edit(){
				uni.navigateTo({
					url:'./edit'
				})
			}
		}, 
		onLoad(options){
			_self = this;
			if(options.id)
				this.user_id =JSON.parse(decodeURIComponent(options.user_id)) ;
			else if(options.user_id)
				this.user_id = decodeURIComponent(options.user_id);
			else
				this.user_id = 'oHjCawigqi8SEAwutwkQ-VEgdp3k';
			let personal_info1 = this.carhelp.getPersonInfo();				
			let data ={openId: this.user_id};
			loginApi.findByOpenId(data).then(function(data){
				if(!data.result)
					return;
				if(!data.data)
					return;
				if(!data.data.memberInfo)
					return;
				_self.personalInfo = data.data.memberInfo;
				let personal_info =  data.data.memberInfo;
				
				console.log('查找用户数据'+JSON.stringify(data.data.memberInfo))
				if(provinceData.length<=0){
					loginApi.getCityList().then(function(data){
						//console.log('获取城市成功'+JSON.stringify(data));
						if(data.result &&  data.data){
							setCityData(data.data);
							//_self.$refs.mpvuebirtydayCityPicker.setCityData(data.data);		
							//console.log('province data '+JSON.stringify(provinceData))
							if(personal_info.birthplace != null)
								_self.address = getCityData(Number(personal_info.birthplace));
							if(personal_info.registeredResidence != null)
								_self.registered_residence = getCityData(Number(personal_info.registeredResidence));
							if(personal_info.workplace != null)
							{
								_self.workAddress = getCityData(Number(personal_info.workplace)); 
								_self.area = getAeraData(Number(personal_info.workplace));
								/*if(_self.workAddress!=null && _self.workAddress.length>0){
									
								}*/
							}
							if(personal_info.taWorkplace!= null){
								_self.taWorkAddress = getCityData(Number(personal_info.taWorkplace));							
							}
							console.log('taWorkAddress'+personal_info.taWorkplace+_self.taWorkAddress)
							
							//console.log('个人信息'+JSON.stringify(personal_info))
						} 
						
					},function(err){
						console.log('获取城市列表错误'+JSON.stringify(err))
					})	
				}else
				{
					console.log('找到用户数据')
					if(personal_info.birthplace != null)
					{
						_self.address = getCityData(Number(personal_info.birthplace));
						
					}
					if(personal_info.registeredResidence != null)
					{
						_self.registered_residence = getCityData(Number(personal_info.registeredResidence));
						
					}
					if(personal_info.workplace != null)
					{
						_self.workAddress = getCityData(Number(personal_info.workplace)); 
						_self.area = getAeraData(Number(personal_info.workplace));
						 
					}
					if(personal_info.taWorkplace!= null){
						_self.taWorkAddress = getCityData(Number(personal_info.taWorkplace));							
					}
					console.log('address'+_self.address+_self.registered_residence+_self.registered_residence)
				}
					loginApi.orgList().then(function(data){
//						console.log('工会信息'+JSON.stringify(data));
						if(data.result)
						{
							let _data = data.data;
							if(_data){
								let data1 = _data.data;
								if(data1){
									
									for(let i = 0;i<data1.length;i++)
									{
										let orgName1 = personal_info.orgId;
										let orgName2 = data1[i].id;
										if(orgName1 === orgName2)
										{
											_self.orgName = data1[i].name;
											//console.log('找到工会 '+JSON.stringify(data1))
										}else{
											//console.log('工会'+JSON.stringify(orgName1)+JSON.stringify(orgName2))
											
										}
									}
								}
							}
						} 
				},function(err){
					
				});
				
				///
				let subject = {subject:''}		
				loginApi.getBaseDictionary(subject).then(function(data){
					//console.log('基础字典'+JSON.stringify(data)); 
					if(data.data)
					{
						let zfqkList = data.data.zfqkList;					 
						let yxList = data.data.yxList;						
						let znqkList = data.data.znqkList;					
						let qyList = data.data.qyList;					 
						let xlList = data.data.xlList;					 
						let hyList = data.data.hyList;					 					
						let nlfwList = data.data.nlfwList;					 
						let hyqkList = data.data.hyqkList;					
						let hobbyInfoList = data.data.hobbyInfoList;
						if(hobbyInfoList && personal_info.hobbys && personal_info.hobbys.length>0){
							//console.log('兴趣列表'+JSON.stringify(hobbyInfoList)); 
							let interests = []; 
							for(let i = 0;i< hobbyInfoList.length;i++)
							{
								let interest =  hobbyInfoList[i];
								if(personal_info.hobbys.indexOf(interest.id)>=0)
								{
									let interest1 = {name:interest.name,checked:false,id:interest.id};
									
									_self.interests.push(interest1)
								}  
								
							}
							//_self.interests = interests;
						}
						 
						if(personal_info)
						{
							 //console.log('xlList'+JSON.stringify(xlList))
							 if(personal_info.education!=null){
								 for(let i = 0;i< xlList.length;i++)
								 {
									 if(personal_info.education == xlList[i].value)
									 {
										_self.education = xlList[i].name; 
																			 
									 } 						
								 }
							 }  
							  /*
							  if(personal_info.workUnit!=null){
									_self.form.work_corporation = personal_info.workUnit; 
							  }   */
							  
							  if(personal_info.post!=null){
									_self.work_post = personal_info.post; 
							  }  
								
							 if(personal_info.industry!=null){ 
									for(let i = 0;i< hyList.length;i++)
									{
										 if(personal_info.industry == hyList[i].value)
										 {
											_self.profession = hyList[i].name;  
																				 
										 } 						
									} 
							 }  
							 
							
							 if(personal_info.salaryRange!=null){
								 console.log('xlList'+JSON.stringify(yxList) +JSON.stringify(_self.salary_range))
									for(let i = 0;i< yxList.length;i++)
									{
										 if(personal_info.salaryRange == yxList[i].value)
										 {
											_self.salary_range = yxList[i].name;  
																				 
										 } 						
									} 
							 }  
							 
							 if(personal_info.taIncomeRange!=null){
							 	 for(let i = 0;i< yxList.length;i++)
							 	 {
							 	 	 if(personal_info.taIncomeRange == yxList[i].value)
							 	 	 {
							 	 		_self.taSalary = yxList[i].name;  
							 	 											 
							 	 	 } 						
							 	 } 
							 }   
							 if(personal_info.housingSituation!=null){
								 for(let i = 0;i< zfqkList.length;i++)
								 {
									 if(personal_info.housingSituation == zfqkList[i].value)
									 {
										_self.house_status = zfqkList[i].name;   									 									 
									 } 	
								 } 
							 }  
							 if(personal_info.maritalStatus!=null){
								 for(let i = 0;i< hyqkList.length;i++)
								 {
									 if(personal_info.maritalStatus == hyqkList[i].value)
									 {
										_self.marriage_status = hyqkList[i].name;  
																			 
									 } 						
								 }   
							 }  
							   
							 if(personal_info.childStatus!=null){ 
									for(let i = 0;i< znqkList.length;i++)
									{
										 if(personal_info.childStatus == znqkList[i].value)
										 {
											_self.children_status = znqkList[i].name; 
 																				 
										 } 						
									}  
							 }   
						} 
					} 
				},function(err){
					console.log('获取基础字典错误'+JSON.stringify(err))
				}) 
			},function(err){
				
			})
			
			
		},
		
		onReady(){
//			console.log('个人信息'+JSON.stringify(this.personalInfo))
			if(this.personalInfo.age !=null){
				this.baseInfo+= this.personalInfo.age.toString();
				if(this.personalInfo.height != null || this.personalInfo.weight != null)
				{
					this.baseInfo+= '岁 · '
				}else
				{
					this.baseInfo+='岁'
				}
			}
			if(this.personalInfo.height !=null){
				this.baseInfo+= this.personalInfo.height.toString();
				if(this.personalInfo.weight != null){
					this.baseInfo+='cm · '
				}else
				{
					this.baseInfo+='cm'
				}
			}
			if(this.personalInfo.weight != null){
				this.baseInfo+= this.personalInfo.weight.toString()+'kg';
		
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal{
		margin-top: -44px;
	}
	.personal-main{
		background-color: #fff;
		border-radius:12px 12px 0 0;
		margin-top: -12px;
		padding: 15px;
		position: relative;
		z-index: 99;
	}
	.personal-name{
		display: flex;
		align-items: center;
		span{
			font-size: 20px;
			margin-right: 5px;
		}
	}
	.personal-space{
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
		.personal-info{
			span{color:#444953;}
		}
		.personal-address{
			background-color: #F1F3F4;
			padding: 4px 12px;
			border-radius: 4px;
			color:#444953;
			span{
				margin-left: 3px;
			}
		}
	}
	.personal-att{
		 background-color: #F1F3F4;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 padding: 16px;
		 margin: 20px 0;
		 border-radius: 12px;
		 .personal-att-text{
			 h2{
				 font-size: 20px;
				 font-weight: normal;
				 color:#555;
				 margin-bottom: 4px;
			 }
			 .u-flex{
				 color:#27B148;
				 p{
					 margin-right: 3px;
				 }
			 }
		 }
	}
	.personal-item{
		margin-top: 24px;
		.personal-tit{
			display: flex;
			align-items: center;
			span{
				font-size: 16px;
				margin-left: 4px;
			}
		}
		.personal-con{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.personal-col{
				width: 48%;
				border-radius: 4px;
				background-color: #F1F3F4 ;
				padding: 12px 16px;
				margin-top: 10px;
				
				p{
					color:#999;
					font-size: 12px;
				}
				h4{
					font-size: 16px;
					font-weight: normal;
					margin-top: 4px;
				}
			}
			.personal-row{
				border-radius: 4px;
				background-color: #F1F3F4 ;
				padding: 12px 16px;
				margin-top: 10px;
				width: 100%;
				p{
					color:#999;
					font-size: 12px;
				}
				h4{
					font-size: 16px;
					font-weight: normal;
					margin-top: 4px;
				}
				.personal-label{
					display: flex;
					margin-top: 10px;
					flex-wrap: wrap;
					span{
						margin-right: 8px;
						background-color: #FFC1BC ;
						padding: 4px 10px;
						border-radius: 4px;
						font-size: 12px;
						margin-bottom: 10px;
					}
				}
			}
			.personal-text{
				border-radius: 4px;
				padding: 16px;
				background-color: #F1F3F4;
				margin-top: 10px;
				line-height: 24px;
			}
		}
	}
	.personal-btn{
		padding: 15px;
		span{
			margin-right: 5px;
		}
	}
</style>