From dd8534eaad36102c094eb4f6f75ca16c35d4fc0c Mon Sep 17 00:00:00 2001 From: Timi Date: Mon, 3 Aug 2026 18:54:28 +0800 Subject: [PATCH] add customer lunar birthdate --- src/components/BirthdatePicker.vue | 262 ++++++++++++++++++++++++ src/pages/management/CustomerDetail.vue | 52 +++++ src/pages/management/CustomerEdit.vue | 41 +++- src/types/Customer.ts | 3 + src/utils/LunarCalendar.ts | 221 ++++++++++++++++++++ 5 files changed, 577 insertions(+), 2 deletions(-) create mode 100644 src/components/BirthdatePicker.vue create mode 100644 src/utils/LunarCalendar.ts diff --git a/src/components/BirthdatePicker.vue b/src/components/BirthdatePicker.vue new file mode 100644 index 0000000..fb96332 --- /dev/null +++ b/src/components/BirthdatePicker.vue @@ -0,0 +1,262 @@ + + + + + diff --git a/src/pages/management/CustomerDetail.vue b/src/pages/management/CustomerDetail.vue index 80e27f0..49b965f 100644 --- a/src/pages/management/CustomerDetail.vue +++ b/src/pages/management/CustomerDetail.vue @@ -5,6 +5,18 @@ :customer="customer" /> + + + + + @@ -162,6 +174,7 @@ import { useSettingStore } from "@/store/settingStore"; import type { BodyAreaValue, Customer } from "@/types/Customer"; import { getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer"; import { gaoPermissionCodes } from "@/utils/gaoPermission"; +import { LunarCalendar } from "@/utils/LunarCalendar"; defineOptions({ name: "CustomerDetail" @@ -180,6 +193,7 @@ const scanPopupVisible = ref(false); const pendingInvitee = ref(); const scanStatus = ref("点击扫码开始识别。"); const removing = ref(false); +const showSolarBirthdate = ref(false); let latestDecodedText = ""; const inviter = computed(() => customer.value?.introducerCustomer); @@ -189,6 +203,10 @@ const creatorName = computed(() => { return creatorUser?.nick || creatorUser?.name || customer.value?.creatorUserId || "无"; }); const createdAtText = computed(() => formatTime(customer.value?.createdAt)); +const isLunarBirthdate = computed(() => customer.value?.birthdateCalendar === "LUNAR" && !!customer.value?.birthdate); +const solarBirthdateText = computed(() => formatSolarBirthdate(customer.value)); +const birthdateText = computed(() => showSolarBirthdate.value && isLunarBirthdate.value ? solarBirthdateText.value : formatBirthdate(customer.value)); +const ageText = computed(() => customer.value?.age === undefined || customer.value?.age === null ? "无" : `${customer.value.age} 岁`); const selectedAreas = computed({ get() { return normalizeBodyAreaValue(customer.value?.conditioningPart); @@ -203,10 +221,12 @@ async function loadCustomer(): Promise { if (!id) { customer.value = undefined; invitees.value = []; + showSolarBirthdate.value = false; return; } try { + showSolarBirthdate.value = false; customer.value = await CustomerAPI.detail(id); await loadInvitees(); } catch (err) { @@ -297,6 +317,27 @@ function formatTime(value?: number): string { return Time.formatDateTime(date); } +function formatBirthdate(value?: Customer): string { + if (!value?.birthdate) { + return "无"; + } + if (value.birthdateCalendar !== "LUNAR") { + return `公历 ${value.birthdate}`; + } + const lunarDate = LunarCalendar.solarToLunar(value.birthdate); + return lunarDate ? LunarCalendar.formatLunarDate(lunarDate) : "农历日期"; +} + +function formatSolarBirthdate(value?: Customer): string { + return value?.birthdate ? `公历 ${value.birthdate}` : "无"; +} + +function toggleBirthdateText(): void { + if (isLunarBirthdate.value) { + showSolarBirthdate.value = !showSolarBirthdate.value; + } +} + function isCustomerAncestor(invitee: Customer): boolean { if (!customer.value?.id) { return false; @@ -519,6 +560,17 @@ watch(() => route.params.id, async () => { } } +.birthdate-trigger { + padding: 0; + border: 0; + color: var(--td-text-color-primary); + font: inherit; + background: transparent; + text-align: right; + text-decoration: underline dotted; + text-underline-offset: .2rem; +} + .scan-popup { gap: 1rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem; diff --git a/src/pages/management/CustomerEdit.vue b/src/pages/management/CustomerEdit.vue index 3344ab5..4b1772c 100644 --- a/src/pages/management/CustomerEdit.vue +++ b/src/pages/management/CustomerEdit.vue @@ -34,11 +34,18 @@ borderless /> + + + @@ -157,7 +164,7 @@ import CodeScanner from "@/components/CodeScanner.vue"; import CustomerSelector from "@/components/CustomerSelector.vue"; import PhotoField from "@/components/PhotoField.vue"; import { useSettingStore } from "@/store/settingStore"; -import type { BodyAreaValue, Customer, CustomerGender } from "@/types/Customer"; +import type { BodyAreaValue, Customer, CustomerBirthdateCalendar, CustomerGender } from "@/types/Customer"; import { createBodyAreaValue, getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer"; import { gaoPermissionCodes } from "@/utils/gaoPermission"; import { compressUploadImage } from "@/utils/imageCompression"; @@ -194,6 +201,8 @@ const formModel = reactive({ photoURL: "", telephone: "", age: "", + birthdate: "", + birthdateCalendar: "SOLAR" as CustomerBirthdateCalendar, address: "", referrer: "", disease: "", @@ -209,6 +218,8 @@ function resetFormModel(): void { photoURL: "", telephone: "", age: "", + birthdate: "", + birthdateCalendar: "SOLAR", address: "", referrer: "", disease: "", @@ -258,6 +269,8 @@ async function fillForm(): Promise { photoURL: getCustomerPhotoURL(customer), telephone: customer.telephone || "", age: customer.age === undefined || customer.age === null ? "" : String(customer.age), + birthdate: customer.birthdate || "", + birthdateCalendar: customer.birthdateCalendar || "SOLAR", address: customer.address || "", referrer: customer.introducerCustomer?.name || "", disease: customer.disease || "", @@ -406,6 +419,8 @@ async function saveCustomer(): Promise { name: formModel.name, gender: formModel.gender || undefined, age: Number(formModel.age) || undefined, + birthdate: formModel.birthdate || null, + birthdateCalendar: formModel.birthdate ? formModel.birthdateCalendar : undefined, telephone: formModel.telephone, address: formModel.address, remark: formModel.note, @@ -463,6 +478,28 @@ watch(() => formModel.referrer, (value) => { } }); +watch(() => formModel.birthdate, (value) => { + if (value) { + formModel.age = String(calculateAge(value)); + } +}); + +function calculateAge(value: string): number { + const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value); + if (!match) { + return 0; + } + const birthYear = Number(match[1]); + const birthMonth = Number(match[2]); + const birthDay = Number(match[3]); + const today = new Date(); + let age = today.getFullYear() - birthYear; + if (today.getMonth() + 1 < birthMonth || (today.getMonth() + 1 === birthMonth && today.getDate() < birthDay)) { + age--; + } + return Math.max(age, 0); +} + onMounted(async () => { await fillForm(); }); diff --git a/src/types/Customer.ts b/src/types/Customer.ts index 73f0c97..5845188 100644 --- a/src/types/Customer.ts +++ b/src/types/Customer.ts @@ -1,6 +1,7 @@ import type { Attachment, Model, User } from "timi-web"; export type CustomerGender = "MALE" | "FEMALE"; +export type CustomerBirthdateCalendar = "SOLAR" | "LUNAR"; export type BodyAreaValue = { selectedCodeList: string[]; @@ -11,6 +12,8 @@ export type Customer = { name?: string; gender?: CustomerGender; age?: number; + birthdate?: string | null; + birthdateCalendar?: CustomerBirthdateCalendar; telephone?: string; address?: string; remark?: string; diff --git a/src/utils/LunarCalendar.ts b/src/utils/LunarCalendar.ts new file mode 100644 index 0000000..cbb9050 --- /dev/null +++ b/src/utils/LunarCalendar.ts @@ -0,0 +1,221 @@ +export type LunarDate = { + year: number; + month: number; + day: number; + isLeap: boolean; +}; + +const START_YEAR = 1900; +const START_DATE = Date.UTC(1900, 0, 31); +const DAY_MS = 24 * 60 * 60 * 1000; +const STEMS = ["甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"]; +const BRANCHES = ["子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"]; +const MONTH_NAMES = ["", "正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "冬月", "腊月"]; +const DAY_NAMES = [ + "", "初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十", + "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十", + "廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十" +]; + +// 1900 年至 2100 年的农历数据，每个数字描述一个农历年的闰月和大小月。 +const LUNAR_INFO = [ + 0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, + 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, + 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, + 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, + 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, + 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0, + 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, + 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, + 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, + 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, + 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, + 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, + 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, + 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, + 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, + 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, + 0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, + 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, + 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, + 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, + 0x0d520 +]; + +export class LunarCalendar { + static readonly startYear = START_YEAR; + static readonly endYear = START_YEAR + LUNAR_INFO.length - 1; + + static solarToLunar(dateValue: string | Date): LunarDate | undefined { + const date = this.parseSolarDate(dateValue); + if (!date || !this.isSupportedSolarDate(date)) { + return undefined; + } + + let offset = Math.floor((Date.UTC(date.year, date.month - 1, date.day) - START_DATE) / DAY_MS); + let year = START_YEAR; + while (year <= this.endYear && offset >= this.yearDays(year)) { + offset -= this.yearDays(year); + year++; + } + if (year > this.endYear) { + return undefined; + } + + const leapMonth = this.leapMonth(year); + let month = 1; + let isLeap = false; + while (month <= 12) { + const days = isLeap ? this.leapDays(year) : this.monthDays(year, month); + if (offset < days) { + break; + } + offset -= days; + if (leapMonth === month && !isLeap) { + isLeap = true; + } else { + isLeap = false; + month++; + } + } + return month > 12 ? undefined : { year, month, day: offset + 1, isLeap }; + } + + static lunarToSolar(lunarDate: LunarDate): string | undefined { + if (!this.isValidLunarDate(lunarDate)) { + return undefined; + } + + let offset = 0; + for (let year = START_YEAR; year < lunarDate.year; year++) { + offset += this.yearDays(year); + } + const leapMonth = this.leapMonth(lunarDate.year); + for (let month = 1; month < lunarDate.month; month++) { + offset += this.monthDays(lunarDate.year, month); + if (month === leapMonth) { + offset += this.leapDays(lunarDate.year); + } + } + if (lunarDate.isLeap) { + offset += this.monthDays(lunarDate.year, lunarDate.month); + } + offset += lunarDate.day - 1; + const date = new Date(START_DATE + offset * DAY_MS); + return this.formatSolarDate({ + year: date.getUTCFullYear(), + month: date.getUTCMonth() + 1, + day: date.getUTCDate() + }); + } + + static formatLunarDate(lunarDate: LunarDate): string { + const leapText = lunarDate.isLeap ? "闰" : ""; + return `${this.getYearLabel(lunarDate.year)} ${leapText}${MONTH_NAMES[lunarDate.month]} ${DAY_NAMES[lunarDate.day]}`; + } + + static getYearLabel(year: number): string { + const stemIndex = this.mod(year - 4, STEMS.length); + const branchIndex = this.mod(year - 4, BRANCHES.length); + return `${STEMS[stemIndex]}${BRANCHES[branchIndex]}年(${year})`; + } + + static getMonthOptions(year: number): Array<{ value: string; month: number; isLeap: boolean; label: string }> { + if (!this.isSupportedLunarYear(year)) { + return []; + } + const options: Array<{ value: string; month: number; isLeap: boolean; label: string }> = []; + const leapMonth = this.leapMonth(year); + for (let month = 1; month <= 12; month++) { + options.push({ value: `${month}`, month, isLeap: false, label: MONTH_NAMES[month] }); + if (month === leapMonth) { + options.push({ value: `${month}-leap`, month, isLeap: true, label: `闰${MONTH_NAMES[month]}` }); + } + } + return options; + } + + static getYearOptions(maxDate: string): Array<{ value: string; label: string }> { + const lunarDate = this.solarToLunar(maxDate) ?? { year: this.endYear, month: 12, day: 30, isLeap: false }; + return Array.from({ length: lunarDate.year - START_YEAR + 1 }, (_, index) => { + const year = START_YEAR + index; + return { value: `${year}`, label: this.getYearLabel(year) }; + }); + } + + static getMonthDays(lunarDate: Pick): number { + return lunarDate.isLeap ? this.leapDays(lunarDate.year) : this.monthDays(lunarDate.year, lunarDate.month); + } + + static isValidLunarDate(lunarDate: LunarDate): boolean { + if (!this.isSupportedLunarYear(lunarDate.year) || lunarDate.month < 1 || 12 < lunarDate.month) { + return false; + } + const leapMonth = this.leapMonth(lunarDate.year); + if (lunarDate.isLeap && leapMonth !== lunarDate.month) { + return false; + } + return 1 <= lunarDate.day && lunarDate.day <= this.getMonthDays(lunarDate); + } + + static formatSolarDate(date: { year: number; month: number; day: number }): string { + return `${date.year.toString().padStart(4, "0")}-${date.month.toString().padStart(2, "0")}-${date.day.toString().padStart(2, "0")}`; + } + + static today(): string { + const date = new Date(); + return this.formatSolarDate({ year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }); + } + + private static parseSolarDate(value: string | Date): { year: number; month: number; day: number } | undefined { + if (value instanceof Date) { + return { year: value.getFullYear(), month: value.getMonth() + 1, day: value.getDate() }; + } + const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value); + if (!match) { + return undefined; + } + const year = Number(match[1]); + const month = Number(match[2]); + const day = Number(match[3]); + const date = new Date(Date.UTC(year, month - 1, day)); + return date.getUTCFullYear() === year && date.getUTCMonth() + 1 === month && date.getUTCDate() === day + ? { year, month, day } + : undefined; + } + + private static isSupportedSolarDate(date: { year: number; month: number; day: number }): boolean { + return date.year >= START_YEAR && date.year <= this.endYear; + } + + private static isSupportedLunarYear(year: number): boolean { + return year >= START_YEAR && year <= this.endYear; + } + + private static leapMonth(year: number): number { + return LUNAR_INFO[year - START_YEAR] & 0xf; + } + + private static leapDays(year: number): number { + return this.leapMonth(year) === 0 ? 0 : ((LUNAR_INFO[year - START_YEAR] & 0x10000) !== 0 ? 30 : 29); + } + + private static monthDays(year: number, month: number): number { + return (LUNAR_INFO[year - START_YEAR] & (0x10000 >> month)) !== 0 ? 30 : 29; + } + + private static yearDays(year: number): number { + let days = 348; + const info = LUNAR_INFO[year - START_YEAR]; + for (let mask = 0x8000; mask > 0x8; mask >>= 1) { + if ((info & mask) !== 0) { + days++; + } + } + return days + this.leapDays(year); + } + + private static mod(value: number, divisor: number): number { + return ((value % divisor) + divisor) % divisor; + } +}