JHAndroid/src/views/Forget/Forget.vue

<template>
  <div class="inner_box">
    <div class="forget">
      <!-- 标题 -->
      <div class="title">
        忘记密码
        <Back />
      </div>
      <!-- 手机号 -->
      <div class="tel_input_box">
        <i class="red">*</i>
        <input
          class="tel_input"
          type="tel"
          maxlength="11"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          v-model="phoneNumber"
        />
      </div>
      <!-- 验证码 -->
      <div class="captcha_box">
        <i class="red">*</i>
        <div
          class="bind_send"
          :class="{ gray: canVerif }"
          @click="sendPhoneNumber"
        >
          {{ verifText }}
        </div>
        <input
          class="captcha_input"
          placeholder="请输入验证码"
          v-model="captcha"
          maxlength="4"
        />
      </div>
      <!-- 密码 -->
      <div class="reg_password">
        <i class="red">*</i>
        <input
          class="reg_input_password"
          type="password"
          placeholder="请输入密码"
          password="true"
          maxlength="20"
          oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
          v-model="password"
        />
      </div>
      <!--    确认密码 -->
      <div class="reg_password2">
        <i class="red">*</i>
        <input
          class="reg_input_password2"
          type="password"
          placeholder="请再次输入密码"
          password="true"
          maxlength="20"
          oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
          v-model="passwordAgin"
        />
      </div>
      <!-- 重置密码 -->
      <div v-if="canForget" class="reset_pwd" @click="resetPwd">重置密码</div>
      <div v-else class="reset_pwd gray">重置中</div>
      <!-- 其他 -->
      <div class="other" @click="onLogin">返回登录</div>
    </div>
  </div>
</template>

<script>
import Back from "@/components/Inner/Back"; // 返回
export default {
  name: "Forget",
  components: {
    Back,
  },
  inject: ["checkCode", "routeLink"],
  data() {
    return {
      phoneNumber: "", // 手机号
      captcha: "", // 验证码
      password: "", // 密码
      passwordAgin: "", // 确认密码
      verifText: "获取验证码", // 获取验证码按钮文本
      canVerif: false, // 获取验证码按钮是否可以点击
      countDownTimer: null, // 验证码倒计时
      canSms: true, // 是否可以请求验证码接口
      canForget: true, // 是否可以请求忘记密码
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 获取验证码
    sendPhoneNumber() {
      if (!this.canSms) {
        return;
      }
      const { phoneNumber } = this;
      // 1. 验证手机号格式
      this.canVerif = this.$utils.checkVerification(phoneNumber);
      if (!this.canVerif) {
        this.$toast.text("手机号格式不正确");
        return;
      }

      // 3. 请求接口 发送验证码
      this.$api
        .sendSms({
          mobile: phoneNumber,
          reason: "forgetPwd",
        })
        .then((res) => {
          this.checkCode(res);
          const { code, data } = res.data;
          // 错误
          if (code) {
            this.canVerif = false;
            return;
          }
          // 2. 验证码倒计时
          this.countDown();
        });
    },

    // 倒计时
    countDown() {
      this.canSms = false;
      let count = 60;
      this.verifText = count + "s";
      this.countDownTimer = setInterval(() => {
        count--;
        this.verifText = count + "s";
        // 倒计时结束
        if (count === 0) {
          this.canVerif = false;
          this.verifText = "获取验证码";
          this.canSms = true;
          clearInterval(this.countDownTimer);
        }
      }, 1000);
    },

    // 重置密码
    resetPwd() {
      const { phoneNumber, captcha, password, passwordAgin } = this;
      // 1. 验证手机号格式
      const telCheck = this.$utils.checkVerification(phoneNumber);
      if (!telCheck) {
        this.$toast.text("手机号格式不准确");
        return;
      }
      // 2. 验证验证码是否为空
      if (!captcha) {
        this.$toast.text("验证码不能为空");
        return;
      }
      // 3. 验证密码
      if (!password) {
        this.$toast.text("密码不能为空");
        return;
      }
      if (password !== passwordAgin) {
        this.$toast.text("两次密码不一致");
        return;
      }

      // 4. 重置密码
      if (!this.canForget) {
        return;
      }
      this.canForget = false;

      this.$api
        .forgetPwd({
          mobile: phoneNumber,
          smsCode: captcha,
          password,
        })
        .then((res) => {
          this.checkCode(res);
          this.canForget = true;
          const { code } = res.data;
          // 错误
          if (code) {
            return;
          }
          // 成功
          this.onLogin();
          this.$toast.text("重置密码成功");
        });
    },

    // 返回登录
    onLogin() {
      this.routeLink("Login");
    },
  },
};
</script>

<style lang='less' scoped>
.forget {
  width: 700 / @rem;
  height: 660 / @rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -330 / @rem;
  margin-left: -350 / @rem;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;

  .red {
    line-height: 70 / @rem;
    color: #e43633;
    float: left;
  }

  .title {
    height: 100 / @rem;
    line-height: 100 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 36 / @rem;
  }
  .tel_input_box,
  .captcha_box,
  .reg_password,
  .reg_password2,
  .reset_pwd,
  .other {
    padding: 0 20 / @rem;
    box-sizing: border-box;
  }

  .tel_input_box,
  .captcha_box {
    width: 100%;
    height: 70 / @rem;
    position: relative;
    margin-top: 20 / @rem;
  }

  .tel_input_box {
    margin-top: 20 / @rem;
  }

  .tel_input,
  .captcha_input {
    width: 94.5%;
    height: 75 / @rem;
    padding-left: 20 / @rem;
    float: right;
    font-size: 32 / @rem;
    border: 1 / @rem solid #d6d6d6;
    box-sizing: border-box;
  }
  .captcha_input {
    width: 60%;
  }
  .bind_send {
    width: 30%;
    height: 75 / @rem;
    line-height: 70 / @rem;
    margin-left: 30 / @rem;
    float: right;
    color: #ffffff;
    font-size: 32 / @rem;
    border-radius: 10 / @rem;
    background-color: #3faeed;
  }

  .gray {
    background-color: #888;
  }
  .reg_password,
  .reg_password2 {
    width: 100%;
    height: 70 / @rem;
    margin-top: 20 / @rem;
    position: relative;
  }
  .reg_input_password {
    width: 94.5%;
    height: 70 / @rem;
    padding-left: 20 / @rem;
    font-size: 32 / @rem;
    float: right;
    box-sizing: border-box;
    border: 1 / @rem solid #d6d6d6;
  }
  .reg_input_password2 {
    width: 94.5%;
    height: 70 / @rem;
    padding-left: 20 / @rem;
    font-size: 32 / @rem;
    float: right;
    box-sizing: border-box;
    border: 1 / @rem solid #d6d6d6;
    outline: none;
  }
  .reset_pwd {
    width: 80%;
    height: 90 / @rem;
    line-height: 90 / @rem;
    margin: 20 / @rem auto 0;
    border-radius: 15 / @rem;
    background-color: #3faeed;
    color: #ffffff;
    box-sizing: border-box;
    font-size: 32 / @rem;
  }
  .other {
    margin-top: 20 / @rem;
    float: left;
    color: #3faeed;
    font-size: 28 / @rem;
  }
}
// 横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .forget {
    width: 350 / @rem;
    height: 300 / @rem;
    margin-top: -150 / @rem;
    margin-left: -175 / @rem;

    .title {
      height: 40 / @rem;
      line-height: 40 / @rem;
      font-size: 18 / @rem;
    }
    .tel_input_box,
    .captcha_box,
    .reg_password,
    .reg_password2,
    .reset_pwd,
    .other {
      padding: 0 10 / @rem;
    }

    .tel_input_box,
    .captcha_box {
      height: 40 / @rem;
      margin-top: 5 / @rem;
    }

    .red {
      line-height: 40 / @rem;
    }

    .tel_input_box {
      margin-top: 5 / @rem;
    }

    .tel_input,
    .captcha_input {
      height: 35 / @rem;
      padding-left: 10 / @rem;
      font-size: 16 / @rem;
    }

    .captcha_input {
      width: 55.5%;
    }

    .bind_send {
      height: 35 / @rem;
      line-height: 35 / @rem;
      font-size: 16 / @rem;
      border-radius: 5 / @rem;
    }

    .reg_password,
    .reg_password2 {
      height: 35 / @rem;
      margin-top: 5 / @rem;
    }
    .reg_input_password {
      height: 35 / @rem;
      padding-left: 10 / @rem;
      font-size: 16 / @rem;
    }
    .reg_input_password2 {
      height: 35 / @rem;
      margin-top: 5 / @rem;
      padding-left: 10 / @rem;
      font-size: 16 / @rem;
    }
    .reset_pwd {
      height: 40 / @rem;
      line-height: 40 / @rem;
      margin: 15 / @rem auto 0;
      border-radius: 7 / @rem;
      font-size: 16 / @rem;
    }
    .other {
      margin-top: 8 / @rem;
      font-size: 14 / @rem;
    }
  }
}
</style>