You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
737 lines
24 KiB
737 lines
24 KiB
<template> |
|
<div |
|
style="width:100%;height:100%;display:flex;align-items: center;flex-direction:column"> |
|
<div class="header"> |
|
<img :src="avatar" class="HeadPortrait" /> |
|
<div style="color:#cb221c;font-size:14px;font-family:MicrosoftYaHei;margin-top:5px;"> |
|
<el-upload :action="this.api.fileupload" :on-success="changeAvatar"> |
|
<div>点击更改头像</div> |
|
</el-upload> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<p class="block-title" style="display: flex;justify-content: space-between;align-items: center;"> |
|
用户信息 |
|
<el-button type="success" size="small" v-throttle @click="save">更新资料</el-button> |
|
</p> |
|
<p class="meta-title">个人信息</p> |
|
<div class="information"> |
|
<div class="block"> |
|
<p class="block-left">姓名</p> |
|
<div class="block-right"> |
|
<input |
|
id="username" |
|
type="text" |
|
v-model="personalInformation.userName" |
|
/> |
|
<div class="ii"> |
|
<label for="username"> |
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i> |
|
</label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">性别</p> |
|
<el-select |
|
v-model="personalInformation.sex" |
|
placeholder |
|
> |
|
<el-option |
|
v-for="item in sexList" |
|
:key="item.value" |
|
:label="item.name" |
|
:value="item.value" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">所在国家</p> |
|
<el-select |
|
v-model="personalInformation.countries" |
|
placeholder |
|
> |
|
<el-option |
|
v-for="item in countryList" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">所在省份</p> |
|
<el-select |
|
v-model="personalInformation.provinceId" |
|
placeholder |
|
@change="id => getCity(id,1)" |
|
> |
|
<el-option |
|
v-for="item in provinceList" |
|
:key="item.provinceId" |
|
:label="item.provinceName" |
|
:value="item.provinceId" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">所在省市</p> |
|
<el-select |
|
v-model="personalInformation.cityId" |
|
placeholder |
|
:disabled="personalInformation.provinceId ? false : true" |
|
> |
|
<el-option |
|
v-for="item in cityList" |
|
:key="item.cityId" |
|
:label="item.cityName" |
|
:value="item.cityId" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">出生年月日</p> |
|
<el-date-picker |
|
v-model="personalInformation.dateBirth" |
|
:clearable="false" |
|
class="block-right" |
|
type="date"> |
|
</el-date-picker> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">证件</p> |
|
<div class="block-right"> |
|
<input |
|
id="idnumber" |
|
type="text" |
|
v-model="personalInformation.idnumber" |
|
/> |
|
<div class="ii"> |
|
<label for="idnumber"> |
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i> |
|
</label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">教育程度</p> |
|
<el-select |
|
v-model="personalInformation.educationDegree" |
|
placeholder="请选择教育程度" |
|
> |
|
<el-option |
|
v-for="(item,index) in educationDegreeList" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.value" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">当前所在学校</p> |
|
<el-select v-model="personalInformation.clientId" filterable placeholder="请选择学校"> |
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.clientName" :value="item.id"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="card m-b-20"> |
|
<p class="block-title">账号信息</p> |
|
<div class="information"> |
|
<div class="block"> |
|
<p class="block-left">用户账号</p> |
|
<div class="block-right"> |
|
<input |
|
id="account" |
|
type="text" |
|
v-model="personalInformation.account" |
|
@change="accountChange" |
|
/> |
|
<div class="ii"> |
|
<label for="account"> |
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i> |
|
</label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">手机号</p> |
|
<div class="block-right"> |
|
<input |
|
id="phone" |
|
type="text" |
|
maxlength="11" |
|
v-model="personalInformation.phone" |
|
/> |
|
<div class="ii"> |
|
<label for="phone"> |
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i> |
|
</label> |
|
</div> |
|
</div> |
|
<!-- <div class="near-right"> |
|
{{personalInformation.phone}} |
|
<el-button size="small" @click="bindPhone">更换</el-button> |
|
</div> --> |
|
</div> |
|
|
|
<div class="block"> |
|
<p class="block-left">邮箱</p> |
|
<div class="block-right"> |
|
<input |
|
id="email" |
|
type="text" |
|
class="block-right" |
|
v-model="personalInformation.email" |
|
/> |
|
<div class="ii"> |
|
<label for="email"> |
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i> |
|
</label> |
|
</div> |
|
</div> |
|
<!-- <div class="near-right"> --> |
|
<!-- {{personalInformation.email}} --> |
|
<!-- <el-button size="small" @click="bindEmail">绑定</el-button> --> |
|
<!-- </div> --> |
|
</div> |
|
|
|
<!-- <div class="block"> |
|
<p class="block-left">微信</p> --> |
|
<!-- <input |
|
id="wechat" |
|
type="text" |
|
class="block-right" |
|
v-model="personalInformation.weChatID" |
|
/> |
|
<div class="ii"> |
|
<label for="wechat"> |
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i> |
|
</label> |
|
</div> --> |
|
<!-- <div class="near-right"> |
|
{{personalInformation.weChatID}} |
|
<el-button size="small">绑定</el-button> |
|
</div> |
|
</div> --> |
|
|
|
<div class="block"> |
|
<p class="block-left">密码</p> |
|
<div class="near-right"> |
|
<el-button size="small" @click="bindPassword">更换密码</el-button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<el-dialog |
|
title="更换密码" |
|
:visible.sync="passwordVisible" |
|
:close-on-click-modal="false" |
|
@close="closePassword" |
|
width="30%"> |
|
<el-form ref="passwordForm" :model="form" label-width="60px"> |
|
<el-form-item label="原密码"> |
|
<el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input> |
|
</el-form-item> |
|
<el-form-item label="新密码"> |
|
<el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" @keyup.enter.native="editPassword"></el-input> |
|
</el-form-item> |
|
<el-form-item label="新密码"> |
|
<el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="editPassword"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="passwordVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="editPassword">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapState,mapActions } from 'vuex'; |
|
export default { |
|
data() { |
|
return { |
|
personalInformation: { |
|
name:'', |
|
workNumber:'', |
|
password:"", |
|
phone:'', |
|
email:'', |
|
provinceName:'', |
|
cityName:'', |
|
schoolName:'', |
|
professionalName:'', |
|
}, |
|
passwordVisible: false, |
|
passwordForm: { |
|
password: '', |
|
newPassword: '', |
|
reNewPassword: '' |
|
}, |
|
sexList: [ |
|
{ |
|
name: '男', |
|
value: 1 |
|
}, |
|
{ |
|
name: '女', |
|
value: 2 |
|
} |
|
], |
|
countryList: [ |
|
{ |
|
label: '中国' |
|
} |
|
], |
|
form: {}, |
|
provinceList: [], //省份 |
|
cityList: [], //城市 |
|
// 教育程度 |
|
educationDegreeList: [ |
|
{ |
|
name: '专科', |
|
value: 1 |
|
}, |
|
{ |
|
name: '本科', |
|
value: 2 |
|
}, |
|
{ |
|
name: '硕士', |
|
value: 3 |
|
}, |
|
{ |
|
name: '博士', |
|
value: 4 |
|
}, |
|
{ |
|
name: '其他', |
|
value: 5 |
|
} |
|
], |
|
schoolList: [], |
|
curPassword: '', |
|
accountRepeat: false |
|
}; |
|
}, |
|
computed: { |
|
...mapState('user', [ |
|
'userId','avatar' |
|
]) |
|
}, |
|
mounted() { |
|
this.getdata(); |
|
this.getProvince() |
|
this.getSchoolData() |
|
}, |
|
methods: { |
|
...mapActions('user', [ |
|
'setAvatar' |
|
]), |
|
getProvince(){ |
|
this.$get(this.api.queryProvince).then(res => { |
|
this.provinceList = res.data.list |
|
}).catch(res => {}); |
|
}, |
|
// 获取城市 |
|
getCity(id,type){ |
|
this.personalInformation.cityId = 1 |
|
this.getCityData() |
|
}, |
|
getCityData(index){ |
|
let provinceId = this.personalInformation.provinceId |
|
this.$get(this.api.queryCity,{provinceId}).then(res => { |
|
this.cityList = res.data.list |
|
}).catch(res => {}); |
|
}, |
|
// 获取学校名称 |
|
getSchoolData(){ |
|
let data = { |
|
searchContent: '', |
|
provinceId: '', |
|
cityId: '' |
|
} |
|
this.$get(`${this.api.queryClient}/1/1000`,data).then(res => { |
|
this.schoolList = res.data.list |
|
}).catch(res => {}); |
|
}, |
|
accountChange(){ |
|
this.$get(`${this.api.getAccount}?account=${this.form.account}`).then(res => { |
|
if(res.data.userInfo){ |
|
this.accountRepeat = true |
|
this.$message.warning('该账号已存在') |
|
}else{ |
|
this.accountRepeat = false |
|
} |
|
}).catch(res => {}); |
|
}, |
|
changeAvatar(res) { |
|
this.setAvatar(res.data.filesResult.fileUrl) |
|
}, |
|
getdata() { |
|
this.$get(`${this.api.userinfo}?userId=${this.userId}`) |
|
.then(res => { |
|
this.personalInformation = res.data.userInfo |
|
this.personalInformation.countries = '中国' |
|
this.curPassword = this.personalInformation.password |
|
this.$nextTick(() => { |
|
if(this.personalInformation.provinceId){ |
|
this.getCityData(1) |
|
} |
|
}) |
|
}) |
|
.catch(err => { |
|
console.log(err); |
|
}); |
|
}, |
|
bindPassword() { |
|
this.passwordVisible = true |
|
}, |
|
editPassword() { |
|
if(!this.passwordForm.password) return this.$message.warning('请输入原密码') |
|
if(!this.passwordForm.newPassword) return this.$message.warning('请输入新密码') |
|
if(!this.passwordForm.reNewPassword) return this.$message.warning('请确认新密码') |
|
if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return this.$message.warning('请输入6位数以上的密码') |
|
if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return this.$message.warning('输入的新密码不一致，请重新确认') |
|
if(this.curPassword === this.passwordForm.newPassword) return this.$message.warning('原密码跟新密码不能一致') |
|
|
|
let data = { |
|
userId: this.personalInformation.userId, |
|
password: this.passwordForm.password |
|
} |
|
this.$post(this.api.userinfoUpdate,data) |
|
.then(res => { |
|
if(res.success){ |
|
this.$message.success('更换成功') |
|
this.curPassword = this.passwordForm.newPassword |
|
this.passwordVisible = false |
|
}else{ |
|
this.$message.error('更换失败') |
|
} |
|
}) |
|
.catch(err => { |
|
console.log(err); |
|
}); |
|
}, |
|
closePassword() { |
|
this.passwordForm = { |
|
password: '', |
|
newPassword: '', |
|
reNewPassword: '' |
|
} |
|
}, |
|
save() { |
|
if(this.personalInformation.idnumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(this.personalInformation.idnumber)) return this.$message.warning('请输入正确的证件号码') |
|
if(this.accountRepeat) return this.$message.warning('该账号已存在') |
|
if(this.personalInformation.phone && !/^1[3456789]\d{9}$/.test(this.personalInformation.phone)) return this.$message.warning('请输入正确的手机号') |
|
if(this.personalInformation.email && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.personalInformation.email)) return this.$message.warning('请输入正确的邮箱') |
|
let personalInformation = this.personalInformation |
|
let userInfoEntity = { |
|
idnumber: personalInformation.idnumber, |
|
account: personalInformation.account, |
|
cityId: personalInformation.cityId, |
|
countries: personalInformation.countries, |
|
dateBirth: personalInformation.dateBirth, |
|
educationDegree: personalInformation.educationDegree, |
|
email: personalInformation.email, |
|
phone: personalInformation.phone, |
|
provinceId: personalInformation.provinceId, |
|
clientId: personalInformation.clientId, |
|
clientName: this.schoolList.find(n => n.id == personalInformation.clientId).clientName, |
|
sex: personalInformation.sex, |
|
userId: personalInformation.userId, |
|
userName: personalInformation.userName, |
|
} |
|
let data = userInfoEntity |
|
this.$post(this.api.userinfoUpdate,data).then(res => { |
|
if(res.success){ |
|
this.$message.success('提交成功') |
|
this.$router.back() |
|
}else{ |
|
this.$message.error('提交失败') |
|
} |
|
}).catch(res => {}); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.header{ |
|
text-align: center; |
|
} |
|
.header /deep/.el-upload-list__item-name { |
|
display: none; |
|
} |
|
|
|
.header /deep/.el-icon-upload-success{ |
|
display: none; |
|
} |
|
|
|
.header /deep/.el-upload-list__item-status-label{ |
|
display: none; |
|
} |
|
.header /deep/ .el-upload-list{ |
|
display: none; |
|
} |
|
|
|
/deep/.el-input__inner{ |
|
height: 32px !important; |
|
} |
|
/deep/.el-select .el-input .el-select__caret{ |
|
line-height: 32px; |
|
} |
|
input:focus { |
|
outline: 0; |
|
} |
|
.header { |
|
background: #f0f0f0; |
|
} |
|
.openfile { |
|
cursor: pointer; |
|
} |
|
.HeadPortrait { |
|
margin-top: 10px; |
|
width: 80px; |
|
height: 80px; |
|
background: url('../../../assets/img/img.jpg'); |
|
border-radius: 50%; |
|
|
|
.head { |
|
width: 34px; |
|
height: 34px; |
|
background: rgba(255, 255, 255, 1); |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
flex-direction: column; |
|
justify-content: center; |
|
position: relative; |
|
.eee { |
|
height: 10px; |
|
width: 16px; |
|
background-color: rgba(255, 255, 255, 1); |
|
margin-bottom: -10px; |
|
position: absolute; |
|
top: 8px; |
|
z-index: 2; |
|
} |
|
.Semicircle { |
|
width: 12px; |
|
height: 12px; |
|
border: 2px solid #cb221c; |
|
border-radius: 50px; |
|
margin-bottom: 10px; |
|
position: absolute; |
|
} |
|
} |
|
.body { |
|
color: #cb221c; |
|
width: 30px; |
|
height: 20px; |
|
border: 3px solid #f5f5f5; |
|
border-radius: 100%; |
|
margin-top: 5px; |
|
margin-bottom: -10px; |
|
} |
|
.body::after { |
|
content: ''; |
|
width: 40px; |
|
height: 30px; |
|
display: inline-block; |
|
background-color: #cb221c; |
|
margin-top: 8px; |
|
margin-left: -6px; |
|
} |
|
} |
|
input { |
|
height: 50px; |
|
width: 300px; |
|
border: 0; |
|
text-align: right; |
|
outline: none; |
|
} |
|
|
|
.card { |
|
margin-top: 10px; |
|
width: 750px; |
|
padding: 20px; |
|
background: rgba(255, 255, 255, 1); |
|
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
|
border-radius: 10px; |
|
position: relative; |
|
.block-title{ |
|
font-weight: bold; |
|
font-size: 20px; |
|
} |
|
.meta-title{ |
|
margin: 10px 0 0; |
|
color: #cdbcec; |
|
font-size: 15px; |
|
} |
|
.el-icon-document { |
|
color: #cb221c; |
|
font-size: 30px; |
|
} |
|
.el-icon-collection { |
|
color: #cb221c; |
|
position: absolute; |
|
left: 31px; |
|
top: 31px; |
|
font-size: 30px; |
|
} |
|
span { |
|
color: #333333; |
|
font-size: 20px; |
|
} |
|
.plus{ |
|
display: flex; |
|
justify-content: space-between; |
|
i{ |
|
font-size: 22px; |
|
color: #21d749; |
|
cursor: pointer; |
|
} |
|
} |
|
.archives{ |
|
padding: 10px 20px; |
|
margin-top: 20px; |
|
border: 1px dashed #bbb; |
|
border-radius: 12px; |
|
|
|
&.default-arch{ |
|
margin-bottom: 20px; |
|
/deep/.el-select{ |
|
width: 10rem; |
|
} |
|
/deep/input{ |
|
background-color: transparent; |
|
} |
|
} |
|
} |
|
.archives-wrap{ |
|
.block{ |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 8px; |
|
&:last-child{ |
|
margin-bottom: 0; |
|
} |
|
|
|
.block-left{ |
|
width: 30%; |
|
font-family: MicrosoftYaHei; |
|
font-size: 14px; |
|
color: #101010; |
|
} |
|
/deep/.el-input__inner{ |
|
border-radius: 8px !important; |
|
} |
|
} |
|
} |
|
.information { |
|
.block { |
|
line-height: 38px; |
|
position: relative; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
.block-left { |
|
font-family: MicrosoftYaHei; |
|
font-size: 14px; |
|
color: #101010; |
|
} |
|
input{ |
|
font-size: 16px; |
|
} |
|
/deep/.el-date-editor .el-input__prefix{ |
|
line-height: 32px; |
|
} |
|
/deep/.el-input__prefix,/deep/.el-input__suffix{ |
|
left: auto; |
|
right: 0; |
|
} |
|
.block-right,.near-right { |
|
display: inline-flex; |
|
align-items: center; |
|
margin: 0; |
|
padding: 0; |
|
color: #333333ff; |
|
font-size: 18px; |
|
} |
|
.near-right{ |
|
right: 0; |
|
font-size: 18px; |
|
} |
|
.ii { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 22px; |
|
height: 22px; |
|
margin-left: 10px; |
|
border-radius: 50%; |
|
background-color: #cb221c; |
|
i{ |
|
font-size: 12px; |
|
} |
|
} |
|
/deep/.el-input__inner { |
|
padding-right: 1.8rem; |
|
margin-right: 5px; |
|
color: #333333ff; |
|
font-size: 16px; |
|
text-align: right; |
|
border: 0px; |
|
} |
|
/deep/.el-input__icon { |
|
background: #cb221c; |
|
width: 22px; |
|
height: 22px; |
|
line-height: 22px; |
|
color: rgba(255, 255, 255, 1); |
|
border-radius: 50%; |
|
|
|
&.el-icon-date{ |
|
font-size: 14px; |
|
} |
|
} |
|
|
|
/deep/.el-icon-arrow-up:before { |
|
content: '\e6e1'; |
|
margin-top: 5px; |
|
} |
|
|
|
&.readonly .block-left{ |
|
color: #a5a7adff; |
|
} |
|
} |
|
} |
|
.fold{ |
|
margin-top: 20px; |
|
text-align: center; |
|
i{ |
|
font-size: 22px; |
|
color: #8e8e8e; |
|
cursor: pointer; |
|
&:hover{ |
|
opacity: .8; |
|
} |
|
} |
|
} |
|
} |
|
</style> |