vue2--忘记密码组件

效果图同vue3一样只是有些写法不同，我也记录一下

忘记密码组件代码

<template>
  <Dialog v-model="dialogVisible" title="忘记密码" width="500px">
    <div class="main">
      <div class="main-rule">至少8个字符，不能全是字母或数字</div>
      <el-form
        ref="loginForm"
        label-position="top"
        label-width="100px"
        :model="formdata"
      >
        <el-form-item
          label="登录账号"
          prop="userMobile"
          :rules="[
            { required: true, message: '账号不能为空', trigger: 'blur' },
            {
              pattern:
                /^(13[0-9]|14[5-9]|15[0-3,5-9]|166|17[0-8]|18[0-9]|19[1,8-9])\d{8}$/,
              message: '手机号格式不正确',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="formdata.userMobile" placeholder="请输入手机号" />
        </el-form-item>

        <el-form-item
          label="验证码"
          prop="code"
          :rules="[
            { required: true, message: '验证码不能为空', trigger: 'blur' },
          ]"
        >
          <div class="main-code">
            <el-input v-model="formdata.code" placeholder="请输入" />
            <el-button type="primary" :disabled="disabled" @click="getCode">
              {{ buttonText }}
            </el-button>
          </div>
          <div class="main-sms" v-if="formdata.userMobile.length === 11">
            将向{{ hideMiddleDigits(formdata.userMobile) }}发送短信验证码
          </div>
        </el-form-item>

        <el-form-item
          label="新密码"
          prop="newPassword"
          :rules="[
            { required: true, message: '不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$).{8,}$/,
              message: '格式错误',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="formdata.newPassword"
            placeholder="请输入新密码"
            show-password
          />
        </el-form-item>

        <el-form-item
          label="确认新密码"
          prop="confirmPassword"
          :rules="[
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$).{8,}$/,
              message: '格式错误',
              trigger: 'blur',
            },
            { required: true, validator: passWordCheck, trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="formdata.confirmPassword"
            placeholder="请再次输入新密码"
            show-password
          />
          <div class="main-notmatch" v-if="passwordsNotMatch">
          输入的密码不一致，请检查后重试
        </div>
        </el-form-item>

        
      </el-form>
    </div>
    <template #footer>
  <div class="footer-btn-container">
    <el-button type="primary" @click="suregologin" :loading="loginLoading">确认并登录</el-button>
  </div>
</template>
  </Dialog>
</template>

<script>
// 引入要申请的接口
import Dialog from '@/components/Dialog';

import sha256 from 'js-sha256';
export default {
  components: { Dialog },
  model: {
    prop: 'visible',
    event: 'change',
  },
  data() {
    return {
      formdata: {
        userMobile: '',
        password: '',
      },
      rules: {},
      show: false,
      buttonText: '获取验证码',
      disabled: false,
      remainingTime: 60,
      visible: false,
      dialogVisible: false,

      loginLoading: false,
    };
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    // 发送短信电话号码隐藏
    hideMiddleDigits(phoneNumber) {
      const trimmedPhoneNumber = phoneNumber.replace(/\D/g, ''); // 去除非数字字符
      if (trimmedPhoneNumber.length <= 7) {
        return trimmedPhoneNumber; // 如果长度不足，返回原始电话号码
      }
      const firstThreeDigits = trimmedPhoneNumber.slice(0, 3);
      const lastFourDigits = trimmedPhoneNumber.slice(-4);
      const middleDigits = '*'.repeat(trimmedPhoneNumber.length - 7);
      const formattedPhoneNumber =
        firstThreeDigits + middleDigits + lastFourDigits;
      return formattedPhoneNumber;
    },
    // 校验密码
    passWordCheck(rule, value, callback) {
      if (!value) {
        callback(new Error('不能为空'));
      } else if (value && value !== formdata.value.newPassword) {
        callback(new Error('两次输入不一致'));
      } else {
        callback();
      }
    },
    getCode() {
      console.log('获取验证码！');
      authcode({
        codeType: 0,
        reqType: 2,
        userMobile: formdata.value.userMobile,
      }).then(res => {
        console.log(res, '=====');
        this.disabled = true;
        this.countdown();
      });
    },
    suregologin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loginLoading = true;

          updPswAndLogin({
            account: formdata.value.userMobile,
            code: formdata.value.code,
            newPassword: sha256(formdata.value.newPassword),
            source: 0,
          })
            .then(res => {
              console.log(res, '=====');
              if (res.status === 1) {
                sessionStorage.setItem('token', res.token);
                const path = query && query.redirect ? query.redirect : '/';
                this.$router.replace(path);
              }
            })
            .finally(() => {
              this.loginLoading = false;
            });
        }
      });
    },
    countdown() {
      const timer = setInterval(() => {
        this.buttonText = `${this.remainingTime}s 后重新获取`;
        this.remainingTime--;

        if (this.remainingTime < 0) {
          clearInterval(timer);
          this.buttonText = '获取验证码';
          // this.request("authcode", { userMobile: this.formdata.userMobile }).then(
          //   (res) => {
          //     console.log(res, "验证码");
          //   }
          // );
          this.disabled = false;
          this.remainingTime = 60;
        }
      }, 1000);
    },
  },
  computed: {
    passwordsNotMatch() {
      return (
        this.formdata.confirmPassword &&
        this.formdata.newPassword !== this.formdata.confirmPassword
      );
    },
  },
  // watch: {
  // formdata: {
  //   handler(newValue) {
  //     console.log(newValue);
  //     if (this.formdata.newPassword && this.formdata.confirmPassword) {
  //       // 执行比对逻辑，例如显示提示信息
  //       console.log('Perform password comparison logic here');
  //     }
  //   },
  //   deep: true,
  // },
  // },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val;

        console.log(this.id, 123);
        if (this.id) {
          this.query();
        }
      },
      immediate: true,
    },
    dialogVisible(val) {
      console.log(val, 999);
      this.$emit('change', false);
    },
  },
  mounted() {
    console.log(this.visible, 'visible');
  },
};
</script>

<style lang="scss" scoped>
.main {
  max-width: 500px;

  &-rule {
    text-align: center;
  }

  &-code {
    display: flex;
    width: 440px;
  }

  &-sms {
    font-size: 12px;
    color: #999;

    span {
      margin-left: 20px;
      color: #135db3;
    }
  }

  &-notmatch {
    font-size: 12px;
    color: red;
  }
}
.footer-btn-container {
  display: flex;
  justify-content: end;
}
</style>

在登陆页面打开忘记密码弹窗

    <Forgetpwd v-model="forgetpswvisible" v-if="forgetpswvisible"></Forgetpwd>
 forgetpsw() {
      console.log('忘记密码');
      this.forgetpswvisible = true;
      console.log(this.forgetpswvisible);
    },