<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>
将图片选择器水平居中至页面中央
本文深入解析了Oracle数据库中数据块的结构组成及其关键操作，包括数据块大小、偏移量、类型标识、序列号、状态标志等元素的作用与意义。详细阐述了如何通过查询和修改这些属性来影响数据存储与检索过程，同时讨论了数据块损坏的检测与修复方法。文章旨在帮助数据库管理员和开发者更好地理解和操作Oracle数据库的数据存储机制。
扫一扫
1891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
