jp-xqjy/pages/friend/personal.vue

<template>
	<view>
		<view class="personal">
			<u-modal v-model="show" :showConfirmButton="false" :mask-close-able="true"  >
				<view class="praiseMain">
				<view class="praiseMain-item">
					<view class="praiseMain-tit">恭喜配对成功!</view>
					<view class="praiseMain-pic">
						<view class="praiseMain-pic-item">
							<u-image class="newsList-img" :src="info.faceImage+'?x-oss-process=image/resize,m_fill,w_256,h_256'" height="260" width="260" border-radius="10"></u-image>
						</view>
						<view class="praiseMain-heart">
							<u-icon custom-prefix="custom-icon" name="heart-2-fill" size="36px" color="#fff"></u-icon>
						</view>
						<view class="praiseMain-pic-item">
							<u-image class="newsList-img" :src="detail.faceImage+'?x-oss-process=image/resize,m_fill,w_256,h_256'" height="260" width="260" border-radius="10"></u-image>
						</view>
					</view>
					<view class="praiseMain-pic-text">恭喜！您与「{{detail.realName}}」相互点赞！</view>
					<view class="praiseMain-btn">
						<u-button type="error"  @click="gotoUrl('pages/user/message?id='+detail.id)" shape="circle" :custom-style="customStyle2">联系Ta</u-button>
					</view>
				</view>
				</view>
			</u-modal>

			<view class="personalHead personalHead-friend" :style="'height: '+(detail.faceImage?'375':'120')+'px;background-size : cover;background-image: url('+detail.faceImage+') ;background-repeat:no-repeat;background-position:center; '">
				
				<u-navbar :is-back="false"
				 :border-bottom="false" :backTextStyle="backTextStyle" :backIconColor="backIconColor" :background="navbarBg" >
					<view class="slot-wrap" @tap="goBack"  >
						<u-icon class="navbar-back" style="border: 1px solid #fff;border-radius:100%" custom-prefix="custom-icon" name="icon-back2" ></u-icon>
					</view>
				</u-navbar>
			
 			</view>
			<view class="personal-main"  v-if="detail.id">
				<view class="personal-name">
					<span v-text="showName(detail.realName)"></span>
					<u-icon custom-prefix="custom-icon" :name="detail.gender?'women-line':'men-line'" :color="detail.gender?'#FF695B':'#1677FF'"></u-icon>
				</view>
				<view class="personal-space">
					<view class="personal-info">
						<span>{{detail.age}}岁 · {{detail.height}}cm {{detail.weight?'· '+detail.weight+'kg':''}}</span>
					</view>
					<view class="personal-address">
						<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
						<span>{{detail.orgAreaName}}</span>
					</view>
				</view>
				<view class="personal-att">
					<view class="personal-att-text">
						<h2 v-if="islogin">{{detail.orgName}}</h2>
						<view class="u-flex">
							<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.{{detail.number}}</h4>
						</view>
						<view class="personal-col">
							<p>学历</p>
							<h4>{{detail.educationN}}</h4>
						</view>
						<view class="personal-col">
							<p>行业</p>
							<h4>{{detail.industryN}}</h4>
						</view>
						<view class="personal-col">
							<p>职业</p>
							<h4>{{detail.post}}</h4>
						</view>
						<view class="personal-col">
							<p>月薪</p>
							<h4>{{detail.salaryRangeN}}</h4>
						</view>
						<view class="personal-col">
							<p>住房状况</p>
							<h4>{{detail.housingSituationN}}</h4>
						</view>
						<view class="personal-col">
							<p>婚姻状况</p>
							<h4>{{detail.maritalStatusN}}</h4>
						</view>
						<view class="personal-col">
							<p>子女状况</p>
							<h4>{{detail.childStatusN}}</h4>
						</view>
						<view class="personal-col">
							<p>出生地</p>
							<h4>{{detail.birthplaceN}}</h4>
						</view>
						<view class="personal-col">
							<p>现工作所在地</p>
							<h4>{{detail.workplaceN}}</h4>
						</view>
						<view class="personal-row">
							<p>兴趣爱好</p>
							<view class="personal-label">
								<view v-if="!islogin">游客不可见</view>
								<span v-for="(item,index) in hobbyList"
								:key="index"
								>{{item.hobbyName}}</span>
								<view v-if="islogin&&hobbyList.length==0">暂未填写</view>
							</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">
							{{detail.selfEvaluation?detail.selfEvaluation:'暂未填写'}}
 						</view>
					</view>
				</view>
				<view class="personal-item" style="    padding-bottom: 60px;">
					<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>{{detail.taAgeRangeN}}</h4>
						</view>
						<view class="personal-col">
							<p>月薪</p>
							<h4>{{detail.taIncomeRangeN}}</h4>
						</view>
						<view class="personal-col">
							<p>学历</p>
							<h4>{{detail.taEduN}}</h4>
						</view>
						<view class="personal-col">
							<p>职业</p>
							<h4>{{detail.taOccupation}}</h4>
						</view>
						<view class="personal-row">
							<p>现工作所在地</p>
							<h4>{{detail.taWorkplaceN}}</h4>
						</view>
						<view class="personal-row">
							<p>其他要求</p>
							<h4>{{detail.taOther}}</h4>
						</view>
					</view>
				</view>
				
			
			</view>
			<template v-if="detail.id">
				<view class="personal-btn"  v-if="!islogin">
					<u-button type="error" @click="gotoUrl('pagesA/pages/login/index')" shape="circle" :custom-style="customStyle">
						<span>注册 / 登录</span>
					</u-button>
					
				</view>
				<view class="personal-btn"  v-if="islogin">
					<u-button type="error"  v-if="isedit" @click="gotoUrl('pages/user/edit')" shape="circle" :custom-style="customStyle">
						<span>编辑</span>
						<u-icon custom-prefix="custom-icon" name="edit-2-line"></u-icon>
					</u-button>
					
					
					<u-button type="error"  v-if="!isedit"  @click="likeBtn" shape="circle" :custom-style="customStyle">
						<span>{{isLike?'已赞':'赞Ta'}}</span>
						<u-icon custom-prefix="custom-icon" name="thumb-up-line"></u-icon>
					</u-button>
					
				</view>
			</template>
			
			
			 
		</view>
 	</view>
</template>

<script>
	import * as friendApi from '@/apis/friend.js'
	
	export default {
		data() {
			return {
				info:{},
				show:false,
				islogin:false,
				isedit:false,
				id:"",
				readStatus:0,
				isLike:false,
				detail:{},
				hobbyList:[],
				backIconColor:'#FFFFFF',
				backTextStyle:{
					background: '#FF5E5E'
				},
				navbarBg: {
					background: 'none'
				},
				customStyle: {
					background: '#FF5E5E'
				}, 
				customStyle2: {
					background: '#FF5E5E'
				}, 
			}

		},methods: {
			goBack() {
				uni.navigateBack();
			},
			likeBtn(){
				if(this.isLike){
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				friendApi.beLike({
					beMemberId:this.id,
				}).then(response => {
				    
					this.isLike=true
					if(this.isLike){
						this.customStyle.background ="#a59f9f"
					}
				   uni.hideLoading()
				   
					if(response.data=="1"){
						this.show=true
					}		
				}).catch(error => {
				    uni.showToast({
				    	title: error,icon: "none"
				    })
				})
			},
				getDetail() {
					var memberId=undefined;
				
					var info =this.carhelp.getPersonInfo();
					this.info=info
					
					if(info){
						if(!this.id||this.id==""){
							this.id=info.id
						}
						memberId=info.id
						this.islogin=true;
						if(this.id==info.id){
							this.isedit=true;
						}
					}
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				    friendApi.detail({
						id:this.id,
						memberId:memberId,
						readStatus:this.readStatus
						}).then(response => {
				        this.isLoading = false;
						
						this.detail = Object.assign(response.data.memberInfo)
						this.$forceUpdate()
						if(this.islogin){
							this.hobbyList = response.data.hobbyList;
							this.isLike = response.data.isLike;
							if(this.isLike){
								this.customStyle.background ="#a59f9f"
							}
						}else{
							var tempdetail = response.data.memberInfo;
							var sz=["number",'realName',"faceImage","gender","age",'height','weight','orgAreaName','orgName']
							
							for(var i  in this.detail ){
								if(sz.indexOf(i)==-1){
									this.detail[i]="游客不可见"
									
								}
							}
							 
						}
						for(var i  in this.detail ){
							if(this.detail[i]==null){
								this.detail[i]=""
								
							}
						}
					   uni.hideLoading()
				
				    }).catch(error => {
				         uni.showToast({
				         
				         	title: error,icon: "none"
				         })
				    })
				}
		},
		onLoad(op) {	
 			if(op.id){
				this.id =op.id;
			}
			
			if(op.readStatus==1){
				this.readStatus=1;
			}	
		},
		onReady() {
			
			this.getDetail();
		}
	}
</script>
<style >
	
	.personalHead-friend .u-icon-wrap{
		
		    background: rgba(0, 0, 0, 0.5);
		    padding: 4px;
		    border-radius: 12px;
	}
</style>
<style lang="scss" scoped>
	.personalHead-friend {
			//background-size: 100% !important;
		 
	}
	 .slot-wrap{
		 padding-left:20px;
		 .navbar-back{
			     color: #333;
			 font-size: 20px;
			 opacity: 0.5;
		 }
	 }
	.personal{
		margin-top: -44px;
	}
	.personal-main{
		padding-bottom: 80px;
		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{
		z-index: 100;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 15px;
		span{
			margin-right: 5px;
		}
	}
	.praiseMain{
		.praiseMain-item{
			margin: 15px;
			background-color: #fff;
			border-radius: 12px;
			//padding: 20px;
			position: relative;
		}
		.praiseMain-heart{
			height: 60px;
			width: 60px;
			background-color: #FF5E5E;
			position: absolute;
			border-radius: 50%;
			top: 95px;
			left: 50%;
			margin-left: -30px;
			z-index: 9;
			line-height: 60px;
			text-align: center;
		}
		.praiseMain-tit{
			font-size: 24px;
			color:#FF5E5E;
			margin-bottom: 10px;
			text-align: center;
		}
		.praiseMain-pic{
			display: flex;
			justify-content: space-between;
			//padding: 0 15px;
		}
		.praiseMain-pic-text{
			font-size: 16px;
			text-align: center;
			margin: 15px 0;
		}
		.praiseMain-btn{
			padding: 0 15px;
		}
	}
</style>