首页新增

Oliver

2022-12-22 73b48dd59a2d47b365b87784371c4ef57dde659b

 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>

}
</style>