platformFront/src/components/admin/PersonCenter.vue

<template>
	<div class="personCon">
		<MiniTitle>
			<div slot="mini" class="miniTit">个人中心</div>
		</MiniTitle>
	<div class="conPerson">
		<div class="personCenter">
			<h4>基本信息</h4>
			<div class="detailInfo">
				<el-row>
					<el-col :span="2">
						<div class="" ref="perfect" v-bind:class="{title: isActive}">姓名:</div>
					</el-col>
					<el-col :span="21">
						<div class="" v-if="person">{{linkman}}</div>
						<el-input placeholder="请输入姓名" v-if="personNo" clearable v-model="linkman"></el-input>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="2">
						<div class="" v-bind:class="{title: isActive}">所属部门:</div>
					</el-col>
					<el-col :span="21">
						<div class="" v-if="person">{{dept}}</div>
						<el-input placeholder="请输入所属部门" v-if="personNo" clearable v-model="dept"></el-input>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="2">
						<div class="" v-bind:class="{title: isActive}">所属岗位:</div>
					</el-col>
					<el-col :span="21">
						<div class="" v-if="person">{{position}}</div>
						<el-input placeholder="请输入所在岗位" v-if="personNo" clearable v-model="position"></el-input>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="2">
						<div class="" v-bind:class="{title: isActive}">手机号:</div>
					</el-col>
					<el-col :span="21">
						<div class="" v-if="person">{{phone}}</div>
						<el-input placeholder="请输入手机号" v-if="personNo" maxlength="11" clearable v-model="phone"></el-input>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="2">
						<div class="" v-bind:class="{title: isActive}">邮箱:</div>
					</el-col>
					<el-col :span="21">
						<div class="" v-if="person">{{email}}</div>
						<el-input placeholder="请输入邮箱" v-if="personNo" clearable v-model="email"></el-input>
					</el-col>
				</el-row>
				<!--<button type="success" class="adminChange" @click="adminChange()" v-if="this.personNo==false">修改</button>
				<button type="success" class="adminChange2" @click="changeQue()" v-else-if="this.personNo == true">确定</button>-->
			</div>
			<div class="txtHeight"></div>
		</div>
		<div class="safChange">
			<h4>账号安全</h4>
			<div class="leftCon">
				<p class="radio"><i class="el-icon-circle-check-outline"></i>登录密码</p>
				<!-- <el-radio v-model="radio" label="1" class="radio">登录密码</el-radio> -->
				<p class="text">安全性高的密码可以使账号更安全。建议您定期更换密码，设置一个不能由纯数字、字母组成且长度在6位~16位的密码</p>
			</div>
			<div class="rigCon">
				<i class="el-icon-circle-check-outline"></i><span >已设置</span><span class="changeTxt" @click="changeText()">修改</span>
			</div>
		</div>
	</div>
	</div>
</template>
<script>
	import api from '../../api/admin.js';
	import MiniTitle from '../common/MiniTile.vue'

	export default {
		name: 'user-information',
		components: {
			MiniTitle
		},
		data: function() {
			return {
				radio: '',
				radio2: '',
				personNo: false,
				person: true,
				username: null,
				phone: null,
				linkman: null,
				email: null,
				isActive: false,
				dept: null,
				position: null
			}
		},
		created: function() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				//获取当前账户信息
				api.getPersonInfo().then((res) => {
					if (res.data.code == '0') {
						const data = res.data.data;

						if (data.phone !== '' || data.phone !== null || data.phone !== 0 ? this.phone = data.phone :
							this.phone = '待完善');
						if (data.linkman !== '' || data.linkman !== null || data.linkman !== 0 ? this.linkman = data.linkman : this.linkman =
							'待完善');
						if (data.dept !== '' || data.dept !== null || data.dept !== 0 ? this.dept = data.dept : this.dept = '待完善');
						if (data.position !== '' || data.position !== null || data.position !== 0 ? this.position = data.position :
							this.position = '待完善');
						if (data.email !== '' || data.email !== null || data.email !== 0 ? this.email = data.email : this.email = '待完善')
						;
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			adminChange() {
				this.personNo = true;
				this.person = false;
				this.isActive = true;
			},
			changeQue() {
				const myreg = /^1[0-9]{10}$/;
				const params = {
					"linkman": this.linkman, //req
					"dept": this.dept, //req
					"position": this.position,
					"phone": this.phone,
					"email": this.email,
				};
				if(this.phone == ''){
					this.$message.error("手机号不能为空");
				}else if(!myreg.test(this.phone)){
					this.$message.error("请输入正确的手机号")
				}else{
					api.updatePersonInfo(params).then((res) => {
						console.log(res.data.code)
						if (res.data.code == '0') {
							this.$message({
								showClose: true,
								message: '修改成功!',
								type: 'success',
								duration: 1000,
								onClose: function() {
									this.personNo = false;
									this.person = true;
									this.getUserInfo();
								}.bind(this)
							});
						}
					}).catch((error) => {
						console.log(error);
					});
				}
			},
			changeText() {
				console.log('000')
				this.$router.push({
					path: 'LT-GRZX/CHANGE'
				});
			}
		}
	}
</script>
<style lang="less">
	.conPerson {
		.personCenter {
			margin-left: 20px !important;
			background-color: #fff;
			margin-right: 20px !important;
			margin-top: 20px !important;
			height: auto;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.13);
			position: relative;

			h4 {
				font-size: 14px;
				padding-top: 20px;
				margin-left: 30px;
			}

			.title {
				margin-top: 4px;
			}

			.txtHeight {
				height: 30px;
			}

			.detailInfo {
				.el-col {
					margin-top: 35px;
					color: #424243;
					font-size: 12px;

				}

				.el-col-2 {
					text-align: right;
					width: 10%;
				}

				.el-col-21 {
					margin-left: 30px;
					width: 175px;
				}
			}

			.adminChange {
				width: 80px;
				height: 30px;
				background: #22ccc8;
				font-size: 12px;
				color: #fff;
				border-radius: 3px;
				border: 0;
				outline: none;
				cursor: pointer;
				position: absolute;
				right: 30px;
				top: 10px;
			}

			.adminChange2 {
				width: 80px;
				height: 30px;
				background: #ffb03b;
				font-size: 12px;
				color: #fff;
				border-radius: 3px;
				border: 0;
				outline: none;
				cursor: pointer;
				position: absolute;
				right: 30px;
				top: 10px;
			}

			.el-input__inner {
				width: 175px;
				height: 30px;
				line-height: 30px;
				font-size: 12px;
			}

			.el-input__icon {
				line-height: 25px;
			}
		}

		.safChange {
			height: 150px;
			background: #fff;
			margin: 20px 20px 0 20px;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.13);

			h4 {
				font-size: 14px;
				padding-top: 20px;
				margin-left: 30px;
				padding-bottom: 20px;
			}

			.el-radio__label {
				font-size: 12px !important;
			}

			.leftCon {
				float: left;
				background: #fff;
				margin-left: 30px;
				
				.radio {
					margin-bottom: 15px;
					font-size: 12px;
					color: #606266;
				}

				.text {
					font-size: 12px;
					color: #606266;
				}
			}

			.rigCon {
				float: right;
				margin-right: 30px;
				font-size: 12px;
				color: #606266;

				.radio2 {
					margin-right: 30px;
				}

				.changeTxt {
					cursor: pointer;
					margin-left: 30px;
					&:hover {
						color: #409EFF;
					}
				}
			}

			.el-radio {
				cursor: auto;
			}

			.el-radio__inner {
				cursor: auto;
			}

			.el-radio__inner:hover {
				border-color: #9b9b9b;
			}

			.el-radio__input {
				cursor: auto;
			}

			.el-radio__input.is-checked .el-radio__inner {
				border-color: #9b9b9b;
				background: #fff;
			}

			.el-radio__input.is-checked+.el-radio__label {
				color: #606266;
			}
		}
		
	}
	.personCon{
		.miniTit{
			font-size: 14px;
			font-weight: bold;
			margin-left: 20px;
		}
	}
</style>