这是我的json数据,显示商店的营业时间:
{
"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"
}
}
我的vuejs代码是:
<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>
我使用以下代码显示今天的操作时间:
<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>
除了工作时间外,我还需要根据是否在工作时间内显示“已关闭”或“打开”。我该如何实现呢?
答案 0 :(得分:3)
首先,由于某些拼写错误,您的JSON
架构似乎不正确。我修复了JSON
架构并在代码中对其进行了硬编码,并删除了AJAX
调用以使代码可行。希望你可以替换它AJAX
自己打电话。
<强>解释强>
我使用了两个库来操纵日期/时间。第一个是momentjs,另一个是插件moment-range。然后,我使用JavaScript格式化您的日期,而不是在模板上进行格式化,并使用range
方法计算OPENED
和CLOSED
状态。我还添加了parseTime
函数来解析time
以处理AM/PM
。
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>