<template>
<div>
<div style="text-align: center; background-color: azure;" >
<el-form ref="form" :model="form" label-width="80px">
<el-form-item>
<template>
<span>头</span> <span>像</span>
</template>
<div style="background-color: bisque; display: flex; text-align: center;" >
<el-upload
class="avatar-uploader"
action="http://192.168.1.17:8081/file/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
style="width: 200px;"
>
<img v-if="pic" :src="form.pic" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</el-form-item>
<el-form-item label="">
<template>
<span>昵</span> <span>称:</span>
</template>
<el-input v-model="form.nickName" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="">
手机号:
<el-input v-model="form.phoneCode" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="">
<template>
<span>余</span> <span>额:</span>
</template>
<el-input v-model="form.amout" style="width: 200px"></el-input>
</el-form-item>
</el-form>
</div>
<div>
<el-form
:model="passwordForm"
:rules="rules"
ref="passwordForm"
label-width="100px"
>
<el-form-item label="原密码" prop="oldPassword">
<el-input
type="password"
v-model="passwordForm.oldPassword"
placeholder="请输入原密码"
></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input
type="password"
v-model="passwordForm.newPassword"
placeholder="请输入新密码"
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input
type="password"
v-model="passwordForm.confirmPassword"
placeholder="请再次输入新密码"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('passwordForm')"
>确认修改</el-button
>
<el-button @click="resetForm('passwordForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { updatePwd } from "@/api/user";
export default {
data() {
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.passwordForm.confirmPassword !== "") {
this.$refs.passwordForm.validateField("confirmPassword");
}
callback();
}
};
const validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.passwordForm.newPassword) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
pic: "",
form: {
pic: "",
},
passwordForm: {
oldPassword: "",
newPassword: "",
confirmPassword: "",
},
updateFrom: {
oldPwd: "",
pwd: "",
id: "",
},
rules: {
oldPassword: [
{ required: true, message: "请输入原密码", trigger: "blur" },
],
newPassword: [
{ required: true, message: "请输入新密码", trigger: "blur" },
{ validator: validatePass, trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "请再次输入新密码", trigger: "blur" },
{ validator: validatePass2, trigger: "blur" },
],
},
};
},
methods: {
//回显
handleAvatarSuccess(res) {
this.pic = res.data.url;
this.form.pic = res.data.url;
},
//设置文件格式
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isLt2M;
},
submitForm() {
this.updateFrom.pwd = this.passwordForm.newPassword;
this.updateFrom.id = localStorage.getItem("userId");
this.updateFrom.oldPwd = this.passwordForm.oldPassword;
updatePwd(this.updateFrom).then((resp) => {
if (resp.data.code == 200) {
this.$message.success(resp.data.message);
this.$router.push("/user");
} else {
this.$message.error(resp.data.message);
this.resetForm();
}
});
},
resetForm() {
this.$refs.passwordForm.resetFields();
},
},
};
</script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
将图片选择器水平居中至页面中央
最新发布