效果图
image.png
<template>
<view class="weekly">
<view class="block" v-for="(item,index) in date" :key="index">
<view class=" me-fx-row-sb">
<u-button type="success" @click="sub">-</u-button>
<u-button type="success" @click="btnData">{{item.month}}</u-button>
<u-button type="success" @click="add">+</u-button>
</view>
<view class="box_1 flex-row">
<view class="text-group_5 flex-col" v-for="(item2,index2) in item.WeekData "
:class="tabID == item2.endTime?'active':''" :key="item2.endTime" @click="testTabClick(item2)">
<text class="text_14">第{{index2+1}}周</text>
<text class="text_15 ">{{item2.beginTime}}至{{item2.endTime}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabID: '',
date: {
month: '2022年5月',
WeekData: [{
beginTime: '',
weeknum: '',
endTime: '',
startDate:"",
endDate:""
}, ]
},
year:'',
month:''
}
},
created() {
console.log('周---',)
const date = new Date()
this.year = date.getFullYear();
//获取月
this.month = date.getMonth() + 1;
this.initData(this.year+'-'+this.month+'-01')
},
methods: {
btnData(){
this.$emit('btnData')
},
add(){
this.month++
if(this.month>12){
this.month=1
this.year++
}
this.initData(this.year+'-'+this.month+'-01')
},
sub(){
this.month--
if(this.month<1){
this.month=12
this.year--
}
this.initData(this.year+'-'+this.month+'-01')
},
initData(e) {
let arr = []
let getLastSixMon = this.getLastSixMon(new Date(e))
let res = getLastSixMon;
let id = res.slice(5, 10)
let WeekData = this.weeks(res)
let month = res.replace('-', '年') + '月'
let result = {
month,
WeekData,
}
console.log(result);
arr.push(result)
arr.forEach((item, index) => {
let last = arr[index + 1],
first = arr[index],
lastData,
firstData = first.WeekData[0].endTime
if (last) {
let lastlen = last.WeekData.length - 1
lastData = last.WeekData[lastlen].endTime
}
if (lastData == firstData) {
last.WeekData.pop()
}
})
this.date = arr
console.log(arr);
},
getLastSixMon(e) {
// var data = new Date('2022-07-01');
var data = e
//获取年
var year = data.getFullYear();
//获取月
var mon = data.getMonth() + 1;
var arry = ''
if (mon <= 0) {
year = year - 1;
mon = mon + 12;
}
arry = year + "-" + mon;
mon = mon - 1;
console.log(arry);
return arry
},
time(date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
return y + '-' + m + '-' + d
},
weeks(now_month) {
let {
time
} = this
let week_array = [];
let today = new Date(Date.parse(now_month));
let year = today.getFullYear();
let month = today.getMonth();
let i = 0;
let start = new Date(year, month, 1); // 得到当月第一天
let end = new Date(year, month + 1, 0); // 得到当月最后一天
// 循环每周最后天叠设置为第一天，直到最后一天小于当月的最后一天
while (start <= end) {
const monday = new Date(start.getTime());
const sunday = new Date(start.getTime());
let startDate, endDate
monday.setDate(monday.getDate() + 1 - monday.getDay());
sunday.setDate(sunday.getDate() + 7 - sunday.getDay());
startDate = time(monday),
endDate = time(sunday)
week_array.push({
startDate,
endDate,
beginTime: startDate.slice(5, 10).replace('-', '.'),
endTime: endDate.slice(5, 10).replace('-', '.'),
})
start = sunday;
}
return week_array;
},
testTabClick(item) {
this.tabID = item.endTime
console.log(item);
}
}
}
</script>
<style lang="scss" scoped>
.text-wrapper_1 {
background-color: rgba(245, 252, 248, 1);
padding: 16rpx 334rpx 16rpx 32rpx;
margin-bottom: 32rpx;
.text_3 {
overflow-wrap: break-word;
color: rgba(0, 182, 82, 1);
font-size: 26rpx;
letter-spacing: 0.10833333432674408px;
text-align: left;
white-space: nowrap;
line-height: 36rpx;
}
}
.active {
color: #ffffff !important;
background: -webkit-linear-gradient(top, #0ba360 0%, #0ba360 100%)
}
.weekly {
background-color: #fff;
}
.mon {
width: 250rpx;
height: 55rpx;
margin: 0 auto;
}
.flex-row {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column
}
.txte {
font-size: 30rpx;
font-weight: 800;
}
.box_1 {
display: flex;
flex-wrap: wrap;
justify-items: center;
border-radius: 6px;
padding: 18rpx 8rpx 18rpx 8rpx;
color: #9b9b9b;
.text-group_5 {
padding: 30rpx;
background-color: rgba(244, 246, 247, 1);
margin-left: 25rpx;
margin-bottom: 25rpx;
.text_14 {
overflow-wrap: break-word;
color: rgba(34, 34, 34, 1);
font-size: 30rpx;
font-family: PingFangSC-Semibold;
text-align: center;
white-space: nowrap;
line-height: 42rpx;
margin: 0 28rpx 0 30rpx;
}
.text_15 {
overflow-wrap: break-word;
font-size: 24rpx;
text-align: center;
white-space: nowrap;
line-height: 34rpx;
margin-top: -2rpx;
}
}
}
</style>
网友评论