發(fā)送驗證碼及倒計時

發(fā)送驗證碼及倒計時

<template>
  <div class="forgot">
    <van-form @submit="onSubmit" ref="ruleForm" :show-error="false">
      <van-field
        v-model.trim="ruleForm.phone"
        clearable
        name="phone"
        label="手機號碼"
        placeholder="請輸入手機號碼"
        :rules="rules.phone"
      />
      <van-field
        v-model.trim="ruleForm.verificationCode"
        clearable
        name="verificationCode"
        label="驗證碼"
        placeholder="請輸入驗證碼"
        :rules="rules.verificationCode"
      >
        <template #button>
          <van-button
            round
            color="#FFBD3A"
            plain
            size="small"
            native-type="button"
            v-if="!isSendCode"
            @click="getCode"
            :loading="codeLoading"
            :disabled="codeDisabled"
            >{{ "獲取驗證碼" }}</van-button
          >
          <van-button
            size="small"
            type="default"
            native-type="button"
            :disabled="true"
            v-else
            >{{ "重發(fā)" }}{{ ` ${t} s` }}</van-button
          >
        </template>
      </van-field>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "Forgot",
  data() {
    return {
      username: "",
      password: "",
      isSendCode: false,
      t: 60,
      codeLoading: false,
      codeDisabled: false,
      ruleForm: {
        phone: "",
        verificationCode: "",
        newPassword: "",
        confirmPassword: "",
      },
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    getCode() {
      const name = "phone";
      this.$refs.ruleForm.validate(name).then(() => {
        console.log(1);
        this.sendCode();
      });
    },
    async sendCode() {
      //   try {
      //     let {
      //       verificationType,
      //       ruleForm: { phone, email, accountName, userName },
      //     } = this;
      //     accountName = this.accountName ? this.accountName : accountName;
      //     userName = this.userName ? this.userName : userName;
      //     this.codeLoading = true;
      //     this.codeDisabled = true;
      //     const { result } = await verifyContactApi({
      //       accountName,
      //       userName,
      //       verificationType,
      //       contact: verificationType === "PHONE" ? phone : email,
      //       language: this.language === "en-US" ? "ENGLISH" : "CHINESE",
      //     });
      //     if (result) {
      //       this.t = verificationType === "PHONE" ? 60 : 120;
      //       this.isSendCode = true;
      //       this.timer = window.setInterval(() => {
      //         if (this.t > 1) {
      //           this.t--;
      //         } else {
      //           window.clearInterval(this.timer);
      //           this.isSendCode = false;
      //         }
      //       }, 1000);
      //       this.codeLoading = false;
      //       this.codeDisabled = false;
      //     }
      //   } catch (error) {
      //     this.codeLoading = false;
      //     this.codeDisabled = false;
      //   }
      this.codeLoading = true;
      this.codeDisabled = true;
      this.t = 60;
      this.isSendCode = true;
      this.timer = window.setInterval(() => {
        if (this.t > 1) {
          this.t--;
        } else {
          window.clearInterval(this.timer);
          this.isSendCode = false;
        }
      }, 1000);
      this.codeLoading = false;
      this.codeDisabled = false;
    },
  },
};
</script>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子钧排,更是在濱河造成了極大的恐慌,老刑警劉巖匿级,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件顿乒,死亡現(xiàn)場離奇詭異削樊,居然都是意外死亡青团,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門组哩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來等龙,“玉大人,你說我怎么就攤上這事伶贰≈肱椋” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵黍衙,是天一觀的道長泥畅。 經常有香客問我,道長琅翻,這世上最難降的妖魔是什么位仁? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮望迎,結果婚禮上障癌,老公的妹妹穿的比我還像新娘。我一直安慰自己辩尊,他們只是感情好,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布康辑。 她就那樣靜靜地躺著摄欲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪疮薇。 梳的紋絲不亂的頭發(fā)上胸墙,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機與錄音按咒,去河邊找鬼迟隅。 笑死,一個胖子當著我的面吹牛励七,可吹牛的內容都是我干的智袭。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼掠抬,長吁一口氣:“原來是場噩夢啊……” “哼吼野!你這毒婦竟也來了?” 一聲冷哼從身側響起两波,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤瞳步,失蹤者是張志新(化名)和其女友劉穎闷哆,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體单起,經...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡抱怔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了嘀倒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屈留。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖括儒,靈堂內的尸體忽然破棺而出绕沈,到底是詐尸還是另有隱情,我是刑警寧澤帮寻,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布乍狐,位于F島的核電站,受9級特大地震影響固逗,放射性物質發(fā)生泄漏浅蚪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一烫罩、第九天 我趴在偏房一處隱蔽的房頂上張望惜傲。 院中可真熱鬧,春花似錦贝攒、人聲如沸盗誊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哈踱。三九已至,卻和暖如春梨熙,著一層夾襖步出監(jiān)牢的瞬間开镣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工咽扇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留邪财,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓质欲,卻偏偏與公主長得像树埠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子把敞,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內容