927 lines
21 KiB
Plaintext
927 lines
21 KiB
Plaintext
|
<template>
|
|||
|
|
<view class="cl-calendar" :class="[pt.className]">
|
|||
|
|
<!-- 年月选择器弹窗 -->
|
|||
|
|
<calendar-picker
|
|||
|
|
:year="currentYear"
|
|||
|
|
:month="currentMonth"
|
|||
|
|
:ref="refs.set('picker')"
|
|||
|
|
@change="onYearMonthChange"
|
|||
|
|
></calendar-picker>
|
|||
|
|
|
|||
|
|
<!-- 头部导航栏 -->
|
|||
|
|
<view class="cl-calendar__header" v-if="showHeader">
|
|||
|
|
<!-- 上一月按钮 -->
|
|||
|
|
<view
|
|||
|
|
class="cl-calendar__header-prev"
|
|||
|
|
:class="{ 'is-dark': isDark }"
|
|||
|
|
@tap.stop="gotoPrevMonth"
|
|||
|
|
>
|
|||
|
|
<cl-icon name="arrow-left-s-line"></cl-icon>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 当前年月显示区域 -->
|
|||
|
|
<view class="cl-calendar__header-date" @tap="refs.open('picker')">
|
|||
|
|
<slot name="current-date">
|
|||
|
|
<cl-text :pt="{ className: 'text-lg' }">{{
|
|||
|
|
$t(`{year}年{month}月`, { year: currentYear, month: currentMonth })
|
|||
|
|
}}</cl-text>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 下一月按钮 -->
|
|||
|
|
<view
|
|||
|
|
class="cl-calendar__header-next"
|
|||
|
|
:class="{ 'is-dark': isDark }"
|
|||
|
|
@tap.stop="gotoNextMonth"
|
|||
|
|
>
|
|||
|
|
<cl-icon name="arrow-right-s-line"></cl-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 星期标题行 -->
|
|||
|
|
<view class="cl-calendar__weeks" :style="{ gap: `${cellGap}px` }" v-if="showWeeks">
|
|||
|
|
<view class="cl-calendar__weeks-item" v-for="weekName in weekLabels" :key="weekName">
|
|||
|
|
<cl-text>{{ weekName }}</cl-text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 日期网格容器 -->
|
|||
|
|
<view
|
|||
|
|
class="cl-calendar__view"
|
|||
|
|
ref="viewRef"
|
|||
|
|
:style="{ height: `${viewHeight}px`, gap: `${cellGap}px` }"
|
|||
|
|
@tap="onTap"
|
|||
|
|
>
|
|||
|
|
<!-- #ifndef APP -->
|
|||
|
|
<view
|
|||
|
|
class="cl-calendar__view-row"
|
|||
|
|
:style="{ gap: `${cellGap}px` }"
|
|||
|
|
v-for="(weekRow, rowIndex) in dateMatrix"
|
|||
|
|
:key="rowIndex"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="cl-calendar__view-cell"
|
|||
|
|
v-for="(dateCell, cellIndex) in weekRow"
|
|||
|
|
:key="cellIndex"
|
|||
|
|
:class="{
|
|||
|
|
'is-selected': dateCell.isSelected,
|
|||
|
|
'is-range': dateCell.isRange,
|
|||
|
|
'is-hide': dateCell.isHide,
|
|||
|
|
'is-disabled': dateCell.isDisabled,
|
|||
|
|
'is-today': dateCell.isToday,
|
|||
|
|
'is-other-month': !dateCell.isCurrentMonth
|
|||
|
|
}"
|
|||
|
|
:style="{
|
|||
|
|
height: cellHeight + 'px',
|
|||
|
|
backgroundColor: getCellBgColor(dateCell)
|
|||
|
|
}"
|
|||
|
|
@click.stop="selectDateCell(dateCell)"
|
|||
|
|
>
|
|||
|
|
<!-- 顶部文本 -->
|
|||
|
|
<cl-text
|
|||
|
|
:size="20"
|
|||
|
|
:color="getCellTextColor(dateCell)"
|
|||
|
|
:pt="{
|
|||
|
|
className: 'absolute top-[2px]'
|
|||
|
|
}"
|
|||
|
|
>{{ dateCell.topText }}</cl-text
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
<!-- 主日期数字 -->
|
|||
|
|
<cl-text
|
|||
|
|
:color="getCellTextColor(dateCell)"
|
|||
|
|
:size="`${fontSize}px`"
|
|||
|
|
:pt="{
|
|||
|
|
className: 'font-bold'
|
|||
|
|
}"
|
|||
|
|
>{{ dateCell.date }}</cl-text
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
<!-- 底部文本 -->
|
|||
|
|
<cl-text
|
|||
|
|
:size="20"
|
|||
|
|
:color="getCellTextColor(dateCell)"
|
|||
|
|
:pt="{
|
|||
|
|
className: 'absolute bottom-[2px]'
|
|||
|
|
}"
|
|||
|
|
>{{ dateCell.bottomText }}</cl-text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { computed, nextTick, onMounted, ref, watch, type PropType } from "vue";
|
|||
|
|
import { ctx, dayUts, first, isDark, isHarmony, parsePt, useRefs } from "@/cool";
|
|||
|
|
import CalendarPicker from "./picker.uvue";
|
|||
|
|
import { $t, t } from "@/locale";
|
|||
|
|
import type { ClCalendarDateConfig, ClCalendarMode } from "../../types";
|
|||
|
|
import { useSize } from "../../hooks";
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: "cl-calendar"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 组件属性定义
|
|||
|
|
const props = defineProps({
|
|||
|
|
// 透传样式配置
|
|||
|
|
pt: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({})
|
|||
|
|
},
|
|||
|
|
// 当前选中的日期值（单选模式）
|
|||
|
|
modelValue: {
|
|||
|
|
type: String as PropType<string | null>,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
// 选中的日期数组（多选/范围模式）
|
|||
|
|
date: {
|
|||
|
|
type: Array as PropType<string[]>,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
// 日期选择模式：单选/多选/范围选择
|
|||
|
|
mode: {
|
|||
|
|
type: String as PropType<ClCalendarMode>,
|
|||
|
|
default: "single"
|
|||
|
|
},
|
|||
|
|
// 日期配置
|
|||
|
|
dateConfig: {
|
|||
|
|
type: Array as PropType<ClCalendarDateConfig[]>,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
// 开始日期，可选日期的开始
|
|||
|
|
start: {
|
|||
|
|
type: String
|
|||
|
|
},
|
|||
|
|
// 结束日期，可选日期的结束
|
|||
|
|
end: {
|
|||
|
|
type: String
|
|||
|
|
},
|
|||
|
|
// 设置年份
|
|||
|
|
year: {
|
|||
|
|
type: Number
|
|||
|
|
},
|
|||
|
|
// 设置月份
|
|||
|
|
month: {
|
|||
|
|
type: Number
|
|||
|
|
},
|
|||
|
|
// 是否显示其他月份的日期
|
|||
|
|
showOtherMonth: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 是否显示头部导航栏
|
|||
|
|
showHeader: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 是否显示星期
|
|||
|
|
showWeeks: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 单元格高度
|
|||
|
|
cellHeight: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 66
|
|||
|
|
},
|
|||
|
|
// 单元格间距
|
|||
|
|
cellGap: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
// 主色
|
|||
|
|
color: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
// 当前月份日期颜色
|
|||
|
|
textColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
// 其他月份日期颜色
|
|||
|
|
textOtherMonthColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
// 禁用日期颜色
|
|||
|
|
textDisabledColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
// 今天日期颜色
|
|||
|
|
textTodayColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#ff6b6b"
|
|||
|
|
},
|
|||
|
|
// 选中日期颜色
|
|||
|
|
textSelectedColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: "#ffffff"
|
|||
|
|
},
|
|||
|
|
// 选中日期背景颜色
|
|||
|
|
bgSelectedColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
// 范围选择背景颜色
|
|||
|
|
bgRangeColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 事件发射器定义
|
|||
|
|
const emit = defineEmits(["update:modelValue", "update:date", "change"]);
|
|||
|
|
|
|||
|
|
// 日期单元格数据结构
|
|||
|
|
type DateCell = {
|
|||
|
|
date: string; // 显示的日期数字
|
|||
|
|
isCurrentMonth: boolean; // 是否属于当前显示月份
|
|||
|
|
isToday: boolean; // 是否为今天
|
|||
|
|
isSelected: boolean; // 是否被选中
|
|||
|
|
isRange: boolean; // 是否在选择范围内
|
|||
|
|
fullDate: string; // 完整日期格式 YYYY-MM-DD
|
|||
|
|
isDisabled: boolean; // 是否被禁用
|
|||
|
|
isHide: boolean; // 是否隐藏显示
|
|||
|
|
topText: string; // 顶部文案
|
|||
|
|
bottomText: string; // 底部文案
|
|||
|
|
color: string; // 颜色
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 透传样式属性类型
|
|||
|
|
type PassThrough = {
|
|||
|
|
className?: string;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 解析透传样式配置
|
|||
|
|
const pt = computed(() => parsePt<PassThrough>(props.pt));
|
|||
|
|
|
|||
|
|
// 字体大小
|
|||
|
|
const { getPxValue } = useSize();
|
|||
|
|
|
|||
|
|
// 主色
|
|||
|
|
const color = computed(() => {
|
|||
|
|
if (props.color != "") {
|
|||
|
|
return props.color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return ctx.color["primary-500"] as string;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 单元格高度
|
|||
|
|
const cellHeight = computed(() => props.cellHeight);
|
|||
|
|
|
|||
|
|
// 单元格间距
|
|||
|
|
const cellGap = computed(() => props.cellGap);
|
|||
|
|
|
|||
|
|
// 字体大小
|
|||
|
|
const fontSize = computed(() => {
|
|||
|
|
// #ifdef APP
|
|||
|
|
return getPxValue("14px");
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef APP
|
|||
|
|
return 14;
|
|||
|
|
// #endif
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 当前月份日期颜色
|
|||
|
|
const textColor = computed(() => {
|
|||
|
|
if (props.textColor != "") {
|
|||
|
|
return props.textColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return isDark.value ? "white" : (ctx.color["surface-700"] as string);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 其他月份日期颜色
|
|||
|
|
const textOtherMonthColor = computed(() => {
|
|||
|
|
if (props.textOtherMonthColor != "") {
|
|||
|
|
return props.textOtherMonthColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return isDark.value
|
|||
|
|
? (ctx.color["surface-500"] as string)
|
|||
|
|
: (ctx.color["surface-300"] as string);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 禁用日期颜色
|
|||
|
|
const textDisabledColor = computed(() => {
|
|||
|
|
if (props.textDisabledColor != "") {
|
|||
|
|
return props.textDisabledColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return isDark.value
|
|||
|
|
? (ctx.color["surface-500"] as string)
|
|||
|
|
: (ctx.color["surface-300"] as string);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 今天日期颜色
|
|||
|
|
const textTodayColor = computed(() => props.textTodayColor);
|
|||
|
|
|
|||
|
|
// 选中日期颜色
|
|||
|
|
const textSelectedColor = computed(() => props.textSelectedColor);
|
|||
|
|
|
|||
|
|
// 选中日期背景颜色
|
|||
|
|
const bgSelectedColor = computed(() => {
|
|||
|
|
if (props.bgSelectedColor != "") {
|
|||
|
|
return props.bgSelectedColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return color.value;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 范围选择背景颜色
|
|||
|
|
const bgRangeColor = computed(() => {
|
|||
|
|
if (props.bgRangeColor != "") {
|
|||
|
|
return props.bgRangeColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return isHarmony() ? (ctx.color["primary-50"] as string) : color.value + "11";
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 组件引用管理器
|
|||
|
|
const refs = useRefs();
|
|||
|
|
|
|||
|
|
// 日历视图DOM元素引用
|
|||
|
|
const viewRef = ref<UniElement | null>(null);
|
|||
|
|
|
|||
|
|
// 当前显示的年份
|
|||
|
|
const currentYear = ref(0);
|
|||
|
|
|
|||
|
|
// 当前显示的月份
|
|||
|
|
const currentMonth = ref(0);
|
|||
|
|
|
|||
|
|
// 视图高度
|
|||
|
|
const viewHeight = computed(() => {
|
|||
|
|
return cellHeight.value * 6;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 单元格宽度
|
|||
|
|
const cellWidth = ref(0);
|
|||
|
|
|
|||
|
|
// 星期标签数组
|
|||
|
|
const weekLabels = computed(() => {
|
|||
|
|
return [t("周日"), t("周一"), t("周二"), t("周三"), t("周四"), t("周五"), t("周六")];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 日历日期矩阵数据（6行7列）
|
|||
|
|
const dateMatrix = ref<DateCell[][]>([]);
|
|||
|
|
|
|||
|
|
// 当前选中的日期列表
|
|||
|
|
const selectedDates = ref<string[]>([]);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取日历视图元素的位置信息
|
|||
|
|
*/
|
|||
|
|
async function getViewRect(): Promise<DOMRect | null> {
|
|||
|
|
return viewRef.value!.getBoundingClientRectAsync();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断指定日期是否被选中
|
|||
|
|
* @param dateStr 日期字符串 YYYY-MM-DD
|
|||
|
|
*/
|
|||
|
|
function isDateSelected(dateStr: string): boolean {
|
|||
|
|
if (props.mode == "single") {
|
|||
|
|
// 单选模式：检查是否为唯一选中日期
|
|||
|
|
return selectedDates.value[0] == dateStr;
|
|||
|
|
} else {
|
|||
|
|
// 多选/范围模式：检查是否在选中列表中
|
|||
|
|
return selectedDates.value.includes(dateStr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断指定日期是否被禁用
|
|||
|
|
* @param dateStr 日期字符串 YYYY-MM-DD
|
|||
|
|
*/
|
|||
|
|
function isDateDisabled(dateStr: string): boolean {
|
|||
|
|
// 大于开始日期
|
|||
|
|
if (props.start != null) {
|
|||
|
|
if (dayUts(dateStr).isBefore(dayUts(props.start))) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 小于结束日期
|
|||
|
|
if (props.end != null) {
|
|||
|
|
if (dayUts(dateStr).isAfter(dayUts(props.end))) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return props.dateConfig.some((config) => config.date == dateStr && config.disabled == true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断指定日期是否在选择范围内（不包括端点）
|
|||
|
|
* @param dateStr 日期字符串 YYYY-MM-DD
|
|||
|
|
*/
|
|||
|
|
function isDateInRange(dateStr: string): boolean {
|
|||
|
|
// 仅范围选择模式且已选择两个端点时才有范围
|
|||
|
|
if (props.mode != "range" || selectedDates.value.length != 2) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const [startDate, endDate] = selectedDates.value;
|
|||
|
|
const currentDate = dayUts(dateStr);
|
|||
|
|
return currentDate.isAfter(startDate) && currentDate.isBefore(endDate);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取单元格字体颜色
|
|||
|
|
* @param dateCell 日期单元格数据
|
|||
|
|
* @returns 字体颜色
|
|||
|
|
*/
|
|||
|
|
function getCellTextColor(dateCell: DateCell): string {
|
|||
|
|
// 选中的日期文字颜色
|
|||
|
|
if (dateCell.isSelected) {
|
|||
|
|
return textSelectedColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (dateCell.color != "") {
|
|||
|
|
return dateCell.color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 范围选择日期颜色
|
|||
|
|
if (dateCell.isRange) {
|
|||
|
|
return color.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 禁用的日期颜色
|
|||
|
|
if (dateCell.isDisabled) {
|
|||
|
|
return textDisabledColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 今天日期颜色
|
|||
|
|
if (dateCell.isToday) {
|
|||
|
|
return textTodayColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 当前月份日期颜色
|
|||
|
|
if (dateCell.isCurrentMonth) {
|
|||
|
|
return textColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 其他月份日期颜色
|
|||
|
|
return textOtherMonthColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取单元格背景颜色
|
|||
|
|
* @param dateCell 日期单元格数据
|
|||
|
|
* @returns 背景颜色
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
function getCellBgColor(dateCell: DateCell): string {
|
|||
|
|
if (dateCell.isSelected) {
|
|||
|
|
return bgSelectedColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (dateCell.isRange) {
|
|||
|
|
return bgRangeColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return "transparent";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算并生成日历矩阵数据
|
|||
|
|
* 生成6行7列共42个日期，包含上月末尾和下月开头的日期
|
|||
|
|
*/
|
|||
|
|
function calculateDateMatrix() {
|
|||
|
|
const weekRows: DateCell[][] = [];
|
|||
|
|
const todayStr = dayUts().format("YYYY-MM-DD"); // 今天的日期字符串
|
|||
|
|
|
|||
|
|
// 获取当前月第一天
|
|||
|
|
const monthFirstDay = dayUts(`${currentYear.value}-${currentMonth.value}-01`);
|
|||
|
|
const firstDayWeekIndex = monthFirstDay.getDay(); // 第一天是星期几 (0=周日, 6=周六)
|
|||
|
|
|
|||
|
|
// 计算日历显示的起始日期（可能是上个月的日期）
|
|||
|
|
const calendarStartDate = monthFirstDay.subtract(firstDayWeekIndex, "day");
|
|||
|
|
|
|||
|
|
// 生成6周的日期数据（6行 × 7列 = 42天）
|
|||
|
|
let iterateDate = calendarStartDate;
|
|||
|
|
for (let weekIndex = 0; weekIndex < 6; weekIndex++) {
|
|||
|
|
const weekDates: DateCell[] = [];
|
|||
|
|
|
|||
|
|
for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
|
|||
|
|
const fullDateStr = iterateDate.format("YYYY-MM-DD");
|
|||
|
|
const nativeDate = iterateDate.toDate();
|
|||
|
|
const dayNumber = nativeDate.getDate();
|
|||
|
|
|
|||
|
|
// 判断是否属于当前显示月份
|
|||
|
|
const belongsToCurrentMonth =
|
|||
|
|
nativeDate.getMonth() + 1 == currentMonth.value &&
|
|||
|
|
nativeDate.getFullYear() == currentYear.value;
|
|||
|
|
|
|||
|
|
// 日期配置
|
|||
|
|
const dateConfig = props.dateConfig.find((config) => config.date == fullDateStr);
|
|||
|
|
|
|||
|
|
// 构建日期单元格数据
|
|||
|
|
const dateCell = {
|
|||
|
|
date: `${dayNumber}`,
|
|||
|
|
isCurrentMonth: belongsToCurrentMonth,
|
|||
|
|
isToday: fullDateStr == todayStr,
|
|||
|
|
isSelected: isDateSelected(fullDateStr),
|
|||
|
|
isRange: isDateInRange(fullDateStr),
|
|||
|
|
fullDate: fullDateStr,
|
|||
|
|
isDisabled: isDateDisabled(fullDateStr),
|
|||
|
|
isHide: false,
|
|||
|
|
topText: dateConfig?.topText ?? "",
|
|||
|
|
bottomText: dateConfig?.bottomText ?? "",
|
|||
|
|
color: dateConfig?.color ?? ""
|
|||
|
|
} as DateCell;
|
|||
|
|
|
|||
|
|
// 根据配置决定是否隐藏相邻月份的日期
|
|||
|
|
if (!props.showOtherMonth && !belongsToCurrentMonth) {
|
|||
|
|
dateCell.isHide = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
weekDates.push(dateCell);
|
|||
|
|
iterateDate = iterateDate.add(1, "day"); // 移动到下一天
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
weekRows.push(weekDates);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
dateMatrix.value = weekRows;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 使用Canvas绘制日历（仅APP端）
|
|||
|
|
* Web端使用DOM渲染，APP端使用Canvas提升性能
|
|||
|
|
*/
|
|||
|
|
async function renderCalendar() {
|
|||
|
|
// #ifdef APP
|
|||
|
|
await nextTick(); // 等待DOM更新完成
|
|||
|
|
|
|||
|
|
const ctx = viewRef.value!.getDrawableContext();
|
|||
|
|
|
|||
|
|
if (ctx == null) return;
|
|||
|
|
|
|||
|
|
ctx!.reset(); // 清空画布
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 绘制单个日期单元格
|
|||
|
|
* @param dateCell 日期单元格数据
|
|||
|
|
* @param colIndex 列索引 (0-6)
|
|||
|
|
* @param rowIndex 行索引 (0-5)
|
|||
|
|
*/
|
|||
|
|
function drawSingleCell(dateCell: DateCell, colIndex: number, rowIndex: number) {
|
|||
|
|
// 计算单元格位置
|
|||
|
|
const cellX = colIndex * cellWidth.value;
|
|||
|
|
const cellY = rowIndex * cellHeight.value;
|
|||
|
|
const centerX = cellX + cellWidth.value / 2;
|
|||
|
|
const centerY = cellY + cellHeight.value / 2;
|
|||
|
|
|
|||
|
|
// 绘制背景（选中状态或范围状态）
|
|||
|
|
if (dateCell.isSelected || dateCell.isRange) {
|
|||
|
|
const padding = cellGap.value; // 使用间距作为内边距
|
|||
|
|
const bgX = cellX + padding;
|
|||
|
|
const bgY = cellY + padding;
|
|||
|
|
const bgWidth = cellWidth.value - padding * 2;
|
|||
|
|
const bgHeight = cellHeight.value - padding * 2;
|
|||
|
|
|
|||
|
|
// 设置背景颜色
|
|||
|
|
if (dateCell.isSelected) {
|
|||
|
|
ctx!.fillStyle = bgSelectedColor.value;
|
|||
|
|
}
|
|||
|
|
if (dateCell.isRange) {
|
|||
|
|
ctx!.fillStyle = bgRangeColor.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ctx!.fillRect(bgX, bgY, bgWidth, bgHeight); // 绘制背景矩形
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取单元格文字颜色
|
|||
|
|
const cellTextColor = getCellTextColor(dateCell);
|
|||
|
|
ctx!.textAlign = "center";
|
|||
|
|
|
|||
|
|
// 绘制顶部文本
|
|||
|
|
if (dateCell.topText != "") {
|
|||
|
|
ctx!.font = `${Math.floor(fontSize.value * 0.75)}px sans-serif`;
|
|||
|
|
ctx!.fillStyle = cellTextColor;
|
|||
|
|
const topY = cellY + 16; // 距离顶部
|
|||
|
|
ctx!.fillText(dateCell.topText, centerX, topY);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绘制主日期数字
|
|||
|
|
ctx!.font = `${fontSize.value}px sans-serif`;
|
|||
|
|
ctx!.fillStyle = cellTextColor;
|
|||
|
|
const textOffsetY = (fontSize.value / 2) * 0.7;
|
|||
|
|
ctx!.fillText(dateCell.date.toString(), centerX, centerY + textOffsetY);
|
|||
|
|
|
|||
|
|
// 绘制底部文本
|
|||
|
|
if (dateCell.bottomText != "") {
|
|||
|
|
ctx!.font = `${Math.floor(fontSize.value * 0.75)}px sans-serif`;
|
|||
|
|
ctx!.fillStyle = cellTextColor;
|
|||
|
|
const bottomY = cellY + cellHeight.value - 8; // 距离底部
|
|||
|
|
ctx!.fillText(dateCell.bottomText, centerX, bottomY);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取容器尺寸信息
|
|||
|
|
const viewRect = await getViewRect();
|
|||
|
|
|
|||
|
|
if (viewRect == null) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算单元格宽度（总宽度除以7列）
|
|||
|
|
const cellSize = viewRect.width / 7;
|
|||
|
|
|
|||
|
|
// 更新渲染配置
|
|||
|
|
cellWidth.value = cellSize;
|
|||
|
|
|
|||
|
|
// 遍历日期矩阵进行绘制
|
|||
|
|
for (let rowIndex = 0; rowIndex < dateMatrix.value.length; rowIndex++) {
|
|||
|
|
const weekRow = dateMatrix.value[rowIndex];
|
|||
|
|
for (let colIndex = 0; colIndex < weekRow.length; colIndex++) {
|
|||
|
|
const dateCell = weekRow[colIndex];
|
|||
|
|
|
|||
|
|
if (!dateCell.isHide) {
|
|||
|
|
drawSingleCell(dateCell, colIndex, rowIndex);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ctx!.update(); // 更新画布显示
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理日期单元格选择逻辑
|
|||
|
|
* @param dateCell 被点击的日期单元格
|
|||
|
|
*/
|
|||
|
|
function selectDateCell(dateCell: DateCell) {
|
|||
|
|
// 隐藏或禁用的日期不可选择
|
|||
|
|
if (dateCell.isHide || dateCell.isDisabled) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (props.mode == "single") {
|
|||
|
|
// 单选模式：直接替换选中日期
|
|||
|
|
selectedDates.value = [dateCell.fullDate];
|
|||
|
|
emit("update:modelValue", dateCell.fullDate);
|
|||
|
|
} else if (props.mode == "multiple") {
|
|||
|
|
// 多选模式：切换选中状态
|
|||
|
|
const existingIndex = selectedDates.value.indexOf(dateCell.fullDate);
|
|||
|
|
|
|||
|
|
if (existingIndex >= 0) {
|
|||
|
|
// 已选中则移除
|
|||
|
|
selectedDates.value.splice(existingIndex, 1);
|
|||
|
|
} else {
|
|||
|
|
// 未选中则添加
|
|||
|
|
selectedDates.value.push(dateCell.fullDate);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 范围选择模式
|
|||
|
|
if (selectedDates.value.length == 0) {
|
|||
|
|
// 第一次点击：设置起始日期
|
|||
|
|
selectedDates.value = [dateCell.fullDate];
|
|||
|
|
} else if (selectedDates.value.length == 1) {
|
|||
|
|
// 第二次点击：设置结束日期
|
|||
|
|
const startDate = dayUts(selectedDates.value[0]);
|
|||
|
|
const endDate = dayUts(dateCell.fullDate);
|
|||
|
|
|
|||
|
|
if (endDate.isBefore(startDate)) {
|
|||
|
|
// 结束日期早于开始日期时自动交换
|
|||
|
|
selectedDates.value = [dateCell.fullDate, selectedDates.value[0]];
|
|||
|
|
} else {
|
|||
|
|
selectedDates.value = [selectedDates.value[0], dateCell.fullDate];
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 已有范围时重新开始选择
|
|||
|
|
selectedDates.value = [dateCell.fullDate];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 发射更新事件
|
|||
|
|
emit("update:date", [...selectedDates.value]);
|
|||
|
|
emit("change", selectedDates.value);
|
|||
|
|
|
|||
|
|
// 重新计算日历数据并重绘
|
|||
|
|
calculateDateMatrix();
|
|||
|
|
renderCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理年月选择器的变化事件
|
|||
|
|
* @param yearMonthArray [年份, 月份] 数组
|
|||
|
|
*/
|
|||
|
|
function onYearMonthChange(yearMonthArray: number[]) {
|
|||
|
|
currentYear.value = yearMonthArray[0];
|
|||
|
|
currentMonth.value = yearMonthArray[1];
|
|||
|
|
|
|||
|
|
// 重新计算日历数据并重绘
|
|||
|
|
calculateDateMatrix();
|
|||
|
|
renderCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理点击事件（APP端点击检测）
|
|||
|
|
*/
|
|||
|
|
async function onTap(e: UniPointerEvent) {
|
|||
|
|
// 获取容器位置信息
|
|||
|
|
const viewRect = await getViewRect();
|
|||
|
|
|
|||
|
|
if (viewRect == null) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算触摸点相对于容器的坐标
|
|||
|
|
const relativeX = e.clientX - viewRect.left;
|
|||
|
|
const relativeY = e.clientY - viewRect.top;
|
|||
|
|
|
|||
|
|
// 根据坐标计算对应的行列索引
|
|||
|
|
const columnIndex = Math.floor(relativeX / cellWidth.value);
|
|||
|
|
const rowIndex = Math.floor(relativeY / cellHeight.value);
|
|||
|
|
|
|||
|
|
// 边界检查：确保索引在有效范围内
|
|||
|
|
if (
|
|||
|
|
rowIndex < 0 ||
|
|||
|
|
rowIndex >= dateMatrix.value.length ||
|
|||
|
|
columnIndex < 0 ||
|
|||
|
|
columnIndex >= 7
|
|||
|
|
) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const targetDateCell = dateMatrix.value[rowIndex][columnIndex];
|
|||
|
|
selectDateCell(targetDateCell);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 切换到上一个月
|
|||
|
|
*/
|
|||
|
|
function gotoPrevMonth() {
|
|||
|
|
const [newYear, newMonth] = dayUts(`${currentYear.value}-${currentMonth.value}-01`)
|
|||
|
|
.subtract(1, "month")
|
|||
|
|
.toArray();
|
|||
|
|
|
|||
|
|
currentYear.value = newYear;
|
|||
|
|
currentMonth.value = newMonth;
|
|||
|
|
|
|||
|
|
// 重新计算并渲染日历
|
|||
|
|
calculateDateMatrix();
|
|||
|
|
renderCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 切换到下一个月
|
|||
|
|
*/
|
|||
|
|
function gotoNextMonth() {
|
|||
|
|
const [newYear, newMonth] = dayUts(`${currentYear.value}-${currentMonth.value}-01`)
|
|||
|
|
.add(1, "month")
|
|||
|
|
.toArray();
|
|||
|
|
|
|||
|
|
currentYear.value = newYear;
|
|||
|
|
currentMonth.value = newMonth;
|
|||
|
|
|
|||
|
|
// 重新计算并渲染日历
|
|||
|
|
calculateDateMatrix();
|
|||
|
|
renderCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 解析选中日期
|
|||
|
|
*/
|
|||
|
|
function parseDate(flag: boolean | null = null) {
|
|||
|
|
// 根据选择模式初始化选中日期
|
|||
|
|
if (props.mode == "single") {
|
|||
|
|
selectedDates.value = props.modelValue != null ? [props.modelValue] : [];
|
|||
|
|
} else {
|
|||
|
|
selectedDates.value = [...props.date];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取初始显示日期（优先使用选中日期，否则使用当前日期）
|
|||
|
|
let [year, month] = dayUts(first(selectedDates.value)).toArray();
|
|||
|
|
|
|||
|
|
if (flag == true) {
|
|||
|
|
year = props.year ?? year;
|
|||
|
|
month = props.month ?? month;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
currentYear.value = year;
|
|||
|
|
currentMonth.value = month;
|
|||
|
|
|
|||
|
|
// 计算初始日历数据
|
|||
|
|
calculateDateMatrix();
|
|||
|
|
|
|||
|
|
// 渲染日历视图
|
|||
|
|
renderCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件挂载时的初始化逻辑
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 解析日期
|
|||
|
|
parseDate(true);
|
|||
|
|
|
|||
|
|
// 监听单选模式的值变化
|
|||
|
|
watch(
|
|||
|
|
computed(() => props.modelValue ?? ""),
|
|||
|
|
(newValue: string) => {
|
|||
|
|
selectedDates.value = [newValue];
|
|||
|
|
parseDate();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 监听多选/范围模式的值变化
|
|||
|
|
watch(
|
|||
|
|
computed(() => props.date),
|
|||
|
|
(newDateArray: string[]) => {
|
|||
|
|
selectedDates.value = [...newDateArray];
|
|||
|
|
parseDate();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 重新渲染
|
|||
|
|
watch(
|
|||
|
|
computed(() => [props.dateConfig, props.showOtherMonth]),
|
|||
|
|
() => {
|
|||
|
|
calculateDateMatrix();
|
|||
|
|
renderCalendar();
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
deep: true
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/* 日历组件主容器 */
|
|||
|
|
.cl-calendar {
|
|||
|
|
@apply relative;
|
|||
|
|
|
|||
|
|
/* 头部导航栏样式 */
|
|||
|
|
&__header {
|
|||
|
|
@apply flex flex-row items-center justify-between p-3 w-full;
|
|||
|
|
|
|||
|
|
/* 上一月/下一月按钮样式 */
|
|||
|
|
&-prev,
|
|||
|
|
&-next {
|
|||
|
|
@apply flex flex-row items-center justify-center rounded-full bg-surface-100;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
|
|||
|
|
/* 暗色模式适配 */
|
|||
|
|
&.is-dark {
|
|||
|
|
@apply bg-surface-700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 当前年月显示区域 */
|
|||
|
|
&-date {
|
|||
|
|
@apply flex flex-row items-center justify-center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 星期标题行样式 */
|
|||
|
|
&__weeks {
|
|||
|
|
@apply flex flex-row;
|
|||
|
|
|
|||
|
|
/* 单个星期标题样式 */
|
|||
|
|
&-item {
|
|||
|
|
@apply flex flex-row items-center justify-center flex-1;
|
|||
|
|
height: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 日期网格容器样式 */
|
|||
|
|
&__view {
|
|||
|
|
@apply w-full;
|
|||
|
|
|
|||
|
|
// #ifndef APP
|
|||
|
|
/* 日期行样式 */
|
|||
|
|
&-row {
|
|||
|
|
@apply flex flex-row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 日期单元格样式 */
|
|||
|
|
&-cell {
|
|||
|
|
@apply flex-1 flex flex-col items-center justify-center relative;
|
|||
|
|
height: 80rpx;
|
|||
|
|
|
|||
|
|
/* 隐藏状态（相邻月份日期） */
|
|||
|
|
&.is-hide {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 禁用状态 */
|
|||
|
|
&.is-disabled {
|
|||
|
|
@apply opacity-50;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|