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-group>
          <el-button type="primary" @click="submitForm('password_form')">提交</el-button>
          <el-button type="warning"  @click="resetForm('password_form')">重置</el-button>
        </el-button-group>
      </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: this.$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-z0-9\x20-\x7f]{6,16}$/,
              message: "密码至少6位，至多16位",
              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-z0-9\x20-\x7f]{6,16}$/,
              message: "密码至少6位,至多16位",
              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>