<template>
<view class="container">
<view class="swiper" >
<view
v-for="(item, index) in dateList"
:key="index"
@click ="ClickDateCheng(item.id, index)"
:class="{'selected': selectedIndex === index}"
class="box">
<text style="padding-bottom: 4rpx;">{{ item.label }}</text>
<text >{{ item.day}}</text>
</view>
</view>
<view class="all">
<text>{{ year }}年</text>
<view @click="show = true">{{month }}月</view>
</view>
<u-calendar :show="show" @close="show = !show" @confirm="confirm"></u-calendar>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
single: '',
dateList: [],
dateListArray: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
maxCount: 15, // 横向日期默认显示的日期数量
clientWidthCount: 0, // 每行显示的数量
selectedIndex: 0,
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
};
},
methods: {
// 初始化日期数组
initDates() {
// { label:"周一",'day':"22", value:"2023-12-22"}
this.dateList.push(this.formatData(new Date()))
for (let i = 1; i <= this.maxCount; i++) {
let now = new Date();
this.dateList.push(this.formatData(new Date(now.setDate(now.getDate()+i))))
}
},
formatData(date){
let nowStr=this.$u.timeFormat(date.getTime(), 'yyyy-mm-dd')
let label=this.dateListArray[date.getDay()]
return {
label:label,
day:date.getDate(),
value:nowStr
}
},
confirm(e) {
const date = new Date(e[0]);
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
const selectedIndex = this.dateList.findIndex(item => item.value === this.$u.timeFormat(date.getTime(), 'yyyy-mm-dd'));
if (selectedIndex !== -1) {
this.selectedIndex = selectedIndex;
}
this.show = false;
},
// 添加日期到数组
addDate(date, txt) {
let year = date.getFullYear();
let mon = (date.getMonth() + 1 < 10 ? '0' : '') + (date.getMonth() + 1);
let day = (date.getDate() < 10 ? '0' : '') + date.getDate();
let week = txt !== "" ? txt : this.dateListArray[date.getDay()];
let newObj = {
id: year + '-' + mon + '-' + day,
text: week,
mon: mon,
day: day
};
this.Dates.push(newObj);
},
// 点击日期事件
ClickDateCheng(id, index) {
this.selectedIndex = index;
this.dateCurrentStr = id;
// uni.showToast({
// title: '加载中...',
// icon: 'loading',
// duration: 1000
// });
}
},
created() {
// 初始化日期数组
this.initDates();
},
};
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: row;
width: 100vw;
.swiper {
background: #4b9efc;
color: white;
display: flex;
flex-direction: row;
overflow-x: scroll;
white-space: nowrap;
padding: 8rpx 0;
.box {
width: calc(100% / 6 - 50rpx);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
//width: calc( 100% / 7 - 270rpx );
padding: 8rpx 15rpx;
margin: 0 10rpx;
}
.selected {
background-color: #fff;
color: #54a6f8;
border-radius: 10rpx;
}
}
.all {
width: 180rpx;
font-size: 12px;
display: flex;
padding: 10rpx;
align-items: center;
flex-direction: column;
justify-content: center;
background: #2e8ff1;
color: #FFFFFF;
}
}
</style>
时间线:
<template>
<view>
<view class="item">
<view v-for="(item,index) in nums" :key="index" >
<view>
{{item}}
</view>
</view>
</view>
<view style="display: flex;">
<view v-for="(item,index) in nums" :key="index"
:style="{width:100/nums.length + '%'}" style="background:#fac7c7;height:30rpx">
<view v-for="(deepitem,dindex) in colorDeeps"
:key="dindex">
<view v-if="item>= deepitem.start && item <deepitem.end" class="deep">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
nums: [
7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24
],
colorDeeps:[
{ start: 12, end: 14},
{ start: 8, end: 9 }
],
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.item{
font-size: 14px;
display: flex;
justify-content: space-around;
align-items: center;
color: #999999;
margin-bottom: 6rpx;
}
.deep{
background: #fc5967;
height:30rpx;
}
</style>