赵培友
3 years ago
parent
ccd7b52542
commit
8e53971923
4 changed files with 284 additions and 164 deletions
@ -1,82 +1,89 @@ |
||||
export default { |
||||
tabs: true, |
||||
tabsActive: 1, |
||||
column: [{ label: "头像", prop: "avatar",display:false}], |
||||
group: [ |
||||
{ |
||||
label: "个人信息", |
||||
prop: "info", |
||||
column: [ |
||||
{ |
||||
label: "头像", |
||||
type: "upload", |
||||
listType: "picture-img", |
||||
propsHttp: { |
||||
res: "data", |
||||
url: "link", |
||||
}, |
||||
canvasOption: { |
||||
text: " ", |
||||
ratio: 0.1, |
||||
}, |
||||
action: "/api/blade-resource/oss/endpoint/put-file", |
||||
tip: "只能上传jpg/png用户头像，且不超过500kb", |
||||
span: 12, |
||||
row: true, |
||||
prop: "avatar", |
||||
}, |
||||
{ |
||||
label: "姓名", |
||||
span: 12, |
||||
row: true, |
||||
prop: "realName", |
||||
}, |
||||
{ |
||||
label: "用户名", |
||||
span: 12, |
||||
row: true, |
||||
prop: "name", |
||||
}, |
||||
{ |
||||
label: "手机号", |
||||
span: 12, |
||||
row: true, |
||||
prop: "phone", |
||||
}, |
||||
{ |
||||
label: "邮箱", |
||||
prop: "email", |
||||
span: 12, |
||||
row: true, |
||||
}, |
||||
], |
||||
// import website from "../../config/website";
|
||||
import { Message } from 'element-ui'; |
||||
export const userInfoOption = { |
||||
column: [{ |
||||
label: '头像', |
||||
prop: 'avatar', |
||||
type: 'upload', |
||||
listType: 'picture-img', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
{ |
||||
label: "修改密码", |
||||
prop: "password", |
||||
column: [ |
||||
{ |
||||
label: "原密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "oldPassword", |
||||
}, |
||||
{ |
||||
label: "新密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "newPassword", |
||||
}, |
||||
{ |
||||
label: "确认密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "newPassword1", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
fileType: 'img',//img/video/audio,
|
||||
accept: 'image/png, image/jpeg', |
||||
action: '/api/blade-resource/oss/endpoint/put-file', |
||||
tip: '只能上传jpg/png用户头像，且不超过500kb', |
||||
span: 12, |
||||
row: true, |
||||
uploadBefore: (file, done, loading) => { |
||||
if (['image/png', 'image/jpeg'].indexOf(file.type) == -1) { |
||||
Message({ |
||||
message: '只能上传jpg/png用户头像', |
||||
type: 'error' |
||||
}); |
||||
loading(); |
||||
} |
||||
else { |
||||
done(); |
||||
} |
||||
} |
||||
}, { |
||||
label: '用户名', |
||||
span: 12, |
||||
row: true, |
||||
prop: 'realName' |
||||
}, { |
||||
label: '手机号', |
||||
span: 12, |
||||
row: true, |
||||
prop: 'phone', |
||||
}, { |
||||
label: '邮箱', |
||||
prop: 'email', |
||||
span: 12, |
||||
row: true, |
||||
}] |
||||
} |
||||
export const userPwdOption = { |
||||
column: [{ |
||||
label: '原密码', |
||||
span: 12, |
||||
row: true, |
||||
type: 'password', |
||||
prop: 'oldPassword', |
||||
rules: [{ |
||||
required: true, |
||||
message: "请输入原密码", |
||||
trigger: "blur" |
||||
}] |
||||
}, { |
||||
label: '新密码', |
||||
span: 12, |
||||
row: true, |
||||
type: 'password', |
||||
prop: 'newPassword', |
||||
rules: [{ |
||||
required: true, |
||||
message: "请输入新密码", |
||||
trigger: "blur" |
||||
}] |
||||
}, { |
||||
label: '确认密码', |
||||
span: 12, |
||||
row: true, |
||||
type: 'password', |
||||
prop: 'newPassword1', |
||||
rules: [{ validator: validatePass2, trigger: 'blur' }] |
||||
}] |
||||
} |
||||
|
||||
const validatePass2 = (rule, value, callback) => { |
||||
if (value === '') { |
||||
callback(new Error('请再次输入密码')); |
||||
} else if (value !== this.obj.password) { |
||||
callback(new Error('两次输入密码不一致!')); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
@ -1,94 +1,208 @@ |
||||
<template> |
||||
<div> |
||||
<basic-container> |
||||
<avue-form :option="option" |
||||
v-model="form" |
||||
@tab-click="handleTabClick" |
||||
@submit="handleSubmit"></avue-form> |
||||
<avue-tabs :option="tabOption" @change="handleTabClick"></avue-tabs> |
||||
<div v-if="index === 0"> |
||||
<avue-form |
||||
:option="userInfoOption" |
||||
v-model="form" |
||||
@submit="handleSubmit" |
||||
></avue-form> |
||||
</div> |
||||
<div v-else-if="index === 1"> |
||||
<avue-form |
||||
ref="pwdForm" |
||||
:option="userPwdOption" |
||||
v-model="pwdform" |
||||
@submit="handleSubmit2" |
||||
> |
||||
</avue-form> |
||||
</div> |
||||
</basic-container> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import option from "@/option/user/info"; |
||||
import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user"; |
||||
import md5 from 'js-md5'; |
||||
import func from "@/util/func"; |
||||
import { userInfoOption } from "@/option/user/info"; |
||||
import { getUserInfo, updateInfo, updatePassword } from "@/api/system/user"; |
||||
import md5 from "js-md5"; |
||||
import func from "@/util/func"; |
||||
import {mapGetters} from "vuex"; |
||||
|
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
index: 0, |
||||
option: option, |
||||
form: {} |
||||
}; |
||||
}, |
||||
created() { |
||||
this.handleWitch(); |
||||
export default { |
||||
data() { |
||||
var validatePass = (rule, value, callback) => { |
||||
let reg = |
||||
/^(?=.*\d)(?=.*?[a-z])(?=.*?[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{6,18}$/; |
||||
if (value === "") { |
||||
callback(new Error("请输入新密码")); |
||||
} else if (!reg.test(value)) { |
||||
callback( |
||||
new Error("必须包含6-18位数字、大小写字母、特殊字符，不包含下划线") |
||||
); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
var validatePass2 = (rule, value, callback) => { |
||||
if (value === "") { |
||||
callback(new Error("请再次输入密码")); |
||||
} else if (value !== this.pwdform.newPassword) { |
||||
callback(new Error("两次输入密码不一致!")); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
return { |
||||
index: 0, |
||||
tabOption: { |
||||
column: [ |
||||
{ |
||||
label: "个人信息", |
||||
prop: "0", |
||||
}, |
||||
{ |
||||
label: "修改密码", |
||||
prop: "1", |
||||
}, |
||||
], |
||||
}, |
||||
userInfoOption: userInfoOption, |
||||
userPwdOption: { |
||||
column: [ |
||||
{ |
||||
label: "原密码", |
||||
span: 12, |
||||
row: true, |
||||
prop: "oldPassword", |
||||
name: "oldPassWord", |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入原密码", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "新密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "newPassword", |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入新密码", |
||||
trigger: "blur", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "确认密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "newPassword1", |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: "请输入确认密码", |
||||
trigger: "blur", |
||||
}, |
||||
{ validator: validatePass2, trigger: "blur" }, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
form: {}, |
||||
pwdform: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.handleWitch(); |
||||
}, |
||||
computed: { |
||||
...mapGetters(["userInfo"]), |
||||
}, |
||||
methods: { |
||||
handleSubmit(form, done) { |
||||
updateInfo(form).then( |
||||
(res) => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "修改信息成功!", |
||||
}); |
||||
this.handleWitch() |
||||
} else { |
||||
this.$message({ |
||||
type: "error", |
||||
message: res.data.msg, |
||||
}); |
||||
} |
||||
done(); |
||||
}, |
||||
(error) => { |
||||
window.console.log(error); |
||||
done(); |
||||
} |
||||
); |
||||
}, |
||||
methods: { |
||||
handleSubmit(form, done) { |
||||
if (this.index === 0) { |
||||
updateInfo(form).then(res => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "修改信息成功!" |
||||
}); |
||||
} else { |
||||
this.$message({ |
||||
type: "error", |
||||
message: res.data.msg |
||||
}); |
||||
} |
||||
done(); |
||||
}, error => { |
||||
window.console.log(error); |
||||
done(); |
||||
}) |
||||
} else { |
||||
updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "修改密码成功!" |
||||
}); |
||||
} else { |
||||
this.$message({ |
||||
type: "error", |
||||
message: res.data.msg |
||||
}); |
||||
} |
||||
done(); |
||||
}, error => { |
||||
window.console.log(error); |
||||
done(); |
||||
}) |
||||
handleSubmit2(form, done) { |
||||
updatePassword( |
||||
md5(form.oldPassword), |
||||
md5(form.newPassword), |
||||
md5(form.newPassword1) |
||||
).then( |
||||
(res) => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "修改密码成功!", |
||||
}); |
||||
} else { |
||||
this.$message({ |
||||
type: "error", |
||||
message: res.data.msg, |
||||
}); |
||||
} |
||||
done(); |
||||
}, |
||||
(error) => { |
||||
window.console.log(error); |
||||
done(); |
||||
} |
||||
}, |
||||
handleWitch() { |
||||
if (this.index === 0) { |
||||
getUserInfo().then(res => { |
||||
const user = res.data.data; |
||||
this.form = { |
||||
id: user.id, |
||||
avatar: user.avatar, |
||||
name: user.name, |
||||
realName: user.realName, |
||||
phone: user.phone, |
||||
email: user.email, |
||||
} |
||||
); |
||||
}, |
||||
handleWitch() { |
||||
if (this.index === 0) { |
||||
getUserInfo().then((res) => { |
||||
const user = res.data.data; |
||||
this.form = { |
||||
id: user.id, |
||||
avatar: user.avatar, |
||||
name: user.name, |
||||
realName: user.realName, |
||||
phone: user.phone, |
||||
email: user.email, |
||||
}; |
||||
this.$store.commit("SET_USER_INFO", { |
||||
avatar: user.avatar, |
||||
real_name: user.realName, |
||||
}); |
||||
} |
||||
}, |
||||
handleTabClick(tabs) { |
||||
this.index = func.toInt(tabs.index); |
||||
this.handleWitch(); |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
}, |
||||
handleTabClick(tabs) { |
||||
if (tabs.prop != "1") { |
||||
this.$refs.pwdForm.resetForm(); |
||||
} |
||||
this.index = func.toInt(tabs.prop); |
||||
this.handleWitch(); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style></style> |
||||
|
||||
Loading…
Reference in new issue