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.
439 lines
18 KiB
439 lines
18 KiB
<template> |
|
<div> |
|
<div class="page"> |
|
<div class="tabs"> |
|
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{item}}</a> |
|
</div> |
|
<div class="page-content"> |
|
<div v-if="active == 'first'"> |
|
<el-form> |
|
<ul class="list"> |
|
<li> |
|
<label>头像</label> |
|
<div class="avatar-wrap"> |
|
<img :src="this.$store.state.avatar" class="avatar" /> |
|
<el-upload :action="this.api.uploadUserAvatars" :data="{userId:this.userId}" name="file" :limit="3" :on-success="getRes"> |
|
<el-button size="small"><img src="../assets/img/upload.png" alt=""> 上传头像</el-button> |
|
</el-upload> |
|
</div> |
|
</li> |
|
<li> |
|
<label>姓名</label> |
|
<div> |
|
<el-input v-model="personalInformation.userName" clearable></el-input> |
|
</div> |
|
</li> |
|
<li> |
|
<label>性别</label> |
|
<div> |
|
<el-select v-model="personalInformation.sex"> |
|
<el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option> |
|
</el-select> |
|
</div> |
|
</li> |
|
<li> |
|
<label>所在国家</label> |
|
<div> |
|
<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> |
|
</li> |
|
<li> |
|
<label>所在省份</label> |
|
<div> |
|
<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> |
|
</li> |
|
<li> |
|
<label>所在省市</label> |
|
<div> |
|
<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> |
|
</li> |
|
<li> |
|
<label>出生年月日</label> |
|
<div> |
|
<el-date-picker |
|
v-model="personalInformation.dateBirth" |
|
:clearable="false" |
|
class="block-right" |
|
type="date"> |
|
</el-date-picker> |
|
</div> |
|
</li> |
|
<li> |
|
<label>证件</label> |
|
<div> |
|
<el-input v-model="personalInformation.idnumber" clearable></el-input> |
|
</div> |
|
</li> |
|
<li> |
|
<label>教育程度</label> |
|
<div> |
|
<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> |
|
</li> |
|
</ul> |
|
</el-form> |
|
</div> |
|
<div v-else> |
|
<ul class="list"> |
|
<li> |
|
<label>用户账号</label> |
|
<div> |
|
<el-input v-model="personalInformation.account" clearable></el-input> |
|
</div> |
|
</li> |
|
<li> |
|
<label>手机号</label> |
|
<div> |
|
<el-input v-model="personalInformation.phone" clearable></el-input> |
|
</div> |
|
</li> |
|
<li> |
|
<label>邮箱</label> |
|
<div> |
|
<el-input v-model="personalInformation.email" clearable></el-input> |
|
</div> |
|
</li> |
|
<li> |
|
<label>密码</label> |
|
<div> |
|
<el-button size="small" @click="bindPassword">更换密码</el-button> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
<div style="margin-top: 32px"> |
|
<el-button type="primary" size="small" v-throttle @click="save">更新</el-button> |
|
</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 _ from 'lodash'; |
|
import bus from '@/libs/bus' |
|
export default { |
|
data() { |
|
return { |
|
active: 'first', |
|
tabs: { |
|
first: '用户信息', |
|
second: '账号信息' |
|
}, |
|
userId: this.$store.state.userId, |
|
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: this.$store.state.provinceList, //省份 |
|
cityList: [], //城市 |
|
// 教育程度 |
|
educationDegreeList: [ |
|
{ |
|
name: '专科', |
|
value: 1 |
|
}, |
|
{ |
|
name: '本科', |
|
value: 2 |
|
}, |
|
{ |
|
name: '硕士', |
|
value: 3 |
|
}, |
|
{ |
|
name: '博士', |
|
value: 4 |
|
}, |
|
{ |
|
name: '其他', |
|
value: 5 |
|
} |
|
], |
|
schoolList: [], |
|
curPassword: '', |
|
accountRepeat: false |
|
}; |
|
}, |
|
mounted() { |
|
bus.$emit('setBg','course') |
|
this.getdata(); |
|
this.getProvince() |
|
this.getSchoolData() |
|
}, |
|
methods: { |
|
tabChange(index){ |
|
this.active = index |
|
}, |
|
getProvince(){ |
|
this.$get(this.api.queryProvince).then(res => { |
|
this.provinceList = res.data.list |
|
this.$store.commit("provinceData", { provinceList : this.provinceList}); |
|
}).catch(res => {}); |
|
}, |
|
// 获取城市 |
|
getCity(){ |
|
this.personalInformation.cityId = 1 |
|
this.getCityData() |
|
}, |
|
getCityData(){ |
|
console.log(33,this.personalInformation.provinceId) |
|
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 => {}); |
|
}, |
|
//取得头像地址 |
|
getRes(res) { |
|
this.$store.commit('setAvatarData',{avatar:res.message}) |
|
bus.$emit('updateAvatar',res.message) |
|
let data = { |
|
userId: this.userId, |
|
userAvatars: res.message |
|
} |
|
this.$post(this.api.userinfoUpdate,data).then(res => {}).catch(res => {}) |
|
}, |
|
uploadHeadImg: function() { |
|
this.$el.querySelector('.hiddenInput').click(); |
|
}, |
|
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() |
|
} |
|
}) |
|
}) |
|
.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('请输入正确的邮箱') |
|
this.personalInformation.clientName = this.schoolList.find(n => n.id == this.personalInformation.clientId).clientName |
|
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: personalInformation.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> |
|
/deep/.page{ |
|
width: 70%; |
|
margin: 50px auto 20px; |
|
.page-content{ |
|
padding-top: 0; |
|
.list{ |
|
li{ |
|
display: flex; |
|
align-items: center; |
|
padding: 16px 0; |
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
|
label{ |
|
width: 180px; |
|
color: rgba(0, 0, 0, 0.85); |
|
font-size: 16px; |
|
} |
|
.avatar-wrap{ |
|
display: inline-flex; |
|
align-items: center; |
|
.avatar{ |
|
width: 64px; |
|
height: 64px; |
|
margin-right: 24px; |
|
border-radius: 100%; |
|
} |
|
} |
|
.el-input{ |
|
width: 320px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |