Vue(60s倒計時獲取驗證碼)

（手機號+短信驗證碼）

 

<template>
  <div class="taofuli-cash" v-if="showCash">
    <img class="cash-bg" :src="bgLogin" />
    <div class="cash-con">
      <div class="cash-title">提現身份驗證</div>
      <div class="cash-desc">
        <form action="">
          <input
            type="text"
            class="cash-name"
            @blur="onCheckName"
            placeholder="請輸入您的手機號"
            v-model="form.name"
          />
          <div class="cash-box">
            <input
              type="text"
              class="cash-code"
              @blur="onCheckCode"
              placeholder="請輸入驗證碼"
              v-model="form.code"
            />
            <input
              :class="[showGetCode ? 'cash-got' : 'cash-get']"
              @click="onGetCode"
              :disabled="showGetCode"
              type="button"
              :value="codeText"
            />
          </div>
          <div class="cash-error">{{ errMsg }}</div>
          <input
            @click="onSubmit"
            class="cash-submit"
            type="button"
            value="確定"
          />
        </form>
      </div>
    </div>
    <img
      :src="closeIcon"
      alt=""
      @click="closeCash"
      class="lucky-close cash-close"
    />
  </div>
</template>
<script>
import bgLogin from "@/assets/images/10.png";
import closeIcon from "@/assets/images/8.png";
import { verifyName, verifyCode } from "@/libs/tools.js";
export default {
  name: "withdraw-cash",
  props: {
    showCash: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      handleCash: this.showCash,
      bgLogin, // 提現身份驗證
      closeIcon, // 關閉按鈕
      errMsg: "", // 錯誤提示信息
      showGetCode: false, // 獲取驗證碼
      codeText: "獲取驗證碼", // 獲取驗證碼文字
      countdown: 60, // 60秒
      form: {
        name: "15252140315",
        code: 99
      }
    };
  },
  created() {},
  methods: {
    closeCash() {
      this.$emit("on-cash-close", this.showCash);
    },
    onCheckName() {
      if (!verifyName(this.form.name)) this.errMsg = "請輸入正確的手機號";
      else this.errMsg = "";
    },
    onCheckCode() {
      if (!verifyCode(this.form.code)) this.errMsg = "請輸入正確的驗證碼";
      else this.errMsg = "";
    },
    onSubmit() {
      if (verifyName(this.form.name) && verifyCode(this.form.code)) {
        // 提交
        console.log(123);
      } else {
        if (!verifyName(this.form.name)) this.errMsg = "請輸入正確的手機號";
        if (!verifyCode(this.form.code)) this.errMsg = "請輸入正確的驗證碼";
      }
    },
    // 倒計時
    setTimeDown() {
      if (this.countdown == 0) {
        this.showGetCode = false;
        this.countdown = 60;
        this.codeText = "獲取驗證碼";
        return;
      } else {
        this.showGetCode = true;
        this.codeText = this.countdown + "s";
        this.countdown--;
      }
      setTimeout(() => {
        this.setTimeDown();
      }, 1000);
    },
    // 獲取驗證碼
    onGetCode() {
      this.setTimeDown();
    }
  }
};
</script>

// common.less

@btn-color: #ff4b59;
@border-color: #b53df9;
@txt-color3: #333;
@txt-color9: #999;
@txt-red: #ff0000;
@rule-bg: #ff4c5a;
@cash-input-bg: #f1f1f1;
@count-bg: #ffdf6f;
@lucky-bg: #7816ff;
@white: #fff;
@white50: rgba(255,255,255, 0.5);
@black-50: rgba(0, 0, 0, 0.5);
@black-27: rgba(0, 0, 0, 0.27);
@zero: 0;
@line-clamp: 2;
@size-03: 0.03rem;
@size-05: 0.05rem;
@size-10: 0.10rem;
@size-14: 0.14rem;
@size-16: 0.16rem;
@size-20: 0.20rem;
@size-24: 0.24rem;
@size-26: 0.26rem;
@size-28: 0.28rem;
@size-30: 0.30rem;
@size-32: 0.32rem;
@size-36: 0.36rem;
@size-50: 0.50rem;
@size-57: 0.57rem;
@size-58: 0.58rem;
@size-140: 1.4rem;
@size-156: @size-140 + @size-16;
@size-117: @size-57 + @size-30*2;
@size-127: @size-57 + @size-30*2 + @size-20/2;
@size-122: (@size-127) - (@size-05);
@size-401: 4.01rem;
@size-412: (@size-50*10+@size-58+@size-10)-(@size-156);
@size-470: @size-20*20+@size-50+@size-20;
.tx-center {
  text-align: center;
}
.whp100 {
  width: 100%;
  height: 100%;
}
.wp100 {
  width: 100%;
}
.hp100 {
  height: 100%;
}
.tfl-ofhide {
  overflow: hidden;
}
.tfl-block {
  display: block;
}
.tfl-inblock {
  display: inline-block;
}
.abscenter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.absX {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.absY {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
html, body {
  .whp100;
  max-width: 750px;
  margin: auto;
  font-size: 100px;
  background-color: @lucky-bg;
}

/** 提現驗證身份 */
.taofuli-cash {
  .cash-bg,
  .cash-con {
    width: 79%;
    .tfl-block;
    .abscenter;
  }
  .cash-con {
    height: @size-50*10+@size-58+@size-10;
    .tfl-ofhide;
    .cash-title {
      height: @size-156;
      line-height: @size-156;
      text-align: center;
      font-size: @size-50;
      color: @white;
    }
    .cash-desc {
      height: @size-412;
      padding-top: @size-32;
      input,
      div.cash-box {
        .tfl-block;
        margin: auto;
        width: 81%;
        height: @size-20*4;
        border-radius: @size-20*2/10;
      }
      input.cash-name,
      div.cash-box {
        font-size: @zero;
      }
      input.cash-name {
        margin-bottom: (@size-24+@size-03);
      }
      div.cash-box input {
        .tfl-inblock;
      }
      input.cash-name,
      div.cash-box input {
        padding: 0 @size-50/2;
        font-size: @size-24;
        background-color: @cash-input-bg;
      }
      input.cash-code {
        width: 60%;
        margin-right: 3%;
      }
      div.cash-box input.cash-get,
      div.cash-box input.cash-got {
        width: 37%;
      }
      div.cash-box input.cash-get,
      input.cash-submit {
        background-image: linear-gradient(90deg,#7682ff 0%,#8c56ff 100%), linear-gradient(#816cff, #816cff);
	      background-blend-mode: normal,normal;
        color: @white;
      }
      div.cash-box input.cash-got {
        color: @txt-color9;
        background: @cash-input-bg;
      }
      input.cash-submit {
        margin: (@size-50)-(@size-05) auto 0;
        font-size: @size-30;
      }
      .cash-error {
        width: 81%;
        height: 0.18rem;
        margin: @size-20/2 auto 0;
        color: @txt-red;
        font-size: @size-20;
      }
    }
  }
}
.cash-close {
  bottom: @size-30*10+@size-05+@size-03;
}

// tools.js

export const verifyName = val => {
  let reg = /^1[3456789]\d{9}$/;
  if (!reg.test(val)) return false;
  else return true;
};
export const verifyCode = val => {
  let reg = /^\d{4}$/;
  if (!reg.test(val)) return false;
  else return true;
};