From 73b48dd59a2d47b365b87784371c4ef57dde659b Mon Sep 17 00:00:00 2001
From: Oliver <1070107765@qq.com>
Date: 星期四, 22 十二月 2022 11:17:47 +0800
Subject: [PATCH] 首页新增
---
src/views/layout/components/Header/updatePassword/index.vue | 251 +++++++++++++++++++++++++++----------------------
1 files changed, 137 insertions(+), 114 deletions(-)
diff --git a/src/views/layout/components/Header/updatePassword/index.vue b/src/views/layout/components/Header/updatePassword/index.vue
index 6a7d481..b75e94e 100644
--- a/src/views/layout/components/Header/updatePassword/index.vue
+++ b/src/views/layout/components/Header/updatePassword/index.vue
@@ -1,139 +1,162 @@
<template>
- <div class="createUser">
- <main>
- <div class="mainContent">
- <el-form ref="password" label-width="140px" :rules="passwordRules" autoComplete="on" :model="password"
- label-position="right">
- <el-form-item class="optionItem" label="褰撳墠瀵嗙爜:" prop="oldPassword">
- <el-input type="password" v-model="password.oldPassword" placeholder="璇峰～鍐欏綋鍓嶅瘑鐮�"></el-input>
- </el-form-item>
- <el-form-item class="optionItems" label="鏂板瘑鐮�:" prop="newPassword">
- <el-input type="password" v-model="password.newPassword" placeholder="璇峰～鍐欐柊瀵嗙爜"></el-input>
- </el-form-item>
- <el-form-item class="optionItems" label="纭畾鏂板瘑鐮�:" prop="confirmPassword">
- <el-input type="password" v-model="password.confirmPassword" placeholder="璇峰啀娆″～鍐欐柊瀵嗙爜"></el-input>
- </el-form-item>
- <el-form-item class="optionItems">
- <el-button type="primary" @click="onSubmit">鎻愪氦</el-button>
- </el-form-item>
- </el-form>
- </div>
- </main>
- </div>
+ <div class="createUser">
+ <main>
+ <div class="mainContent">
+ <el-form ref="password" label-width="120px" :rules="passwordRules" autoComplete="on" :model="password"
+ label-position="right">
+ <el-form-item class="optionItem" label="褰撳墠瀵嗙爜:" prop="oldPassword" show-password>
+ <el-input type="password" v-model="password.oldPassword" placeholder="璇峰～鍐欏綋鍓嶅瘑鐮�" show-password> </el-input>
+ </el-form-item>
+ <el-form-item class="optionItems" label="鏂板瘑鐮�:" prop="newPassword" show-password>
+ <el-input type="password" v-model="password.newPassword" placeholder="璇峰～鍐欐柊瀵嗙爜" show-password></el-input>
+ </el-form-item>
+ <el-form-item class="optionItems" label="纭畾鏂板瘑鐮�:" prop="confirmPassword" >
+ <el-input type="password" v-model="password.confirmPassword" placeholder="璇峰啀娆″～鍐欐柊瀵嗙爜" show-password></el-input>
+ </el-form-item>
+ <el-form-item class="optionItems">
+ <el-button type="primary" @click="onSubmit">鎻愪氦</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </main>
+ </div>
</template>
<script>
import users from "@/api/users";
export default {
- data() {
- return {
- updatePasswordParam:{
- newPassword:"",
- oldPassword:"",
- username:""
- },
- password: {
- oldPassword: null,
- newPassword: null,
- confirmPassword: null
- },
- passwordRules: {
- newPassword: [{ required: true, trigger: 'blur', message: '瀵嗙爜涓嶈兘涓虹┖' }],
- oldPassword: [{ required: true, trigger: 'blur', message: '鏂板瘑鐮佷笉鑳戒负绌�' }],
- confirmPassword: [{ required: true, trigger: 'blur', message: '鏂板瘑鐮佷笉鑳戒负绌�' }],
- },
- }
- },
- created() {
- },
- methods: {
- onSubmit() {
- this.$refs.password.validate(valid => {
- if (valid) {
- this.updatePasswordParam.oldPassword=this.password.oldPassword;
- this.updatePasswordParam.username=sessionStorage.getItem('name');
- this.updatePasswordParam.newPassword=this.password.newPassword;
- users.updatePassword(this.updatePasswordParam)
- .then(() => {
- this.$message.success('淇敼瀵嗙爜鎴愬姛, 鍗冲皢閲嶆柊鐧诲綍');
- this.logout();
- location.reload();
- })
- .catch(err => this.$message.error(err))
+ data() {
+ const validatePass = (rule, value, callback) => {
+ var rep =/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
+ if (!rep.test(value) ) {
+ callback(new Error("瀵嗙爜闀垮害8鍒�16浣嶄笖瀵嗙爜涓殑瀛楃蹇呴』鍖呭惈瀛楁瘝澶у啓鍜屽瓧姣嶅皬鍐欏拰蹇呴』鍖呭惈鏁板瓧锛屼笉鑳藉寘鍚┖鏍�"));
+ } else {
+ callback();
}
- })
+ };
+ return {
+ updatePasswordParam: {
+ newPassword: "",
+ oldPassword: "",
+ username: ""
},
- logout() {
- users.logout()
+ password: {
+ oldPassword: null,
+ newPassword: null,
+ confirmPassword: null
+ },
+ passwordRules: {
+ newPassword: [
+ { required: true, trigger: 'blur', message: '鏂板瘑鐮佷笉鑳戒负绌�' },
+ { validator: validatePass, trigger: 'blur' }
+ ],
+ oldPassword: [
+ { required: true, trigger: 'blur', message: '褰撳墠瀵嗙爜涓嶈兘涓虹┖' },
+ // { validator: validatePass, trigger: 'blur' }
+ ],
+ confirmPassword: [
+ { required: true, trigger: 'blur', message: '鏂板瘑鐮佷笉鑳戒负绌�' },
+ { validator: validatePass, trigger: 'blur' }
+ ],
+ }
+ }
+ },
+ created() {
+ },
+ methods: {
+ onSubmit() {
+ this.$refs.password.validate(valid => {
+ if (valid) {
+ this.updatePasswordParam.oldPassword = this.password.oldPassword;
+ this.updatePasswordParam.username = sessionStorage.getItem('name');
+ this.updatePasswordParam.newPassword = this.password.newPassword;
+ users.updatePassword(this.updatePasswordParam)
.then(() => {
- sessionStorage.clear();
+ this.$message.success('淇敼瀵嗙爜鎴愬姛, 鍗冲皢閲嶆柊鐧诲綍');
+ this.logout();
+ location.reload();
})
.catch(err => this.$message.error(err))
- }
- },
+ }
+ })
+ }
+ ,
+ logout() {
+ users.logout()
+ .then(() => {
+ sessionStorage.clear();
+ })
+ .catch(err => this.$message.error(err))
+ }
+ },
}
</script>
<style lang="scss" scoped>
.createUser {
- border-radius: 1px;
+ border-radius: 1px;
+ background-color: #09152f;
+
+ main {
+ text-align: left;
+ padding: 0 55px;
background-color: #09152f;
+ padding-bottom: 50px;
- main {
- text-align: left;
- padding: 0 55px;
- background-color: #09152f;
- padding-bottom: 50px;
+ .mainContent {
+ display: flex;
+ justify-content: center;
+ padding-top: 50px;
- .mainContent {
- display: flex;
- justify-content: center;
- padding-top: 50px;
+ .el-form-item__content {
+ width: 400px;
- .el-form-item__content {
- width: 400px;
-
- .el-select {
- width: 100%;
- }
- }
-
- .optionHandleSp {
- display: flex;
-
- .areaNumber,
- .moreNumber {
- flex: 1;
- }
-
- .telNumber {
- flex: 2;
- }
- }
-
- .optionBtn {
- display: flex;
- margin-top: 20px;
-
- .btn {
- padding: 12px 50px;
- }
- }
-
+ .el-select {
+ width: 100%;
}
- }
+ }
- &::v-deep .el-textarea__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
- }
+ .optionHandleSp {
+ display: flex;
- ::v-deep .el-form-item__label {
- color: #4b9bb7;
- }
+ .areaNumber,
+ .moreNumber {
+ flex: 1;
+ }
- ::v-deep .el-input__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
+ .telNumber {
+ flex: 2;
+ }
+ }
+
+ .optionBtn {
+ display: flex;
+ margin-top: 20px;
+
+ .btn {
+ padding: 12px 50px;
+ }
+ }
+
}
+ }
+
+ &::v-deep .el-textarea__inner {
+ background-color: #09152f;
+ border: 1px solid #17324c;
+ }
+
+ ::v-deep .el-form-item__label {
+ color: #4b9bb7;
+ }
+
+ ::v-deep .el-input__inner {
+ background-color: #09152f;
+ border: 1px solid #17324c;
+ }
+
+ ::v-deep .el-form-item__error {
+ position:unset;
}
-</style>
\ No newline at end of file
+
+}
+</style>
--
Gitblit v1.8.0