效果
<div class="bf2">
<div class="f2">
<div class="ititle">
<div class="im" @click="plusMonth()">
<img src="static/images/icon/sileft.png"/>
</div>
<div class="title">{{nowMonth}}</div>
<div class="im1" @click="addMonth()">
<img src="static/images/icon/siright.png"/>
</div>
</div>
<div class="week">
<div class="weeekRes">
<div class="weekResT1" v-for="(item,index) in days" :key="index">
<div class="weekResti1"><span>{{item.week}}</span></div>
</div>
<div class="weekResT2" v-for="(item,index) in list" :key="index">
<div :class="['orderYuan']">
<span :class="['orderYuanTT',{'cirTT':item.sign},{'y':!item.inMonth}]">{{item.name}}</span>
</div>
</div>
</div>
</div>
<div>
<div class="btn">签到</div>
<div class="share">分享好友，签到积分翻倍！
<img src="/static/img/share.png">
</div>
</div>
</div>
</div>
.bf2 {
width: 100%;
margin-top: 57px;
}
.btn {
color: #fff;
background: #00B1F1;
text-align: center;
border-radius: 13px;
height: 27px;
line-height: 27px;
width: 75px;
margin: 10px auto 0;
}
.share {
font-size: 12px;
color: #656565;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.share img {
width: 12px;
height: 12px;
}
.f2 {
background: #fff;
border-radius: 9px;
box-shadow: 0 2px 8px 0 rgba(204, 204, 204, 0.5);
margin-bottom: 14px;
margin: 0 15px;
}
.f2 .ititle .title {
font-size: 16px;
color: #333;
text-align: center;
}
.f2 .ititle {
display: flex;
padding: 14px 0 12px;
margin: 0 9px;
}
.f2 .ititle img {
height: 16px;
width: 16px;
}
.f2 .ititle .im {
margin-right: auto;
margin-top: 3px;
}
.f2 .ititle .im1 {
margin-left: auto;
margin-top: 4px;
}
.f2 .week {
display: flex;
text-align: center;
flex-wrap: wrap;
}
.f2 .week .weeekRes {
display: flex;
text-align: center;
flex-wrap: wrap;
width: 100%;
}
.f2 .week .weekResT1 {
width: 14.28%;
padding-bottom: 5px;
}
.f2 .week .weekResT2 {
width: 14.28%;
font-size: 12px;
margin-bottom: 3px;
}
.f2 .week .weekResti1 {
font-size: 12px;
}
.f2 .week .orderYuan {
height: 24px;
line-height: 24px;
width: 100%;
}
.f2 .week .orderYuanTT {
width: 24px;
display: block;
margin: 0 auto;
border-radius: 51px;
align-items: center;
vertical-align: middle;
}
.f2 .week .y {
color: #999;
}
.cirTT {
background-color: #44c4a0 !important;
color: #fff !important;
}
.f2 .week .t1 {
width: 14.2%;
box-sizing: border-box;
flex-wrap: wrap;
font-size: 14px;
color: #333;
padding: 2px 0;
}
.f2 .week .t1 .lp1 {
font-size: 16px;
color: #333;
}
.f2 .week .t1 .lp2 {
font-size: 12px;
color: #333;
margin: 2px 12.5px;
padding: 2.5px 0;
}
.f2 .week .t1 .cur {
background-color: #44c4a0;
border-radius: 25px;
color: #fff;
width: 24px;
text-align: center;
align-items: center;
margin: 2px auto;
}
data() {
return {
monthOffset: 0,
shows: true,
exceed: true,
nowMonth: '',
list: [],
days: [{
week: '日'
}, {
week: '一'
}, {
week: '二'
}, {
week: '三'
}, {
week: '四'
}, {
week: '五'
}, {
week: '六'
}]
}
}
created() {
let nowMonth = util.formatYY()
this.nowMonth = nowMonth
this.getCal()
}
methods: {
getCal() {
let monthOffset = this.monthOffset
let nowMonth = moment().add(monthOffset, 'month').format('YYYY-MM') + '-01'
//当前选择的年月（获取到1号）
let list = []
//算出周几
let vWeekOfDay = moment(nowMonth).format('E') //算出这周的周几
if (vWeekOfDay == 7) {
vWeekOfDay = 0
}
//获取这个月的日历需要补满上个月的几天
for (let i = vWeekOfDay; i > 0; i--) {
//10-1往前减
let xdate = moment(nowMonth).subtract(i, 'days')
console.log(xdate)
let xname = xdate.format('D')
console.log(xname)
list.push({
name: xname,
date: xdate.format('YYYY-MM-DD'), sign: false
})
}
if (this.exceed) {
if (vWeekOfDay > 4) {
for (let i = 0; i < 42 - vWeekOfDay; i++) {
let xdate = moment(nowMonth).add(i, 'days')
let xname = xdate.format('D')
list.push({
name: xname,
date: xdate.format('YYYY-MM-DD'),
sign: false
})
}
} else {
for (let i = 0; i < 35 - vWeekOfDay; i++) {
let xdate = moment(nowMonth).add(i, 'days')
let xname = xdate.format('D')
list.push({
name: xname,
date: xdate.format('YYYY-MM-DD'),
sign: false
})
}
}
} else {
//7-少了几个
for (let i = 0; i < 7 - vWeekOfDay; i++) {
let xdate = moment(nowMonth).add(i, 'days')
let xname = xdate.format('D')
list.push({
name: xname,
date: xdate.format('YYYY-MM-DD'),
sign: false
})
}
}
this.list = list
let that = this
this.list.forEach(item => {
item.inMonth = that.isInMoth(item.date)
})
},
isInMoth(date) {
let tmonth = moment(date).format('YYYY年MM月')
if (tmonth == this.nowMonth) {
return true
}
return false
},
plusMonth() {
let monthOffset = this.monthOffset
monthOffset = monthOffset - 1
let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
this.monthOffset = monthOffset
this.nowMonth = nowMonth
this.getCal()
},
addMonth() {
let monthOffset = this.monthOffset
monthOffset = monthOffset + 1
let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
this.monthOffset = monthOffset
this.nowMonth = nowMonth
this.getCal()
}
}
网友评论