changePwd.vue

<template>
  <div class="change-pwd-wrapper height100">
    <div class="page-form-box">
      <div class="page-form-box-header">修改密码</div>
      <div class="page-form-box-content">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="80px"
          label-position="top"
          class="party-form"
        >
          <el-form-item label="当前账号">
            <span>{{ userName }}</span>
          </el-form-item>
          <el-form-item label="请输入当前密码" prop="oldPassWord">
            <el-input
              v-model="form.oldPassWord"
              placeholder="请输入当前密码"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="请输入新密码" prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入新密码"
              type="password"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="请再次输入新密码" prop="checkPass">
            <el-input
              v-model="form.checkPass"
              placeholder="请再次输入新密码"
              type="password"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-form-box-footer">
        <div class="btn-group">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { loginOut } from "@/config/loginOut.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userName: localStorage.getItem("user"),
      form: {
        oldPassWord: "",
        password: "",
        checkPass: "",
      },
      rules: {
        oldPassWord: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    handleCancel() {
      this.form = {
        oldPassWord: "",
        password: "",
        checkPass: "",
      };
      this.$router.go(-1)
    },
    handleSubmit() {
      let _this = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          let requestParams = {};
          requestParams.oldPassWord = _this.form.oldPassWord;
          requestParams.password = _this.form.password;
          _this
            .$https(
              {
                method: "put",
                url: "tUser/editPwd",
                authType: this.backToken,
              },
              _this.$qs.stringify(requestParams)
            )
            .then((res) => {
              if (res.status != 200) {
                _this.$message.error(res.data.message);
              } else {
                if (res.data.resultCode == 200) {
                  this.$message({
                    type: "success",
                    message: res.data.message,
                  });
                  _this.redirectLogin();
                } else {
                  _this.$message.error(res.data.message);
                }
              }
            })
            .catch((error) => {
              _this.$message.error(error.data.message);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    redirectLogin() {
      loginOut();
      this.$router.push("./login");
    },
  },
};
</script>
<style lang="less" scoped>
.change-pwd-wrapper {
  .party-form {
    width: 300px;
    margin: 0 auto;
  }
}
</style>