zycp-demo/src/views/login/verification.vue

<template>
  <div class="content">
    <!-- 头部 -->
    <div :class="{ header: true, 'scroll white': isScrollTop, white: true }">
      <div class="back" @click="$router.go(-1)">
        <img src="../../assets/images/home/expert/back.png" alt="" />
      </div>
      <div class="header-title">手机验证码</div>
    </div>

    <div class="verification pull-content list-section">
      <div class="verification-txt">
        <p>输入验证码</p>
        <span>验证码已发送至 +86 {{ phoneData }}</span>
        <div class="result">
          <div class="security-code-wrap">
            <label for="code">
              <ul class="security-code-container">
                <li
                  class="field-wrap"
                  v-for="(item, index) in number"
                  :key="index"
                >
                  <i class="char-field">{{ value[index] || placeholder }}</i>
                </li>
              </ul>
            </label>
            <input
              ref="input"
              class="input-code"
              @keyup="handleInput($event)"
              v-model="value"
              id="code"
              name="code"
              type="tel"
              :maxlength="number"
              autocorrect="off"
              autocomplete="off"
              autocapitalize="off"
            />
          </div>
        </div>
        <span v-show="!show">{{ count }}秒后可重新获取验证码</span>
        <div v-show="show" @click="getCode()" class="getCode">获取验证码</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login-verification",
  props: {
    number: {
      type: Number,
      default: 6,
    },
    placeholder: {
      type: String,
      default: "-",
    },
  },
  data() {
    return {
      isScrollTop: false,
      phoneData: "", //手机号
      verification: "", //验证码
      value: "",
      show: false, //显示获取验证码
      count: "", //剩余时间
      timer: null,
    };
  },
  beforeCreate() {},
  created() {
    this.isScroll = true;
    window.addEventListener("scroll", this.eventScrollTop);
    this.phoneData = this.$route.query.number;
    const TIME_COUNT = 60;
    if (!this.timer) {
      this.count = TIME_COUNT;
      this.show = false;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    }
  },
  mounted() {},
  computed: {},
  methods: {
    hideKeyboard() {
      // 输入完成隐藏键盘
      var that = this;
      document.activeElement.blur(); // ios隐藏键盘
      this.$refs.input.blur(); // android隐藏键盘

      this.axios
        .post(this.HOME + "/api/user/login-by-Phone", {
          phone: this.$route.query.phone,
          sms_code: this.value,
        })
        .then(function (res) {
          localStorage.userData = JSON.stringify(res.data.data);
          if (res.data.code == 0) {
            that.$router.push({
              path: "/index", });
          } else {
            window.alert(res.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleSubmit() {
      this.$emit("input", this.value);
    },
    handleInput() {
      this.$refs.input.value = this.value;
      if (this.value.length >= this.number) {
        this.hideKeyboard();
      }
      this.handleSubmit();
    },
    // 倒计时60s
    getCode() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
         this.axios
          .post(this.HOME + "/api/common/send-sms-captcha", {
            phone: this.$route.query.phone,
            type: "login",
          })
          .then(function () {})
          .catch(function (error) {
            console.log(error);
          });
       
      }
    },
    // 滚动改变样式
    eventScrollTop() {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= 5) {
        if (this.isScroll) {
          this.isScroll = false;
          this.isScrollTop = true;
        }
      } else {
        if (!this.isScroll) {
          this.isScroll = true;
          this.isScrollTop = false;
        }
      }
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.eventScrollTop);
  },
  //keep-alive进入时触发
  activated() {
    this.isScroll = true;
    window.addEventListener("scroll", this.eventScrollTop);
  },
  //keep-alive离开时触发
  deactivated() {
    window.removeEventListener("scroll", this.eventScrollTop);
  },
};
</script>

<style scoped>
</style>