order-ui-pc/src/views/person-infor/change-password.vue

<template>
  <div class="change-password pagePadding">
    <div class="change">
      <div class="title">
        设置新登录密码
        <el-popover
          placement="top"
          title="初始密码："
          width="200"
          trigger="click"
          content="dingding123"
        >
          <i class="el-icon-info" slot="reference"></i>
        </el-popover>
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        autocomplete="on"
        label-position="right"
        label-width="100px"
      >
        <el-form-item prop="oldPassword" label="旧密码：">
          <el-input
            ref="oldPassword"
            v-model="loginForm.oldPassword"
            placeholder="旧密码"
            name="oldPassword"
            type="password"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码：">
          <el-input
            ref="newPassword"
            v-model="loginForm.newPassword"
            placeholder="新密码"
            name="newPassword"
            type="password"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>
        <el-form-item prop="confirmPassword" label="确认密码：">
          <el-input
            ref="confirmPassword"
            v-model="loginForm.confirmPassword"
            placeholder="确认密码"
            name="confirmPassword"
            type="password"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          round
          style="width: 98%; margin: 15px 0 0 5%"
          @click.native.prevent="handleLogin"
          >确认修改</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { isnumber, isAlphanumeric, validAlphabets } from "@/utils/validate";
import asyncRequest from "@/apis/service/user/index";
import resToken from "@/mixins/resToken";
export default {
  name: "Login",
  mixins:[resToken],
  data() {
    const validateOldPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("旧密码不能为空！"));
      } else {
        if (!isAlphanumeric(value)) {
          callback(new Error("旧密码为6-18位数字字母组合！"));
        } else if (value.length < 6 || value.length > 18) {
          callback(new Error("旧密码为6-18位数字字母组合！"));
        } else if (isnumber(value)) {
          callback(new Error("旧密码不能为纯数字！"));
        } else if (validAlphabets(value)) {
          callback(new Error("旧密码不能为纯字母！"));
        } else {
          callback();
        }
      }
    };
    const validateNewPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("新密码不能为空！"));
      } else {
        if (this.loginForm.oldPassword === value) {
          callback(new Error("新密码不能与旧密码一致！"));
        } else {
          if (!isAlphanumeric(value)) {
            callback(new Error("新密码为6-18位数字字母组合！"));
          } else if (value.length < 6 || value.length > 18) {
            callback(new Error("新密码为6-18位数字字母组合！"));
          } else if (isnumber(value)) {
            callback(new Error("新密码不能为纯数字！"));
          } else if (validAlphabets(value)) {
            callback(new Error("新密码不能为纯字母！"));
          } else {
            callback();
          }
        }
      }
    };
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("确认密码不能为空！"));
      } else {
        if (this.loginForm.newPassword !== value) {
          callback(new Error("确认密码与新密码不一致！"));
        } else {
          callback();
        }
      }
    };
    return {
      loginForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      loginRules: {
        oldPassword: [
          { required: true, trigger: "blur", validator: validateOldPassword },
        ],
        newPassword: [
          { required: true, trigger: "blur", validator: validateNewPassword },
        ],
        confirmPassword: [
          {
            required: true,
            trigger: "blur",
            validator: validateConfirmPassword,
          },
        ],
      },
      loading: false,
      otherQuery: {},
    };
  },

  methods: {
    async handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          if (!this.loading) {
            this.loading = true;
            const model = {
              oldpwd: this.loginForm.oldPassword,
              newpwd: this.loginForm.newPassword,
            };
            asyncRequest.setpwd(model).then(async (res) => {
              if (res && res.code === 0) {
                this.loading = false;
                this.$message.success(res.message);
                await this.logout();
              } else if (res && res.code >= 100 && res.code <= 104) {
                await this.logout();
              } else {
                this.$message.warning(res.message);
                this.loading = false;
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.change-password {
  background: rgba(242, 242, 242, 1);
  background: #f2f2f2;
  min-height: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  .change {
    padding: 0 18% 0 0;
    .title {
      border-width: 0px;
      width: 100%;
      height: 140px;
      display: flex;
      font-weight: 400;
      font-style: normal;
      font-size: 22px;
      text-align: left;
      padding: 0;
      padding: 60px 0 0 100px;
      width: 100%;
      box-sizing: border-box;
    }
  }
}
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

// $bg: #283443;
// $light_gray: #fff;
// $cursor: #fff;

// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
//   .change-password .el-input input {
//     color: $cursor;
//   }
// }

// /* reset element-ui css */
// .change-password {
//   .el-input {
//     display: inline-block;
//     height: 47px;
//     width: 260px;
//     // background: rgba(243, 244, 245, 1);
//     // border-radius: 24px;

//     input {
//       background: transparent;
//       border: 0px;
//       -webkit-appearance: none;
//       border-radius: 0px;
//       padding: 12px 5px 12px 15px;
//       color: $light_gray;
//       height: 47px;
//       caret-color: $cursor;
//       color: #000;

//       &:-webkit-autofill {
//         box-shadow: 0 0 0px 1000px $bg inset !important;
//         -webkit-text-fill-color: $cursor !important;
//       }
//     }
//   }

//   .el-form-item {
//     border: 1px solid rgba(255, 255, 255, 0.1);
//     // background: rgba(0, 0, 0, 0.1);
//     // border-radius: 5px;
//     color: #454545;
//   }
// }
</style>

<style lang="scss" scoped>
$bg: rgba(242, 242, 242, 1);
$dark_gray: #889aa4;
$light_gray: #eee;

.change-password {
  min-height: 100%;
  width: 100%;
  height: 100%;
  // background-color: $bg;
  overflow: hidden;
  position: absolute;
  z-index: 2;
  // background: #fff;

  .login-form {
    position: relative;
    width: 415px;
    max-width: 100%;
    height: 100%;
    padding: 50px 35px 150px 35px;
    margin: 0 auto;
    overflow: hidden;
    .el-form-item__label {
      height: 49px;
      line-height: 49px;
    }
  }

  // .tips {
  //   font-size: 14px;
  //   color: #fff;
  //   margin-bottom: 10px;

  //   span {
  //     &:first-of-type {
  //       margin-right: 16px;
  //     }
  //   }
  // }

  // .svg-container {
  //   padding: 6px 5px 6px 15px;
  //   color: $dark_gray;
  //   vertical-align: middle;
  //   width: 30px;
  //   display: inline-block;
  // }

  // .show-pwd {
  //   position: absolute;
  //   right: 10px;
  //   top: 7px;
  //   font-size: 16px;
  //   color: $dark_gray;
  //   cursor: pointer;
  //   user-select: none;
  // }

  // .thirdparty-button {
  //   position: absolute;
  //   right: 0;
  //   bottom: 6px;
  // }

  // @media only screen and (max-width: 470px) {
  //   .thirdparty-button {
  //     display: none;
  //   }
  // }
}
</style>