Wie kann ich "Geschlossen" oder "Öffnen" basierend auf der Zeit in vue js html anzeigen?

Question

Das ist mein json Daten, die die Betriebszeiten des Ladens zeigen:

{ 
    "status": true, 
    "data": { 
     "pid": 1, 
     "bussinessName": "ard", 
     "services": "looking for passionate", 
     "inventory": [], 
     "workHr": "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM" 
    } 
} 

Mein vuejs Code ist:

<script> 
    new Vue({ 
     el: '#feed' , 
     data: { 
      data: [], 
     }, 
     mounted() { 
      this.$nextTick(function() { 
       var self = this; 
       var id = 1; 
       console.log(id) 
       $.ajax({ 
        url: "https://n2s.herokuapp.com/api/post/get/"+{{pid}}, 
       method: "GET", 
        dataType: "JSON", 
        success: function (e) { 
        if (e.status == 1) { 
         self.data = e.data; 
         console.log(e.data) 

         const workHour = e.data.workHr.split(',').map((val) => { 
          const obj = val.split(':'); 
         const time = val.replace(`${obj[0]}:`, ''); 
         return { 
          day: obj[0], 
          time, 
         } 
        }); 
        } 
        else 
        { 
         console.log('Error occurred');} 
       }, error: function(){ 
        console.log('Error occurred'); 
       } 
      }); 
      }) 
     }, 
    }) 
</script> 

I heutigen Stunden von Operationen mit dem folgenden Code angezeigt:

<div v-for="(item,key) in data.workHr" :key="key"> 
    <span v-if="new Date().getDay()-1==key"> <img src="/static/assets/img/timer.png">Today : {{item.time}}</span>  
</div> 

Zusätzlich zu ihren Betriebsstunden muss ich auch "Geschlossen" oder "Offen" anzeigen, abhängig davon, ob sie innerhalb ihrer Arbeitszeiten sind oder nicht. Wie kann ich das umsetzen?

Answer 1

Zunächst einmal scheint Ihr JSON Schema aufgrund eines Tippfehlers falsch. Ich reparierte das JSON Schema und hardcodierte es im Code und entfernte den AJAX Anruf, um den Code verwendbar zu machen. Hoffe, Sie können es ersetzen AJAX rufen Sie selbst an.

Erläuterung
Ich habe zwei Bibliotheken verwendet, um Datum/Uhrzeit zu manipulieren. Erste ist momentjs und andere ist es Plugin moment-range. Dann habe ich Ihre Daten in JavaScript formatiert, anstatt es auf Vorlage zu tun und range Methode verwendet, um den OPENED und CLOSED Status zu berechnen. Ich habe auch parseTime Funktion hinzugefügt, um die time für die Handhabung zu analysieren.

window['moment-range'].extendMoment(moment); 
 

 
function parseTime(time, format) { 
 
    var add12 = false; 
 
    if (time.indexOf('PM') > -1) { 
 
    add12 = true; 
 
    } 
 
    time = moment(time.replace('AM', '').replace('PM', ''), 'hh:mm'); 
 
    if (add12) { 
 
    time.add(12, 'hours') 
 
    } 
 
    return time; 
 
} 
 

 
new Vue({ 
 
    el: '#feed', 
 
    data: { 
 
    data: [], 
 
    }, 
 
    mounted() { 
 
    this.$nextTick(function() { 
 
     var self = this; 
 
     var id = 1; 
 
     self.today_open = false; 
 
     var e = { 
 
     "status": true, 
 
     "data": { 
 
      "pid": 1, 
 
      "bussinessName": "ard", 
 
      "services": "looking for passionate", 
 
      "inventory": [], 
 
      "workHr": "Monday :9:00AM to 10:00PM,Tuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Thursday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM" 
 
     } 
 
     } 
 
     self.data = e.data; 
 
     const workHour = e.data.workHr.split(',').map((val) => { 
 
     const obj = val.split(':'); 
 
     const time = val.replace(`${obj[0]}:`, ''); 
 
     const time_from = time.split('to')[0].trim(); 
 
     const time_to = time.split('to')[1].trim(); 
 
     var timeWindow = moment.range(parseTime(time_from), parseTime(time_to)); 
 
     return { 
 
      day: obj[0], 
 
      time_from: parseTime(time_from).format('hh:mm A'), 
 
      time_to: parseTime(time_to).format('hh:mm A'), 
 
      today_open: timeWindow.contains(new Date()) 
 
     } 
 
     }); 
 
     self.data.workHr = workHour 
 
    }); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<script src="https://npmcdn.com/moment@2.14.1/moment.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.js"></script> 
 

 

 
<div id="feed"> 
 
    <div v-for="(item,key) in data.workHr" :key="key"> 
 
    <span v-if="new Date().getDay()-1==key"> Today : {{item.time_from}} to {{item.time_to}} <span v-if="item.today_open">OPENED</span><span v-if="!item.today_open">CLOSED</span></span> 
 
    </div> 
 
</div>