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
4 years ago
|
<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>
|