user.vue

<template>
  <el-card class="box-card" id="user" shadow="hover" style="width:30%;margin:auto">
    <div slot="header" style="text-align:center" class="clearfix">
      <span style="font-size:24px;color:#eff0dc">修改密码</span>
    </div>

    <el-form ref="password_form" :model="password_form" :rules="password_form_rules" label-width="60px" label-position="top">
      <el-form-item prop="odd_password">
        <el-input :type="odd_password_type" v-model="password_form.odd_password" auto-complete="off">
          <template slot="prepend">原密码</template>
          <el-button class="append_button" slot="append" :icon="odd_password_view" @click="show_odd_password"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item prop="new_password">
        <el-input :type="new_password_type" v-model="password_form.new_password" auto-complete="off">
          <template slot="prepend">新密码</template>
          <el-button class="append_button" slot="append" :icon="new_password_view" @click="show_new_password"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item prop="check_password">
        <el-input :type="new_password_type" v-model="password_form.check_password" auto-complete="off">
          <template slot="prepend">新密码</template>
          <el-button class="append_button" slot="append" :icon="new_password_view" @click="show_new_password"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('password_form')">提交</el-button>
        <el-button @click="resetForm('password_form')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      new_password_type: "password",
      odd_password_type: "password",
      new_password_view: "icon i-password-not-view",
      odd_password_view: "icon i-password-not-view",
      rtoken: "",
      user_unid: "",
      auth_base_url: disparch_data.auth_base_url,
      password_form: {
        odd_password: "",
        new_password: "",
        check_password: ""
      },
      password_form_rules: {
        odd_password: {
          required: true,
          message: "请填写旧密码",
          trigger: "blur"
        },
        new_password: [
          {
            pattern: /^[A-Za-z\d]{6,}$/,
            message: "密码至少6位",
            trigger: "blur"
          },
          {
            required: true,
            message: "必须填写新密码",
            trigger: "blur"
          },
          {
            validator: (rule, value, callback) => {
              if (value == this.password_form.odd_password) {
                callback(new Error("新密码不能和旧密码相同"));
              } else callback();
            },
            trigger: "blur"
          }
        ],
        check_password: [
          {
            pattern: /^[A-Za-z\d]{6,}$/,
            message: "密码至少6位",
            trigger: "blur"
          },
          {
            required: true,
            message: "必须填写新密码",
            trigger: "blur"
          },
          {
            validator: (rule, value, callback) => {
              if (value != this.password_form.new_password) {
                callback(new Error("两次输入不一致"));
              } else callback();
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    show_odd_password() {
      if (this.odd_password_type == "password") {
        this.odd_password_type = "text";
        this.odd_password_view = "icon i-password-view";
      } else {
        this.odd_password_type = "password";
        this.odd_password_view = "icon i-password-not-view";
      }
    },
    show_new_password() {
      if (this.new_password_type == "password") {
        this.new_password_type = "text";
        this.new_password_view = "icon i-password-view";
      } else {
        this.new_password_type = "password";
        this.new_password_view = "icon i-password-not-view";
      }
    },
    submitForm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$Axios({
            method: "post",
            url: this.auth_base_url + "users/" + this.user_unid + "/password",
            headers: { authorization: this.rtoken },
            data: {
              old_pwd: this.password_form.odd_password,
              new_pwd: this.password_form.new_password
            }
          })
            .then(response => {
              if (response.data.user_unid) {
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
                this.resetForm("password_form");
              }
            })
            .catch(err => {
              this.$message.error("修改失败");
              this.resetForm("password_form");
            });
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    }
  },
  created() {
    if (!sessionStorage.getItem("user_unid")) {
      this.$router.push("/");
    } else {
      this.rtoken = sessionStorage.getItem("rtoken");
      this.user_unid = sessionStorage.getItem("user_unid");
    }
  }
};
</script>


<style scoped>
#user >>> label {
  color: black;
}
#user >>> .el-card__body {
  background: lightgray;
}
#user >>> input {
  border-color: black;
  color: black;
}
#user >>> .el-card__header {
  background-color: #34352c;
}
#user >>> .el-input-group__prepend {
  border-color: black;
  color: black;
  background-color: lightgray;
}
#user >>> .el-input-group__append {
  color: black;
  border-color: black;
  background-color: lightgray;
}
</style>