最近在开发一个订餐平台，默认数据是周为单位显示， 今天可以把自己所用的日期分享给出来
默认显示本周，如果在周天下午的时候显示下周的数据 ，默认得到本周和下周的日期 废话不多说 直接上代码
效果图如下
QQ截图20190611135344.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
</script>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
.box{
width:820px;
margin: 50px auto;
}
li {
list-style: none;
}
.box ul li{
width: 100px;
height: 60px;
border:1px solid blue;
float: left;
text-align: center;
}
.left{
float: left;
font-size: 30px;
cursor: pointer;
}
.right{
float: left;
font-size: 25px;
cursor: pointer;
}
.swiper-container {
width: 800px;
height: 300px;
}
</style>
<body>
<div class="box" id="app">
<div class="swiper-container">
<div class="swiper-slide">
<ul >
<li v-for="(item,index) in nowlist" :class="item.active +item.disable" :key="index" @click="abcs(index,item.disable,item.isActive,item.time)">
<p>{{item.week}}</p>
<p>{{item.date}}</p>
<p v-if="item.isBusiness">休</p>
</li>
</ul>
</div>
</div>
</div>
<style>
.active{
background: #329764;
color: #fff;
}
.disable{
background: #ccc
}
</style>
<script>
</script>
<script>
var vm = new Vue({
el: '#app',
data:{
nowlist:[],
nextlist:[],
cur:0,
noBusinessWeekNos:[],
},
mounted(){
this.webs();
},
methods: {
abcs(index,disable,isActive,time){
if(disable || isActive){
return
}
console.log(time)
var list=this.nowlist;
for(var i=0;i<this.nowlist.length;i++){
if(index==i){
this.nowlist[i].active = 'active';
this.nowlist[i].isActive = true;
} else{
this.nowlist[i].active = '';
this.nowlist[i].isActive = false;
}
}
},
getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
var current_week_no = date.getDay() === 0 ? 7 : date.getDay();
// alert(current_week_no)
return {"gettes":currentdate,"current_week_no":current_week_no};
},
getWeek(i){
var now = new Date();
var firstDay=new Date(now - (now .getDay() - 1 ) * 86400000);
firstDay.setDate(firstDay.getDate() + i);
var day=firstDay.getDate();
var days= day < 10 ? ('0'+day) : day;
var mon = Number(firstDay.getMonth()) + 1;
var mons= mon < 10 ? ('0'+mon) : mon;
return now.getFullYear() + "-" + mons + "-" + days;
},
webs(){
// var today="2019-06-13"
var today=this.getNowFormatDate().gettes;
var tds=this.getNowFormatDate().current_week_no;
// this.getNowFormatDate().getNowFormatDate;
this.noBusinessWeekNos = [1,2,3,4,5,6,7];
var item_date=new Date();
// alert(tds)
let business_days = [{week: '周一'},{week: '周二'},{week: '周三'},{week: '周四'},{week: '周五'},{week: '周六'},{week: '周日'}];
var nexts=[{week: '周一'},{week: '周二'},{week: '周三'},{week: '周四'},{week: '周五'},{week: '周六'},{week: '周日'}];
for(var i=0;i<business_days.length;i++){
business_days[i]["time"]=this.getWeek(i);
let current_week_no = item_date.getDay() === 0 ? 7 : item_date.getDay();
// alert(current_week_no)
var time=this.getWeek(i).substr(5).replace(/-/g,'/')
business_days[i]["date"]=time;
business_days[i].active = ''; //选中状态 class
business_days[i].disable = ''; //可选择 class
// alert(today===this.getWeek(i))
if(today==this.getWeek(i)){
business_days[i].active = 'active';
business_days[i].isActive = false; //是否选中
business_days[i].disable = '';
}else if(today>this.getWeek(i))
{
business_days[i].disable = 'disable';
business_days[i].active = '';
business_days[i].isActive = true; //是否选中
}
business_days[i].isBusiness = false;
}
//下一周的日期
for(var i=0;i<nexts.length;i++){
console.log(i);
nexts[i]["time"]=this.getWeek(i+7);
nexts[i]["date"]=this.getWeek(i+7).substr(5);
}
this.nowlist=business_days;
this.nextlist=nexts;
console.log(JSON.stringify(business_days))
console.log(JSON.stringify(nexts))
}
}
})
</script>
</body>
</html>
网友评论