154 lines
3.3 KiB
Vue
154 lines
3.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="box">
|
||
<view class="title"
|
||
>{{ currentYear }}年 {{ currentMonth }}月</view
|
||
>
|
||
<scroll-view scroll-x="true">
|
||
<block v-for="(item, index) in dayList" :key="index">
|
||
<view
|
||
class="dayTitle"
|
||
:class="current == index ? 'select' : ''"
|
||
@click="timeSelectd(index)"
|
||
>
|
||
<view
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
"
|
||
>
|
||
<view class="day">{{ item.day }}</view>
|
||
<view v-if="index == 0" style="font-size: 25rpx">今天</view>
|
||
<view v-else style="font-size: 25rpx">周{{ item.week }}</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from "vue";
|
||
import common from "@/utils/common.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentYear: new Date().getFullYear(), // 当前年份
|
||
currentMonth: new Date().getMonth() + 1, // 当前月份（0-11需+1）
|
||
isShow: false,
|
||
current: 0,
|
||
dayList: [],
|
||
xzTime: common.GetNowTime(new Date()),
|
||
};
|
||
},
|
||
created() {
|
||
this.dayList = common.weekDate().dayList;
|
||
const firstDay = this.dayList[0];
|
||
this.currentYear = firstDay.year;
|
||
this.currentMonth = firstDay.month; // 假设 dayList 中的月份已处理补零
|
||
|
||
// 初始化时发送今天的日期信息
|
||
this.emitDateInfo(0);
|
||
},
|
||
methods: {
|
||
// 日期选择
|
||
timeSelectd(index) {
|
||
this.current = index;
|
||
let date =
|
||
this.dayList[index].year +
|
||
"-" +
|
||
this.dayList[index].month +
|
||
"-" +
|
||
this.dayList[index].day;
|
||
date = common.GetNowTime(new Date(date));
|
||
this.xzTime = date;
|
||
|
||
// 发送选中的日期信息给父组件
|
||
this.emitDateInfo(index);
|
||
},
|
||
|
||
// 发送日期信息给父组件的方法
|
||
emitDateInfo(index) {
|
||
const selectedDay = this.dayList[index];
|
||
const isToday = index === 0; // 因为第一项永远是今天
|
||
|
||
this.$emit("dateChange", {
|
||
date: this.xzTime, // 完整日期
|
||
year: selectedDay.year,
|
||
month: selectedDay.month,
|
||
day: selectedDay.day,
|
||
isToday: isToday,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.box {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
scroll-view {
|
||
padding: 20rpx 0;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
.title {
|
||
font-weight: 800;
|
||
font-size: 70rpx;
|
||
color: #282828;
|
||
}
|
||
|
||
.dayTitle {
|
||
margin-left: 20rpx;
|
||
text-align: center;
|
||
display: inline-block;
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
background: #ffffff;
|
||
border-radius: 25rpx;
|
||
border: 1rpx solid #4689fe;
|
||
position: relative;
|
||
|
||
.day {
|
||
font-weight: normal;
|
||
font-size: 34rpx;
|
||
color: #4473fe;
|
||
}
|
||
}
|
||
|
||
.dayTitle:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.select {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
color: #ffffff;
|
||
background: #4473fe;
|
||
border-radius: 25rpx;
|
||
// border: 1rpx solid #4473fe;
|
||
border: none;
|
||
.day {
|
||
color: #ffffff;
|
||
}
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 20rpx;
|
||
height: 10rpx;
|
||
background: orange;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
}
|
||
}
|
||
</style>
|