Как сделать кнопку повторить отправку смс?

Question

[Иван Беловиков]

Доброго времени суток!
У меня есть отправка смс и проверка пин-кода и надо сделать кнопку повтора 1 попытка, и использовать можно только каждые 60 сек.
Вот мой код, помогите с ним:

Auth.vue

<template>
  <f7-page no-toolbar no-navbar no-swipeback login-screen v-if="isSocketConnected">
    <f7-login-screen-title>Авторизация</f7-login-screen-title>
    <f7-list form v-if="!show">
      <f7-input
        label="Введите номер телефона"
        type="text"
        placeholder="Ваш номер"
        :value="phone"
        v-model="phone"
      ></f7-input>
    </f7-list>
    <f7-list form v-if="show">
      <f7-input
        label="Введите пин-код из смс"
        type="text"
        placeholder="Введите пин-код из смс"
        :value="pin"
        v-model="pin"
      ></f7-input>
    </f7-list>
    <f7-list>
      <f7-list-button @click="signIn" v-if="!show">Продолжить</f7-list-button>
      <f7-list-button @click="confirm" v-if="show">Подтвердить</f7-list-button>
      <f7-link @click="resend" v-if="show && chance > 0">Повторить {{ time > 0 ? `через ${time} секунд` : null }}</f7-link>
    </f7-list>
  </f7-page>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters([
       'isSocketConnected',
       'phone',
       'pin',
       'user'
     ])
    },
    data() {
      return {
        phone: '',
        pin: '',
        show: false,
        time: 60,
        chance: 1
      };
    },
    methods: {
      signIn () {
        if (this.isValid(this.phone) === false){
          this.$f7.alert('Некорректный номер телефона. Уберите лишние знаки, проверьте номер.', 'Tick')
        } else {
          // Парсим номер
          const phone = this.phone.replace(/\D/g, "") + ''
          // генерируем код
          const gpc = require('generate-pincode')
          let pin_code = gpc(4)
          // Сохраняем
          this.$store.state.phone = phone
          this.$store.state.pin = pin_code
          // Переключаем на режим подтверждения
          this.show = true
          // Отправка смс
          const msg = `Ваш пин-код: ${this.$store.state.pin}`
          this.sendMsg (this.$store.state.phone, msg)
          console.log(msg)
        }
      },
      confirm () {
        if (this.pin === this.$store.state.pin) {
          /* Сохранение или вход юзера */
          // Проверка есть ли юзер
          try {
            const user = Vue.$cookies.get('token') === undefined ? true : false
            //this.$store.state.user = user
          } catch (e) {
            this.$f7.alert(e, 'Ошибка')
          }
        } else {
          this.$f7.alert('Повторите попытку вводу.', 'Неправильный пин-код')
        }
      },
      resend () {
        if (this.time < 1) {
          const msg = `Ваш пин-код: ${this.$store.state.pin}`
          this.sendMsg (this.$store.state.phone, msg)
          this.chance--
        }
      },
      isValid (p) {
        const digits = p.replace(/\D/g, "")
        return digits.length === 11 ? true : false
        console.log(digits)
      },
      sendMsg (phone, msg) {
        const SMSru = require('sms_ru')
        const sms = new SMSru('***')
        sms.sms_send({
          to: this.$store.state.phone,
          text: msg
        }, function(e){
          console.log('send')
        })
      }
    },
  };
</script>

Comments

[Александр Маджугин]

Простите, вы храните код в vuex и проверяете его в js? Серьезно? А в чем тогда смысл всего этого?

[Иван Беловиков]

Александр Маджугин, я знаю, что можно прям там же проверять... но pin код всё время разный

Answer 1

[Владимир Мальцев]

var start =  null;
function timer(){
    
    if (start==null){
        
        start = Math.floor(Date.now() / 1000);
        timer();
    }else if(Math.floor(Date.now() / 1000) - start>59){
        alert('STOP');
    }else setTimeout('timer()',1000);
     
}
//run timer();

Answer 2

[Яким Корнев]

js в помощь, вывод кнопки по прошествию указанных секунд