eta_front/src/views/resetpassword.vue

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <b><!-- 修改密码 -->{{ $t('MainPage.tab_reset_pwd') }}</b>
      </div>
      <el-form
        :model="addForm"
        :rules="rules"
        label-width="120px"
        ref="addForm"
        style="width: 500px"
      >
        <el-form-item :label="$t('ResetPwdPage.label_old_pwd')" prop="OldPwd">
          <el-input
            type="text"
            v-model="addForm.OldPwd"
            :placeholder="$t('ResetPwdPage.ph_pwd')"
            clearable
            autocomplete="new-password"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('ResetPwdPage.label_new_pwd')" prop="NewPwd" v-if="visible">
          <el-input
            type="password"
            v-model="addForm.NewPwd"
            :placeholder="$t('ResetPwdPage.ph_pwd')"
            maxlength="20"
            autocomplete="new-password"
          >
            <i
              slot="suffix"
              class="el-icon-view el-input__icon"
              @click="changePass('show')"
              style="cursor: pointer"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('ResetPwdPage.label_new_pwd')" prop="NewPwd" v-else>
          <el-input
            type="text"
            v-model="addForm.NewPwd"
            :placeholder="$t('ResetPwdPage.ph_pwd')"
            maxlength="20"
            autocomplete="new-password"
          >
            <i
              slot="suffix"
              class="el-icon-more el-input__icon"
              @click="changePass('hide')"
              style="cursor: pointer"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('ResetPwdPage.label_ensure_pwd')" prop="twoNewPwd" v-if="twovisible">
          <el-input
            type="password"
            v-model="addForm.twoNewPwd"
            :placeholder="$t('ResetPwdPage.ph_pwd')"
            maxlength="20"
          >
            <i
              slot="suffix"
              class="el-icon-view el-input__icon"
              @click="changetwoPass('show')"
              style="cursor: pointer"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('ResetPwdPage.label_ensure_pwd')" prop="twoNewPwd" v-else>
          <el-input
            type="text"
            v-model="addForm.twoNewPwd"
            :placeholder="$t('ResetPwdPage.ph_pwd')"
            maxlength="20"
          >
            <i
              slot="suffix"
              class="el-icon-more el-input__icon"
              @click="changetwoPass('hide')"
              style="cursor: pointer"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button type="primary" size="medium" @click.native="addSubmit"
            ><!-- 确定 -->{{ $t('Dialog.confirm_btn') }}</el-button
          >
          <el-button
            type="primary"
            size="medium"
            plain
            @click.native="historyBack"
            ><!-- 返回 -->{{ $t('Dialog.back_btn') }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { modifyPwd } from "@/api/api.js";
import http from "@/api/http.js";
import md5 from "@/utils/md5.js";
import{checkPassWord} from '@/utils/commonOptions';
export default {
  data() {
    return {
      visible: true,
      twovisible: true,
      addForm: {
        OldPwd: "",
        NewPwd: "",
        twoNewPwd: "",
      },
      rules: {
        OldPwd: [
          {
            required: true,
            message: /* "请输入原密码" */ this.$t('ResetPwdPage.vaild_old'),
            trigger: "blur",
          },
        ],
        NewPwd: [
            {
                validator:(rule,value,callback)=>{
                    if(!checkPassWord(value)){
                        callback(new Error(/* '密码要求8位及以上，包含数字、大写字母、小写字母、特殊字符中的三个类型' */this.$t('ResetPwdPage.vaild_rule')))
                    }else{
                        callback()
                    }
                }
            },
          {
            required: true,
            message: /* "请输入确认密码" */this.$t('ResetPwdPage.vaild_new'),
            trigger: "blur",
          },
        ],
        twoNewPwd: [
          {
            required: true,
            message: /* "请输入确认密码" */this.$t('ResetPwdPage.vaild_new'),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    changePass(value) {
      this.visible = !(value === "show");
    },
    changetwoPass(value) {
      this.twovisible = !(value === "show");
    },
    addSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let that = this;
          if (that.addForm.NewPwd != that.addForm.twoNewPwd) {
            that.$message.warning(/* "新密码两次输入不一致，请核对！"  */this.$t('ResetPwdPage.vaild_same'));
            return false;
          }
          modifyPwd({
            OldPwd: md5.hex_md5(that.addForm.OldPwd),
            NewPwd: md5.hex_md5(that.addForm.NewPwd),
          }).then((res) => {
            if (res.Ret == 200) {
              that.$message.success(/* "修改密码成功,请重新登录！" */ this.$t('ResetPwdPage.edit_pwd_msg'));
              setTimeout(function () {
                localStorage.setItem("auth", "");
                localStorage.setItem("userName", "");
                localStorage.setItem("Role", "");
                localStorage.setItem("RoleType", "");
                localStorage.setItem("AdminId", "");
                localStorage.setItem("AdminName", "");
                localStorage.setItem("RoleIdentity", "");
                localStorage.setItem("ManageType", "");
                localStorage.setItem("loginTime", "");
                that.$router.push({ path: "/login" });
              }, 1000);
            }
          });
        }
      });
    },
    historyBack() {
      //返回上一页
      history.back();
    },
  },
};
</script>

<style scoped lang="scss">
.box-card{
    .el-form-item{
        margin-bottom: 40px;
    }
}
</style>