0

С бэка на laravel приходит поле даты последнего созданного юзером сообщения - created_at. Приходит в vue в виде

2020-01-19 17:54:40

я засовываю его в new Date и получаю дату последнего поста вида

Sun Jan 19 2020 23:57:41 GMT+0300 (Москва, стандартное время)

Вообщем -

let lastMessage = new Date(this.$store.getters.messageLastDate);

let nextMessage = new Date(lastMessage.setMinutes(lastMessage.getMinutes() + 10));

Как видно, я получил дату последнего сообщения и дату, когда откроется добавление следующего - через 10 минут.

Я не понимаю, как мне сделать реактивный счетчик,который бы отсчитывал время до открытия возможности отправки нового поста

1 ответ 1

1

Можно сделать так:

  let lastMessage = new Date('2020-01-19 17:54:40'); // Вашу дату не стал трогать в параметре.
    let insec1 = lastMessage / 1000; // Переводим дату в секунды
    let nextMessage = new Date(lastMessage.setMinutes(lastMessage.getMinutes() + 10)); 
    let insec2 = nextMessage / 1000; // переводим дату следующего сообщения в секунды.
    diffsec = insec2 - insec1; // Ищем разницу секунд
    new Vue({
        el: '#app',
        data: {
            currentTime: diffsec, // Вставляем количество секунд
            time: "", // Задаём переменную time, где будет отображаться с минутами, а не только в секундах.
            timer: null,
        },
        mounted() {
            this.startTimer()
        },
        destroyed() {
            this.stopTimer()
        },
        methods: {
            startTimer() {
                this.timer = setInterval(() => {
                    this.currentTime--;
                    sec = this.currentTime;
                    var h = sec/3600 ^ 0 ;
                    var m = (sec-h*3600)/60 ^ 0 ;
                    var s = sec-h*3600-m*60 ;
                    this.time = (m<10?"0"+m:m)+" мин. "+(s<10?"0"+s:s)+" сек."; // Выводим дату в формате. Можно и часы добавить

                }, 1000)
            },
            stopTimer() {
                clearTimeout(this.timer)
            },
        },
        watch: {
            currentTime(time) {
                if (time === 0) {
                    this.stopTimer()
                }
            }
        },
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <p>{{ time }}</p>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.