提交 634d5b5b 编写于 作者: cxt104926's avatar cxt104926

完善用户改密码

上级 11c8ae6b
......@@ -12,13 +12,13 @@
<el-input clearable v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 80%"></el-input>
</el-form-item>
<el-form-item prop="password" label="密 码:">
<el-input clearable v-model="addAndEditFormData.password" placeholder="请输入密码" show-password
style="width: 80%"></el-input>
<el-input clearable v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 80%">
</el-input>
</el-form-item>
<el-form-item prop="verification" label="验证码:">
<el-input clearable v-model="addAndEditFormData.verification" placeholder="请输入验证码"
style="width: 40%"></el-input>
<img id="img" @click="getVerification" :src="imgSrc" alt="验证码" title="点击更换验证码"/>
<el-input clearable v-model="addAndEditFormData.verification" placeholder="请输入验证码" style="width: 40%">
</el-input>
<img id="img" @click="getVerification" :src="imgSrc" alt="验证码" title="点击更换验证码" />
</el-form-item>
<el-checkbox class="rememberMe" v-model="rememberMe">记住我</el-checkbox>
<el-form-item>
......@@ -34,59 +34,64 @@
</template>
<script>
export default {
name: "login",
data() {
return {
addAndEditFormData: {
account: "",
password: "",
verification: ""
},
rememberMe: true,
imgSrc: "/getVerify?temp=" + new Date(),
message: "",
addAndEditRules: {
account: {
required: true, message: "账号不能为空", trigger: "blur"
},
password: {
required: true, message: "密码不能为空", trigger: "blur"
export default {
name: "login",
data() {
return {
addAndEditFormData: {
account: "",
password: "",
verification: ""
},
verification: {
required: true, message: "验证码不能为空", trigger: "blur"
rememberMe: true,
imgSrc: "/getVerify?temp=" + new Date(),
message: "",
addAndEditRules: {
account: {
required: true,
message: "账号不能为空",
trigger: "blur"
},
password: {
required: true,
message: "密码不能为空",
trigger: "blur"
},
verification: {
required: true,
message: "验证码不能为空",
trigger: "blur"
}
}
}
};
},
created() {
},
methods: {
getVerification() {
this.imgSrc = "/getVerify?temp=" + +new Date();
};
},
handleConfirmEvent() {
this.$refs.loginFrom.validate(valid => {
if (valid) {
let params = {
account: this.addAndEditFormData.account,
password: this.addAndEditFormData.password,
verification: this.addAndEditFormData.verification
};
this.api.postApi("/login", params).then(e => {
if (e.data.code === 200) {
localStorage.setItem("Authorization", e.data.data.authorization);
this.$store.commit("userInfo", e.data.data);
this.$router.push({
path: "/manager"
});
}
});
}
});
created() {},
methods: {
getVerification() {
this.imgSrc = "/getVerify?temp=" + +new Date();
},
handleConfirmEvent() {
this.$refs.loginFrom.validate(valid => {
if (valid) {
let params = {
account: this.addAndEditFormData.account,
password: this.addAndEditFormData.password,
verification: this.addAndEditFormData.verification
};
this.api.postApi("/login", params).then(e => {
if (e.data.code === 200) {
localStorage.setItem("Authorization", e.data.data.authorization);
this.$store.commit("userInfo", e.data.data);
this.$router.push({
path: "/manager"
});
}
});
}
});
}
}
}
};
};
</script>
<style scoped>
......@@ -118,7 +123,7 @@ body {
/*匀速移动*/
@keyframes animate {
0%, 100% {
0%,100% {
transform: translateY(-50px);
}
50% {
......
......@@ -184,26 +184,27 @@
editAvatarDialog: false,
previews: {},
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量(0.1-1)
full: true, // 输出原图比例截图 props名full
outputType: 'png', // 裁剪生成额图片的格式
canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框
autoCrop: true, // 是否默认生成截图框
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量(0.1-1)
full: true, // 输出原图比例截图 props名full
outputType: 'png', // 裁剪生成额图片的格式
canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 100,
autoCropHeight: 100,
fixedBox: true // 截图框固定大小
fixedBox: true // 截图框固定大小
},
}
},
created() {
// 初始化,加载用户信息和菜单
this.init();
},
methods: {
// 初始化,加载用户信息和菜单
init() {
let userInfo = this.$store.state.userInfo;
if (userInfo === null || userInfo.length === 0) {
......@@ -213,10 +214,10 @@
this.userInfo = userInfo;
// 获取菜单
let routes = this.$store.state.routes;
// 第一次
// 第一次进入时候是null,后面可能是空或者undefined
if (routes === null || routes.length === 0) {
let item = localStorage.getItem("routers");
if (item === undefined || item === null) {
if (item === null || item === undefined) {
this.api.getApi('/menu/get/treeMenu').then(res => {
if (res.data !== undefined) {
this.menu = res.data;
......@@ -260,14 +261,8 @@
// 提交修改的密码
submitPwd() {
let param = {
id: this.userInfo.id,
oldPwd: this.pwdFormData.oldPassword,
newPwd: this.pwdFormData.password
}
this.api.getApi("/updatePwd", param).then(e => {
console.log(e);
})
let url = "/updatePwd?id=" + this.userInfo.id + "&oldPwd=" + this.pwdFormData.oldPassword + "&newPwd=" + this.pwdFormData.password;
this.api.getApi(url);
},
// 关闭密码弹框
......@@ -352,10 +347,12 @@
})
}
},
// 实时预览函数
realTime(data) {
this.previews = data
},
// 下载图片
down(type) {
var aLink = document.createElement('a')
......@@ -372,6 +369,7 @@
})
}
},
// 更换头像--上传本地图片
uploadImg(file) {
var _this = this;
......@@ -399,7 +397,7 @@
}
.nameClass {
color: #133cce;
color: #1d2a2a;
float: right;
margin-top: 15px;
margin-left: 8px;
......
......@@ -7,11 +7,12 @@
<el-input v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 75%"></el-input>
</el-form-item>
<el-form-item prop="password" label="密 码:">
<el-input v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 75%"></el-input>
<el-input v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 75%">
</el-input>
</el-form-item>
<el-form-item prop="confirmPassword" label="确认密码:">
<el-input v-model="addAndEditFormData.confirmPassword" placeholder="请输入密码" show-password
style="width:75%"></el-input>
<el-input v-model="addAndEditFormData.confirmPassword" placeholder="请输入密码" show-password style="width:75%">
</el-input>
</el-form-item>
<el-form-item prop="name" label="用户名:">
<el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:75%"></el-input>
......@@ -20,13 +21,8 @@
<el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:75%"></el-input>
</el-form-item>
<el-form-item prop="classId" label=" 班 级:">
<el-cascader
@change="stuClassChange"
:change-on-select="true"
:props="defaultParams"
:options="classNames"
v-model="addAndEditFormData.classId"
:clearable="true" style="width:75%">
<el-cascader @change="stuClassChange" :change-on-select="true" :props="defaultParams" :options="classNames"
v-model="addAndEditFormData.classId" :clearable="true" style="width:75%">
</el-cascader>
</el-form-item>
<el-form-item class="registerBtu">
......@@ -43,135 +39,135 @@
</template>
<script>
export default {
name: "register",
data() {
let validateConfirmPassword = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
} else if (value !== this.addAndEditFormData.password) {
callback(new Error("两次密码输入不一致"));
} else {
callback();
}
};
return {
defaultParams: {
label: 'name',
value: 'id',
children: 'child'
},
classNames: [], // 班级数据
addAndEditFormData: {
name: "",
phone: "",
account: "",
password: "",
classId: "",
confirmPassword: "" // 确认密码
},
message: "",
addAndEditRules: {
account: {
required: true,
message: "账号不能为空",
trigger: "blur"
},
password: {
required: true,
message: "密码不能为空",
trigger: "blur"
export default {
name: "register",
data() {
let validateConfirmPassword = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
} else if (value !== this.addAndEditFormData.password) {
callback(new Error("两次密码输入不一致"));
} else {
callback();
}
};
return {
defaultParams: {
label: 'name',
value: 'id',
children: 'child'
},
name: {
required: true,
message: "用户名不能为空",
trigger: "blur"
classNames: [], // 班级数据
addAndEditFormData: {
name: "",
phone: "",
account: "",
password: "",
classId: "",
confirmPassword: "" // 确认密码
},
confirmPassword: {
required: true,
validator: validateConfirmPassword,
trigger: "blur"
message: "",
addAndEditRules: {
account: {
required: true,
message: "账号不能为空",
trigger: "blur"
},
password: {
required: true,
message: "密码不能为空",
trigger: "blur"
},
name: {
required: true,
message: "用户名不能为空",
trigger: "blur"
},
confirmPassword: {
required: true,
validator: validateConfirmPassword,
trigger: "blur"
},
phone: {
required: true,
message: "电话不能为空",
trigger: "blur"
}
},
phone: {
required: true,
message: "电话不能为空",
trigger: "blur"
}
},
};
},
created() {
// 去加载班级数据
this.api.getApi("/stu/class/get/treeData").then(e => {
this.classNames = e.data;
});
},
methods: {
handleConfirmEvent() {
this.$refs.registerForm.validate(valid => {
if (valid) {
this.api.postApi("/register", this.addAndEditFormData).then(e => {
if (e.data.code === 200) {
this.$router.push("/");
}
});
}
};
},
created() {
// 去加载班级数据
this.api.getApi("/stu/class/get/treeData").then(e => {
this.classNames = e.data;
});
},
methods: {
handleConfirmEvent() {
this.$refs.registerForm.validate(valid => {
if (valid) {
this.api.postApi("/register", this.addAndEditFormData).then(e => {
if (e.data.code === 200) {
this.$router.push("/");
}
});
}
});
},
// 监听班级选择
stuClassChange(value) {
this.addAndEditFormData.classId = value[value.length - 1];
// 监听班级选择
stuClassChange(value) {
this.addAndEditFormData.classId = value[value.length - 1];
}
}
}
};
};
</script>
<style scoped>
#register {
background-image: url("../../assets/img/1.jpg");
background-size: cover;
height: 100vh;
width: 100vw;
}
#register {
background-image: url("../../assets/img/1.jpg");
background-size: cover;
height: 100vh;
width: 100vw;
}
.registerDiv{
left: 50%;
top: 50%;
position: absolute;
width: 400px;
transform: translate(-50%, -50%);
}
.registerDiv {
left: 40%;
top: 20%;
position: absolute;
width: 400px;
}
.registerForm {
border-radius: 15px;
background-clip: padding-box;
padding: 15px 20px;
border: #133cce;
box-shadow: 0 0 25px #2cb6b6;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
text-align: right;
}
.registerForm {
border-radius: 15px;
background-clip: padding-box;
padding: 15px 20px;
color: black;
border: #133cce;
box-shadow: 0 0 25px #2cb6b6;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
text-align: right;
}
.registerBtu{
margin-right: 25%;
}
.registerBtu {
margin-right: 25%;
}
.registerTitle {
margin: 0 auto 15px auto;
text-align: center;
color: #3c8dbc;
}
.registerTitle {
margin: 0 auto 15px auto;
text-align: center;
color: #3c8dbc;
}
.navigate {
text-align: right;
color: #8b8989;
font-size: small;
margin-top: -10px;
}
.navigate {
text-align: right;
color: #8b8989;
font-size: small;
margin-top: -10px;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册