yrq/----
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload project source code

Browse Source
This commit is contained in:
1346185973@qq.com
2026-04-30 18:49:43 +08:00
commit 9b394ba682
2277 changed files with 660945 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

576
前端源码/uni-app/components/MysticDatePicker.vue Normal file
View File

@@ -0,0 +1,576 @@
<template>
<transition name="mystic-date-picker">
<div v-if="isOpen" class="mystic-date-picker-overlay">
<!-- Backdrop -->
<div class="mystic-date-picker-backdrop" @click="handleClose"></div>
<!-- Modal Content -->
<div class="mystic-date-picker-modal">
<!-- Header -->
<div class="mystic-date-picker-header">
<div class="mystic-date-picker-close" @click="handleClose">
<CloseIcon :size="22" class="mystic-date-picker-icon" />
</div>
<span class="mystic-date-picker-title">{{ title }}</span>
<div class="mystic-date-picker-confirm" @click="handleConfirm">
<CheckIcon :size="22" class="mystic-date-picker-icon" />
</div>
</div>
<!-- Picker View -->
<div class="mystic-date-picker-view">
<div class="mystic-date-picker-indicator"></div>
<!-- Year Column -->
<div class="mystic-date-picker-column" @scroll="handleScroll($event, 0)">
<div class="mystic-date-picker-padding"></div>
<div v-for="(y, idx) in years" :key="y" :ref="el => setColumnRef(el, 0, idx)"
class="mystic-date-picker-item" :class="{ active: pickerValue[0] === idx }" @click="selectItem(0, idx)">
<span>{{ y }}年</span>
</div>
<div class="mystic-date-picker-padding"></div>
</div>
<!-- Month Column -->
<div class="mystic-date-picker-column" @scroll="handleScroll($event, 1)">
<div class="mystic-date-picker-padding"></div>
<div v-for="(m, idx) in months" :key="idx" :ref="el => setColumnRef(el, 1, idx)"
class="mystic-date-picker-item" :class="{ active: pickerValue[1] === idx }" @click="selectItem(1, idx)">
<span>{{ m }}</span>
</div>
<div class="mystic-date-picker-padding"></div>
</div>
<!-- Day Column -->
<div class="mystic-date-picker-column" @scroll="handleScroll($event, 2)">
<div class="mystic-date-picker-padding"></div>
<div v-for="(d, idx) in days" :key="d.val" :ref="el => setColumnRef(el, 2, idx)"
class="mystic-date-picker-item" :class="{ active: pickerValue[2] === idx }" @click="selectItem(2, idx)">
<span>{{ d.name }}</span>
</div>
<div class="mystic-date-picker-padding"></div>
</div>
<!-- Time Column -->
<div class="mystic-date-picker-column" @scroll="handleScroll($event, 3)">
<div class="mystic-date-picker-padding"></div>
<div v-for="(s, idx) in shichenOptions" :key="s.id" :ref="el => setColumnRef(el, 3, idx)"
class="mystic-date-picker-item mystic-date-picker-item-time" :class="{ active: pickerValue[3] === idx }"
@click="selectItem(3, idx)">
<span class="mystic-date-picker-time-name">{{ s.name }}</span>
<span class="mystic-date-picker-time-detail">{{ s.time }}</span>
</div>
<div class="mystic-date-picker-padding"></div>
</div>
</div>
<!-- Footer Tip -->
<div class="mystic-date-picker-footer">
<span class="mystic-date-picker-tip">{{ footerTip || '滑动列表选择 · 系统自动换算干支' }}</span>
</div>
</div>
</div>
</transition>
</template>
<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue';
import CloseIcon from './icons/CloseIcon.vue';
import CheckIcon from './icons/CheckIcon.vue';
interface Props {
isOpen: boolean;
title?: string;
defaultValue?: string;
/** 年份列下界（公历，含）。与 maxYear 同时用于自定义区间（如择吉期望范围可选至未来多年） */
minYear?: number;
/** 年份列上界（公历，含） */
maxYear?: number;
/** 底部提示，便于与其它场景日期选择区分 */
footerTip?: string;
/** 为 true 时公历日期不可晚于「今天」（用于择吉期望开始日等） */
capAtToday?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
title: '请择良辰',
defaultValue: '',
minYear: undefined,
maxYear: undefined,
footerTip: '',
capAtToday: false,
});
const emit = defineEmits<{
close: [];
confirm: [val: string, apiVal: string];
}>();
// 时辰对照表
const SHI_CHEN = [
{ id: 'zi', name: '子时', time: '23:00-00:59', hour: '00:00:00' },
{ id: 'chou', name: '丑时', time: '01:00-02:59', hour: '02:00:00' },
{ id: 'yin', name: '寅时', time: '03:00-04:59', hour: '04:00:00' },
{ id: 'mao', name: '卯时', time: '05:00-06:59', hour: '06:00:00' },
{ id: 'chen', name: '辰时', time: '07:00-08:59', hour: '08:00:00' },
{ id: 'si', name: '巳时', time: '09:00-10:59', hour: '10:00:00' },
{ id: 'wu', name: '午时', time: '11:00-12:59', hour: '12:00:00' },
{ id: 'wei', name: '未时', time: '13:00-14:59', hour: '14:00:00' },
{ id: 'shen', name: '申时', time: '15:00-16:59', hour: '16:00:00' },
{ id: 'you', name: '酉时', time: '17:00-18:59', hour: '18:00:00' },
{ id: 'xu', name: '戌时', time: '19:00-20:59', hour: '20:00:00' },
{ id: 'hai', name: '亥时', time: '21:00-22:59', hour: '22:00:00' },
];
const CH_NUM = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
const MONTHS = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
/**
* 年份列（降序）：默认从当年起共 86 年（生辰等场景，不可超过当年）；
* 若传入 minYear/maxYear 则按该区间生成（用于择吉期望日期等可选未来多年）。
*/
const years = computed(() => {
const nowY = new Date().getFullYear();
const useCustom = props.minYear !== undefined || props.maxYear !== undefined;
if (!useCustom) {
const maxY = nowY;
const minY = maxY - 85;
return Array.from({ length: 86 }, (_, i) => maxY - i);
}
const maxY = props.maxYear ?? nowY;
const minY = props.minYear ?? maxY - 85;
const hi = Math.max(minY, maxY);
const lo = Math.min(minY, maxY);
return Array.from({ length: hi - lo + 1 }, (_, i) => hi - i);
});
const months = MONTHS;
const shichenOptions = SHI_CHEN;
const pickerValue = ref([0, 0, 0, 0]);
const columnRefs = ref<Array<Array<HTMLElement | null>>>([[], [], [], []]);
const ITEM_HEIGHT = 50;
const setColumnRef = (el: any, columnIdx: number, itemIdx: number) => {
if (el) {
if (!columnRefs.value[columnIdx]) {
columnRefs.value[columnIdx] = [];
}
columnRefs.value[columnIdx][itemIdx] = el;
}
};
const isLeapYear = (year: number): boolean => {
return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
};
const getDaysInMonth = (year: number, month: number): number => {
const daysMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (month === 1 && isLeapYear(year)) {
return 29;
}
return daysMap[month];
};
const getDayName = (d: number): string => {
if (d <= 10) return `初${CH_NUM[d]}`;
if (d === 20) return '二十';
if (d === 30) return '三十';
if (d < 20) return `十${CH_NUM[d - 10]}`;
if (d < 30) return `廿${CH_NUM[d - 20]}`;
return `三十${CH_NUM[d - 30]}`;
};
const days = computed(() => {
const [yearIdx, monthIdx] = pickerValue.value;
const year = years.value[yearIdx] || 2000;
const daysCount = getDaysInMonth(year, monthIdx);
return Array.from({ length: daysCount }, (_, i) => ({
val: i + 1,
name: getDayName(i + 1)
}));
});
const scrollToIndex = (columnIdx: number, index: number, smooth = true) => {
const column = document.querySelectorAll('.mystic-date-picker-column')[columnIdx] as HTMLElement;
if (column) {
const scrollTop = index * ITEM_HEIGHT;
column.scrollTo({
top: scrollTop,
behavior: smooth ? 'smooth' : 'auto'
});
}
};
const selectItem = (columnIdx: number, index: number) => {
let newValue = [...pickerValue.value];
newValue[columnIdx] = index;
// 检查日期是否超出当月天数
if (columnIdx === 0 || columnIdx === 1) {
const [yearIdx, monthIdx] = newValue;
const year = years.value[yearIdx] || 2000;
const maxDays = getDaysInMonth(year, monthIdx);
if (newValue[2] >= maxDays) {
newValue[2] = maxDays - 1;
}
}
newValue = clampPickerValueToTodayMax(newValue, years.value);
pickerValue.value = newValue;
nextTick(() => {
pickerValue.value.forEach((val, idx) => {
scrollToIndex(idx, val, false);
});
});
};
let scrollTimer: number | null = null;
const handleScroll = (e: Event, columnIdx: number) => {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = window.setTimeout(() => {
const target = e.target as HTMLElement;
const scrollTop = target.scrollTop;
const index = Math.round(scrollTop / ITEM_HEIGHT);
selectItem(columnIdx, index);
}, 150);
};
const parseDefaultValue = (val: string, yearList: number[]) => {
if (!val) return null;
const yearMatch = val.match(/(\d+)年/);
const monthMatch = val.match(/年(.+?)(?:初|十|廿|三十)/);
const shichenMatch = val.match(/(子|丑|寅|卯|辰|巳|午|未|申|酉|戌|亥)时/);
if (!yearMatch) return null;
const year = parseInt(yearMatch[1]);
const yearIdx = yearList.findIndex(y => y === year);
let monthIdx = 0;
if (monthMatch) {
monthIdx = MONTHS.findIndex(m => m === monthMatch[1]);
if (monthIdx < 0) monthIdx = 0;
}
let dayIdx = 0;
const dayPart = val.replace(/\d+年/, '').replace(/.*月/, '').replace(/(子|丑|寅|卯|辰|巳|午|未|申|酉|戌|亥)时/, '');
if (dayPart) {
for (let i = 1; i <= 31; i++) {
if (getDayName(i) === dayPart) {
dayIdx = i - 1;
break;
}
}
}
let shichenIdx = 0;
if (shichenMatch) {
shichenIdx = SHI_CHEN.findIndex(s => s.name.startsWith(shichenMatch[1]));
if (shichenIdx < 0) shichenIdx = 0;
}
return {
yearIdx: yearIdx >= 0 ? yearIdx : 0,
monthIdx,
dayIdx,
shichenIdx
};
};
const clampPickerDay = (parts: number[], yearList: number[]): number[] => {
if (!yearList.length) return [0, 0, 0, 0];
const yearIdx = Math.min(Math.max(0, parts[0]), yearList.length - 1);
const monthIdx = Math.min(Math.max(0, parts[1]), 11);
const y = yearList[yearIdx] ?? new Date().getFullYear();
const maxD = getDaysInMonth(y, monthIdx);
const dayIdx = Math.min(Math.max(0, parts[2]), maxD - 1);
const shichenIdx = Math.min(Math.max(0, parts[3]), SHI_CHEN.length - 1);
return [yearIdx, monthIdx, dayIdx, shichenIdx];
};
const getTodayCalendar = () => {
const n = new Date();
return { y: n.getFullYear(), m: n.getMonth(), d: n.getDate() };
};
/** capAtToday：将公历日期限制在「今天」及之前 */
const clampPickerValueToTodayMax = (parts: number[], yearList: number[]): number[] => {
let next = clampPickerDay(parts, yearList);
if (!props.capAtToday || !yearList.length) return next;
const t = getTodayCalendar();
let [yi, mi, di, si] = next;
const sy = yearList[yi];
if (sy > t.y) {
const ti = yearList.findIndex((yr) => yr === t.y);
if (ti >= 0) next = clampPickerDay([ti, t.m, t.d - 1, si], yearList);
return next;
}
if (sy < t.y) return next;
if (mi > t.m) {
next = clampPickerDay([yi, t.m, t.d - 1, si], yearList);
return next;
}
if (mi < t.m) return next;
if (di > t.d - 1) {
next = clampPickerDay([yi, mi, t.d - 1, si], yearList);
}
return next;
};
watch(() => props.isOpen, (newVal) => {
if (newVal) {
const ylist = years.value;
const parsed = parseDefaultValue(props.defaultValue, ylist);
if (parsed) {
const yi = Math.min(Math.max(0, parsed.yearIdx), Math.max(0, ylist.length - 1));
pickerValue.value = clampPickerValueToTodayMax(
[yi, parsed.monthIdx, parsed.dayIdx, parsed.shichenIdx],
ylist
);
} else {
const now = new Date();
const currentYear = now.getFullYear();
const yearIdx = ylist.findIndex(y => y === currentYear);
const monthIdx = now.getMonth();
const dayIdx = now.getDate() - 1;
const y = yearIdx >= 0 ? ylist[yearIdx] : ylist[0];
const pickY = yearIdx >= 0 ? yearIdx : 0;
pickerValue.value = clampPickerValueToTodayMax(
[
pickY,
monthIdx,
Math.min(dayIdx, getDaysInMonth(y, monthIdx) - 1),
0,
],
ylist
);
}
nextTick(() => {
pickerValue.value.forEach((val, idx) => {
scrollToIndex(idx, val, false);
});
});
}
});
const handleClose = () => {
emit('close');
};
const handleConfirm = () => {
const ylist = years.value;
pickerValue.value = clampPickerValueToTodayMax(pickerValue.value, ylist);
const [yearIdx, monthIdx, dayIdx, shichenIdx] = pickerValue.value;
const selectedYear = years.value[yearIdx] ?? years.value[0];
const selectedMonth = MONTHS[monthIdx];
const selectedDay = days.value[dayIdx]?.name || getDayName(dayIdx + 1);
const selectedShichen = shichenOptions[shichenIdx].name;
const displayStr = `${selectedYear}年${selectedMonth}${selectedDay}${selectedShichen}`;
const month = String(monthIdx + 1).padStart(2, '0');
const day = String(dayIdx + 1).padStart(2, '0');
const hour = shichenOptions[shichenIdx].hour;
const apiStr = `${selectedYear}-${month}-${day} ${hour}`;
emit('confirm', displayStr, apiStr);
handleClose();
};
</script>
<style scoped>
.mystic-date-picker-overlay {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
align-items: flex-end;
justify-content: center;
}
.mystic-date-picker-backdrop {
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.6);
backdrop-filter: blur(4px);
}
.mystic-date-picker-modal {
position: relative;
width: 100%;
background: #fcfaf5;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
overflow: hidden;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
border-top: 4px solid #8b2323;
}
.mystic-date-picker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #eaddcf;
background: #f9f7f2;
}
.mystic-date-picker-close,
.mystic-date-picker-confirm {
padding: 8px;
color: #5a5a5a;
cursor: pointer;
transition: opacity 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.mystic-date-picker-close:active,
.mystic-date-picker-confirm:active {
opacity: 0.6;
}
.mystic-date-picker-confirm {
color: #8b2323;
}
.mystic-date-picker-icon {
display: block;
}
.mystic-date-picker-title {
font-size: 18px;
font-weight: bold;
color: #2c2c2c;
letter-spacing: 0.3em;
font-family: SimSun, "Songti SC", serif;
}
.mystic-date-picker-view {
height: 300px;
width: 100%;
display: flex;
position: relative;
overflow: hidden;
}
.mystic-date-picker-indicator {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 50px;
transform: translateY(-50%);
border-top: 1px solid #dcd3c9;
border-bottom: 1px solid #dcd3c9;
background: rgba(139, 35, 35, 0.02);
pointer-events: none;
z-index: 1;
}
.mystic-date-picker-column {
flex: 1;
height: 100%;
overflow-y: auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
}
.mystic-date-picker-column::-webkit-scrollbar {
display: none;
}
.mystic-date-picker-padding {
height: 125px;
flex-shrink: 0;
}
.mystic-date-picker-item {
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
color: #8a8a8a;
font-family: SimSun, "Songti SC", serif;
cursor: pointer;
transition: all 0.3s;
scroll-snap-align: center;
flex-shrink: 0;
}
.mystic-date-picker-item.active {
color: #2c2c2c;
font-weight: bold;
font-size: 16px;
}
.mystic-date-picker-item-time {
gap: 2px;
}
.mystic-date-picker-time-name {
font-weight: bold;
font-size: 14px;
}
.mystic-date-picker-item.active .mystic-date-picker-time-name {
font-size: 16px;
}
.mystic-date-picker-time-detail {
font-size: 10px;
opacity: 0.6;
color: #8a8a8a;
}
.mystic-date-picker-footer {
background: #f9f7f2;
padding: 12px;
text-align: center;
border-top: 1px solid #eaddcf;
}
.mystic-date-picker-tip {
font-size: 11px;
color: #8a8a8a;
letter-spacing: 0.1em;
}
/* Transition */
.mystic-date-picker-enter-active,
.mystic-date-picker-leave-active {
transition: opacity 0.3s;
}
.mystic-date-picker-enter-active .mystic-date-picker-modal,
.mystic-date-picker-leave-active .mystic-date-picker-modal {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mystic-date-picker-enter-from,
.mystic-date-picker-leave-to {
opacity: 0;
}
.mystic-date-picker-enter-from .mystic-date-picker-modal,
.mystic-date-picker-leave-to .mystic-date-picker-modal {
transform: translateY(100%);
}
</style>