lilishop-ui/seller/src/views/change-password/change-password.vue

<template>
  <div>
    <Card class="change-pass">
      <p slot="title"><Icon type="key"></Icon>修改密码</p>
      <div>
        <Form
          ref="editPasswordForm"
          :model="editPasswordForm"
          :label-width="100"
          label-position="right"
          :rules="passwordValidate"
          style="width:450px"
        >
          <FormItem label="原密码" prop="oldPass">
            <Input type="password" v-model="editPasswordForm.oldPass" placeholder="请输入现在使用的密码"></Input>
          </FormItem>
          <FormItem label="新密码" prop="newPassword">
            <SetPassword style="width:350px;" v-model="editPasswordForm.newPassword" @on-change="changeInputPass" />
          </FormItem>
          <FormItem label="确认新密码" prop="rePass">
            <Input type="password" v-model="editPasswordForm.rePass" placeholder="请再次输入新密码"></Input>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              style="width: 100px;margin-right:5px"
              :loading="savePassLoading"
              @click="editPassword"
            >保存</Button>
            <Button @click="cancelEditPass">取消</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
import SetPassword from "@/views/my-components/lili/set-password";
import { changePass } from "@/api/index";
export default {
  name: "change_pass",
  components: {
    SetPassword
  },
  data() {
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.editPasswordForm.newPassword) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      savePassLoading: false, // 保存loading
      editPasswordForm: { // 修改密码表单 
        oldPass: "", // 旧密码
        newPassword: "", // 新密码
        rePass: "" // 从新输入新密码
      },
      strength: "", // 密码强度
      // 验证规则
      passwordValidate: {
        oldPass: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur"
          }
        ],
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur"
          },
          {
            min: 6,
            message: "请至少输入6个字符",
            trigger: "blur"
          },
          {
            max: 32,
            message: "最多输入32个字符",
            trigger: "blur"
          }
        ],
        rePass: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: "blur"
          },
          {
            validator: valideRePassword,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 新密码回调
    changeInputPass(v, grade, strength) {
      this.strength = strength;
    },
    // 修改密码
    editPassword() {
      let params = {
        password: this.md5(this.editPasswordForm.oldPass),
        newPassword: this.md5(this.editPasswordForm.newPassword)
      };
      this.$refs["editPasswordForm"].validate(valid => {
        if (valid) {
          this.savePassLoading = true;
          changePass(params).then(res => {
            this.savePassLoading = false;
            if (res.success) {
              this.$Modal.success({
                title: "修改密码成功",
                content: "修改密码成功，需重新登录",
                onOk: () => {
                  this.$store.commit("logout", this);
                  this.$store.commit("clearOpenedSubmenu");
                  this.$router.push({
                    name: "login"
                  });
                }
              });
            }
          });
        }
      });
    },
    // 取消修改密码
    cancelEditPass() {
      this.$store.commit("removeTag", "change_pass");
      localStorage.storeOpenedList = JSON.stringify(
        this.$store.state.app.storeOpenedList
      );
      let lastPageName = "";
      let length = this.$store.state.app.storeOpenedList.length;
      if (length > 1) {
        lastPageName = this.$store.state.app.storeOpenedList[length - 1].name;
      } else {
        lastPageName = this.$store.state.app.storeOpenedList[0].name;
      }
      this.$router.push({
        name: lastPageName
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.change-pass {
  &-btn-box {
    margin-bottom: 10px;

    button {
      padding-left: 0;

      span {
        color: #2d8cf0;
        transition: all 0.2s;
      }

      span:hover {
        color: #0c25f1;
        transition: all 0.2s;
      }
    }
  }
}
</style>