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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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