348 lines
8.0 KiB
Vue
348 lines
8.0 KiB
Vue
<template>
|
||
<view class="calendar">
|
||
<view class="header">
|
||
<view class="header-title">
|
||
<view class="head-left">
|
||
<image class="head-img" src="/static/index/calendar/superleft.png" @click="prevYear" />
|
||
<image class="head-img" src="/static/index/calendar/left.png" @click="prevMonth" />
|
||
</view>
|
||
<view class="year-month">{{ year }}年{{ month + 1 }}月</view>
|
||
<view class="head-left">
|
||
<image class="head-img" src="/static/index/calendar/right.png" @click="nextMonth" />
|
||
<image class="head-img" src="/static/index/calendar/superright.png" @click="nextYear" />
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="weekdays">
|
||
<view v-for="(day, idx) in weekdays" :key="idx" class="weekday">{{ day }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="days">
|
||
<view v-for="cell in cells" :key="cell.key" class="day-cell" :class="{
|
||
'prev-month': cell.prev,
|
||
'next-month': cell.next,
|
||
'start': isStart(cell.key),
|
||
'end': isEnd(cell.key),
|
||
'in-range': isInRange(cell.dateNumber)
|
||
}" @click="selectDate(cell)">
|
||
<view class="gregorian">{{ cell.dateText }}</view>
|
||
<view class="lunar" v-if="cell.lunarText">{{ cell.lunarText }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
computed
|
||
} from 'vue';
|
||
import solarlunar from 'solarlunar'; // npm install solarlunar
|
||
|
||
// 初始当前年月
|
||
const now = new Date();
|
||
const year = ref(now.getFullYear());
|
||
const month = ref(now.getMonth()); // 0-based
|
||
|
||
// 选中开始 / 结束 key (格式: YYYY-MM-DD)
|
||
const startKey = ref(null);
|
||
const endKey = ref(null);
|
||
|
||
// 把年月日转成便于比较的数字 YYYYMMDD
|
||
function toDateNumber(y, m, d) {
|
||
// m 是 0-base
|
||
const mm = m + 1;
|
||
return y * 10000 + mm * 100 + d;
|
||
}
|
||
|
||
// 格式化 key（m 0-base => 输出两位）
|
||
function formatKey(y, m, d) {
|
||
const mm = String(m + 1).padStart(2, '0');
|
||
const dd = String(d).padStart(2, '0');
|
||
return `${y}-${mm}-${dd}`;
|
||
}
|
||
|
||
// 星期一..日（与之前一致）
|
||
const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
|
||
|
||
// 计算某月第一天是周几（调整为 Monday = 0）
|
||
const firstWeekdayOfMonth = (y, m) => {
|
||
const d = new Date(y, m, 1).getDay(); // 0 (Sun) - 6 (Sat)
|
||
return (d + 6) % 7; // 转成 Monday=0 .. Sunday=6
|
||
};
|
||
|
||
// 生成 6*7 (42) 个格子的 cells（包含前后月份）
|
||
function buildCells(y, m) {
|
||
const list = [];
|
||
// 上个月信息
|
||
const prevDate = new Date(y, m, 0); // 上个月最后一天
|
||
const prevYear = prevDate.getFullYear();
|
||
const prevMonth = prevDate.getMonth();
|
||
const prevTotal = prevDate.getDate();
|
||
|
||
const startOffset = firstWeekdayOfMonth(y, m);
|
||
|
||
// 前置填充
|
||
for (let i = 0; i < startOffset; i++) {
|
||
const day = prevTotal - startOffset + i + 1;
|
||
const lunar = solarlunar.solar2lunar(prevYear, prevMonth + 1, day);
|
||
const dateNumber = toDateNumber(prevYear, prevMonth, day);
|
||
list.push({
|
||
key: `prev-${prevYear}-${prevMonth + 1}-${day}`,
|
||
dateText: day,
|
||
lunarText: lunar ? lunar.dayCn : '',
|
||
prev: true,
|
||
next: false,
|
||
year: prevYear,
|
||
month: prevMonth,
|
||
day,
|
||
dateNumber,
|
||
});
|
||
}
|
||
|
||
// 当前月
|
||
const totalDays = new Date(y, m + 1, 0).getDate();
|
||
for (let d = 1; d <= totalDays; d++) {
|
||
const lunar = solarlunar.solar2lunar(y, m + 1, d);
|
||
const dateNumber = toDateNumber(y, m, d);
|
||
list.push({
|
||
key: formatKey(y, m, d),
|
||
dateText: d,
|
||
lunarText: lunar ? lunar.dayCn : '',
|
||
prev: false,
|
||
next: false,
|
||
year: y,
|
||
month: m,
|
||
day: d,
|
||
dateNumber,
|
||
});
|
||
}
|
||
|
||
// 尾部补位到 42
|
||
const need = 42 - list.length;
|
||
for (let i = 1; i <= need; i++) {
|
||
const nd = new Date(y, m + 1, i);
|
||
const ny = nd.getFullYear();
|
||
const nm = nd.getMonth();
|
||
const lunar = solarlunar.solar2lunar(ny, nm + 1, i);
|
||
const dateNumber = toDateNumber(ny, nm, i);
|
||
list.push({
|
||
key: `next-${ny}-${nm + 1}-${i}`,
|
||
dateText: i,
|
||
lunarText: lunar ? lunar.dayCn : '',
|
||
prev: false,
|
||
next: true,
|
||
year: ny,
|
||
month: nm,
|
||
day: i,
|
||
dateNumber,
|
||
});
|
||
}
|
||
|
||
return list;
|
||
}
|
||
|
||
// 当前视图的 cells
|
||
const cells = computed(() => buildCells(year.value, month.value));
|
||
|
||
// start/end 转成数值便于比较
|
||
const startNumber = computed(() => {
|
||
if (!startKey.value) return null;
|
||
const [y, m, d] = startKey.value.split('-').map(Number);
|
||
return toDateNumber(y, m - 1, d);
|
||
});
|
||
const endNumber = computed(() => {
|
||
if (!endKey.value) return null;
|
||
const [y, m, d] = endKey.value.split('-').map(Number);
|
||
return toDateNumber(y, m - 1, d);
|
||
});
|
||
|
||
// 判断是否 start / end
|
||
function isStart(key) {
|
||
return startKey.value === key;
|
||
}
|
||
|
||
function isEnd(key) {
|
||
return endKey.value === key;
|
||
}
|
||
|
||
// 判断是否在范围内（包含边界）
|
||
function isInRange(dateNumber) {
|
||
if (!startNumber.value || !endNumber.value) return false;
|
||
return dateNumber >= startNumber.value && dateNumber <= endNumber.value;
|
||
}
|
||
const emit = defineEmits(["datachange"]); // 定义事件名
|
||
// 选择日期逻辑：支持任意先后顺序的两次点击来形成区间
|
||
function selectDate(cell) {
|
||
// console.log("ZZZZ",isInRange(cell.dateNumber))
|
||
if (cell.prev || cell.next) return
|
||
const key = formatKey(cell.year, cell.month, cell.day);
|
||
const num = cell.dateNumber;
|
||
|
||
// 如果没有选 start -> 设为 start
|
||
if (!startKey.value) {
|
||
startKey.value = key;
|
||
endKey.value = null;
|
||
return;
|
||
}
|
||
|
||
// 已有 start 但无 end
|
||
if (startKey.value && !endKey.value) {
|
||
// 如果第二次选择晚于或等于 start -> 设为 end
|
||
if (num >= startNumber.value) {
|
||
endKey.value = key;
|
||
// console.log("开始,结束", startKey.value, endKey.value)
|
||
emit("datachange", {
|
||
start: startKey.value,
|
||
end: endKey.value,
|
||
});
|
||
return;
|
||
}
|
||
// 如果第二次选择早于 start -> 把早的设为 start，晚的设为 end（即交换）
|
||
endKey.value = startKey.value;
|
||
startKey.value = key;
|
||
// console.log("开始,结束", startKey.value, endKey.value)
|
||
emit("datachange", {
|
||
start: startKey.value,
|
||
end: endKey.value,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 已有 start 和 end，再次点击任意日期 -> 以该日期作为新的 start，清除 end
|
||
startKey.value = key;
|
||
endKey.value = null;
|
||
}
|
||
|
||
// 年/月 切换
|
||
function prevMonth() {
|
||
if (month.value === 0) {
|
||
year.value--;
|
||
month.value = 11;
|
||
} else {
|
||
month.value--;
|
||
}
|
||
}
|
||
|
||
function nextMonth() {
|
||
if (month.value === 11) {
|
||
year.value++;
|
||
month.value = 0;
|
||
} else {
|
||
month.value++;
|
||
}
|
||
}
|
||
|
||
function prevYear() {
|
||
year.value--;
|
||
}
|
||
|
||
function nextYear() {
|
||
year.value++;
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.calendar {
|
||
padding: 16px;
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||
// max-width: 720rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.header-title {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.year-month {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
.weekdays {
|
||
display: flex;
|
||
background-color: #F8F8FA;
|
||
border-radius: 18rpx;
|
||
padding: 8rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.weekday {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.days {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 8rpx 0;
|
||
}
|
||
|
||
.day-cell {
|
||
width: calc(100% / 7);
|
||
height: 78rpx;
|
||
text-align: center;
|
||
padding-top: 8rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
/* 前后月份灰色显示 */
|
||
.day-cell.prev-month .gregorian,
|
||
.day-cell.next-month .gregorian {
|
||
color: #ccc;
|
||
}
|
||
|
||
/* 范围内（中间）样式 */
|
||
.day-cell.in-range {
|
||
background-color: #E6F7FF;
|
||
}
|
||
|
||
/* 开始/结束 的样式 */
|
||
.day-cell.start,
|
||
.day-cell.end {
|
||
background-color: #0B98DC;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.day-cell.start .gregorian,
|
||
.day-cell.end .gregorian,
|
||
.day-cell.start .lunar,
|
||
.day-cell.end .lunar {
|
||
color: #fff;
|
||
}
|
||
|
||
.gregorian {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.lunar {
|
||
font-size: 10px;
|
||
color: #888;
|
||
}
|
||
.head-left{
|
||
width: 100rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.head-img{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
</style> |