GEKE_PHONE/pages/team/personaldetail.vue

<template>
	<div>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">个人资料</block>
		</cu-custom>
		<!-- <div class="top" @click="ret()">
			<div style="width: 10%;height: 5px;"></div>
			<div style="margin-left: 10px;">
			<span style="float: left;width: 20px;height: 20px;">
				<image src="../../static/icon/fanhui3.png" style="width: 18px;height: 18px;"></image>
			</span>	
			<div style="margin-top: 5px;">
			<span style="color: #FFFFFF;">返回</span>
			</div>
			</div>
			<div style="text-align: center;margin-top: -22px;">
			<span style="color: #FFFFFF;">个人中心</span>
			</div>
		</div> -->
		<!-- <div class="panl" >
			<div style="width: 100%;height: 20px;"></div>
		<div class="card">
			<br>
			<div style="margin-left: 20px;margin-top: -10px;">
			<div>
				<h2>{{personalList.username}}
				<image src="../../static/icon/xbnv.png" class="ic" v-if="personalList.sex=='2'"></image>
				<image src="../../static/icon/xbn.png" class="ic" v-if="personalList.sex=='1'"></image>
				<image src="../../static/icon/xbn.png" class="ic" v-if="personalList.sex ==''"></image>
				</h2>
			</div> -->
			<!-- <div style="margin-top: -20px;border-radius:50%; overflow:hidden;">
			<span style="margin-left: 80%;">
			 <image :src="personalList.avatar" class="imgs"></image>
			</span>
			</div> -->
			<!-- <div style="width:60px; height:60px; border-radius:50%; overflow:hidden;margin-left: 80%;margin-top: -20px;">
			 <image :src="personalList.avatar" style="width:60px; height:60px;"></image>
			</div>
			<div style="margin-top: -35px;">
				<span class="fontColr">{{personalList.phone}}</span>
			</div>
			
			<div style="margin-top: 0px;">
			<span class="fontColr">{{personalList.email}}</span>
			</div>
			
			</div>
		</div>
		
		<br>
		</div> -->
		<div style="background-color: #FFFFFF; ">
			<ul>
				<li class="s">
				<div style="width: 10;height: 30px;"></div>
				
				<span class="fontColrs">头像</span>	
			
				<span style="width: 10px;height: 10px;float: right;"></span>
				<div style="float: right; width:40px; height:40px; border-radius:50%; overflow:hidden;margin-top: -10px;">
				 <image :src="personalList.avatar" style="width:40px; height:40px;"></image>
				</div>
				<br>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				
				<span class="fontColrs">账号</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.username}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				
				<span class="fontColrs">工号</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.workNo}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">姓名</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.realname}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				
				<span class="fontColrs">性别</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;" v-if="personalList.sex=='2'">女</span>
				<span style="float: right;" v-if="personalList.sex=='1'">男</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">英文名</span>
					<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.egName}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">职位</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.post}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">部门</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.orgCodeTxt}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">邮箱</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.email}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">手机号码</span>
					<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.phone}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">出生日期</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.birthDate}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">入职日期</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.entryDate}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">紧急联系人</span>
					<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.urgentName}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">联系人电话</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.urgentPhone}}</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">当前可用年假</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.availableDay/24}}天</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">当前剩余调休</span>	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;">{{personalList.leaveDate}}小时</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				<div style="width: 10;height: 10px;"></div>
				</li>
				<li class="s">
				<span class="fontColrs">考勤记录</span> 	
				<span style="width: 10px;height: 10px;float: right;"></span>
				<span style="float: right;color: #0081FF;" v-if='personalList.sum=="2"' @click="sign()">本月无异常</span>
				 <span style="float: right;color: red;" v-if='personalList.sum=="1"' @click="sign()">
					本月有异常
					<div style="float: right;margin-top: 1.5px;" >
					<image style="width: 13px; height: 13px;" src="../../static/icon/redjt.png"></image>
					</div>
				</span>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				</li>
			</ul>
		</div>
		<br>
		
		<!-- <button style="background-color: red;color: #FFFFFF;" @click="exit()">退出</button> -->
	</div>
</template>
<script>
	import api from '@/api/api'
	export default {
			data() {
				return {
					t:false,
					personalList:{
						  avatar:'',
						  realname:'',
						  username:'',
						  post:'',
						  depart:'',
						  phone:'',
						  workNo:'',
						  birthday:'',
						  email:'',
						  sex:'',
						  egName:'',
						  birthDate:'',
						  entryDate:'',
						  urgentName:'',
						  urgentPhone:'',
						  availableDay:'',
						  orgCodeTxt:'',
						  leaveDate:'',
						  sum:''
						},
						  userUrl:'/sys/user/queryById',
				}
			},
			created() {
				
				this.load();
				
			},methods:{
				upload(){
					
				},
				load(){
					this.$http.get(this.userUrl,{params:{id:this.$store.getters.userid}}).then(res=>{
						console.log("res",res)
							let perArr = res.data.data;
					        let avatar=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar):'/static/avatar_boy.png'
							this.personalList.avatar =avatar
							this.personalList.realname = perArr.realname
							this.personalList.username = perArr.username
							this.personalList.post = perArr.post
							this.personalList.depart = perArr.departIds
							this.personalList.phone=perArr.phone
							this.personalList.workNo=perArr.workNo
							this.personalList.birthday=perArr.birthday
							this.personalList.email=perArr.email
							this.personalList.sex=perArr.sex
							this.personalList.egName=perArr.egName
							this.personalList.birthDate=perArr.birthDate
							this.personalList.entryDate=perArr.entryDate
							this.personalList.urgentName=perArr.urgentName
							this.personalList.urgentPhone=perArr.urgentPhone
							if(res.data.sign!="" &&res.data.sign!=undefined){
								this.personalList.availableDay=res.data.sign.availableDay
								this.personalList.leaveDate=res.data.sign.leaveDate
							}
							this.personalList.orgCodeTxt=perArr.orgCodeTxt
							
							this.personalList.sum=res.data.sum
							
							
						
					}).catch(err => {
						console.log(err);
					});
					
				}		,
				exit(){
					this.$Router.push({name:'userexit'})
				},
				ret(){
					this.$Router.push({name:'index'})
				},
				sign(){
					this.$Router.push({name:'usersign'})
				}
				
			}
			
		}
</script>

<style>

	.panl{
	/* 	background-image: url(../../static/bj001.jpeg);
		background-size:100% 100%;  */
		 
	}
	.card{
		
		 background-color: #FFFFFF; 
		width: 95%;
		height: 105px;
		margin: 0 auto;
		border-radius:5px 5px 5px 5px;
		box-shadow:0 4px 8px 0 rgba(255, 255, 255, 0.2),0 6px 20px 0 rgba(255, 255, 255, 0.2);
	}
	.imgs{
		 width: 60px;
		height: 60px; 
		/* border-radius:5px 5px 5px 5px; */ 
		border-radius:50%; 
	}
	.fontColr{
		color: #0081FF;
		font-size: 13px;
	}
	
	.s{
		
		list-style-type:none;
		margin-left: -20px;
	}
	.fontColrs{
		color: #A3A7B1;
	}
	.ic{
		width: 20px;
		height: 20px;
		
		margin-left: 10px;
	}
	
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
	}
</style>