add customer lunar birthdate
This commit is contained in:
@@ -0,0 +1,262 @@
|
|||||||
|
<template>
|
||||||
|
<div class="birthdate-picker">
|
||||||
|
<t-radio-group class="mode" v-model="calendarProxy" variant="default-filled">
|
||||||
|
<t-radio :block="false" borderless value="SOLAR">公历</t-radio>
|
||||||
|
<t-radio :block="false" borderless value="LUNAR">农历</t-radio>
|
||||||
|
<t-button
|
||||||
|
v-if="modelValue"
|
||||||
|
class="clear"
|
||||||
|
size="extra-small"
|
||||||
|
@click="clearValue"
|
||||||
|
>
|
||||||
|
清除
|
||||||
|
</t-button>
|
||||||
|
</t-radio-group>
|
||||||
|
<div class="value" @click="openPicker">
|
||||||
|
<span :class="{ placeholder: !displayValue }" v-text="displayValue || placeholder" />
|
||||||
|
<t-icon name="chevron-right" size="1.25rem" />
|
||||||
|
</div>
|
||||||
|
<t-popup v-model="visible" placement="bottom">
|
||||||
|
<t-date-time-picker
|
||||||
|
v-if="calendarProxy === 'SOLAR'"
|
||||||
|
:title="'选择公历出生日期'"
|
||||||
|
mode="date"
|
||||||
|
:value="solarDraft"
|
||||||
|
:start="startDate"
|
||||||
|
:end="today"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
cancel-btn="取消"
|
||||||
|
confirm-btn="确定"
|
||||||
|
@cancel="visible = false"
|
||||||
|
@confirm="handleSolarConfirm"
|
||||||
|
/>
|
||||||
|
<t-picker
|
||||||
|
v-else
|
||||||
|
title="选择农历出生日期"
|
||||||
|
:columns="lunarColumns"
|
||||||
|
:value="lunarPickerValue"
|
||||||
|
cancel-btn="取消"
|
||||||
|
confirm-btn="确定"
|
||||||
|
@pick="handleLunarPick"
|
||||||
|
@cancel="visible = false"
|
||||||
|
@confirm="handleLunarConfirm"
|
||||||
|
/>
|
||||||
|
</t-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { LunarCalendar, type LunarDate } from "@/utils/LunarCalendar";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "BirthdatePicker"
|
||||||
|
});
|
||||||
|
|
||||||
|
type BirthdateCalendar = "SOLAR" | "LUNAR";
|
||||||
|
type PickerValue = string | number;
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
modelValue?: string;
|
||||||
|
calendar?: BirthdateCalendar;
|
||||||
|
placeholder?: string;
|
||||||
|
}>(), {
|
||||||
|
modelValue: "",
|
||||||
|
calendar: "SOLAR",
|
||||||
|
placeholder: "请选择出生日期"
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "update:modelValue", value: string): void;
|
||||||
|
(e: "update:calendar", value: BirthdateCalendar): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const startDate = `${LunarCalendar.startYear}-01-31`;
|
||||||
|
const today = LunarCalendar.today();
|
||||||
|
const visible = ref(false);
|
||||||
|
const solarDraft = ref(today);
|
||||||
|
const lunarDraft = ref<LunarDate>(LunarCalendar.solarToLunar(today) || {
|
||||||
|
year: LunarCalendar.startYear,
|
||||||
|
month: 1,
|
||||||
|
day: 1,
|
||||||
|
isLeap: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const calendarProxy = computed<BirthdateCalendar>({
|
||||||
|
get: () => props.calendar,
|
||||||
|
set: value => emit("update:calendar", value)
|
||||||
|
});
|
||||||
|
const displayValue = computed(() => {
|
||||||
|
if (!props.modelValue) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
if (calendarProxy.value === "SOLAR") {
|
||||||
|
return props.modelValue;
|
||||||
|
}
|
||||||
|
const lunarDate = LunarCalendar.solarToLunar(props.modelValue);
|
||||||
|
return lunarDate ? LunarCalendar.formatLunarDate(lunarDate) : props.modelValue;
|
||||||
|
});
|
||||||
|
const lunarPickerValue = computed(() => [
|
||||||
|
`${lunarDraft.value.year}`,
|
||||||
|
`${lunarDraft.value.month}${lunarDraft.value.isLeap ? "-leap" : ""}`,
|
||||||
|
`${lunarDraft.value.day}`
|
||||||
|
]);
|
||||||
|
const lunarColumns = computed(() => {
|
||||||
|
const yearOptions = LunarCalendar.getYearOptions(today);
|
||||||
|
const monthOptions = LunarCalendar.getMonthOptions(lunarDraft.value.year)
|
||||||
|
.filter(option => isLunarDateSelectable({
|
||||||
|
year: lunarDraft.value.year,
|
||||||
|
month: option.month,
|
||||||
|
day: 1,
|
||||||
|
isLeap: option.isLeap
|
||||||
|
}));
|
||||||
|
const selectedMonth = monthOptions.some(option => option.value === lunarPickerValue.value[1])
|
||||||
|
? lunarPickerValue.value[1]
|
||||||
|
: monthOptions[0]?.value;
|
||||||
|
const selectedOption = monthOptions.find(option => option.value === selectedMonth) || monthOptions[0];
|
||||||
|
const dayCount = selectedOption ? LunarCalendar.getMonthDays({
|
||||||
|
year: lunarDraft.value.year,
|
||||||
|
month: selectedOption.month,
|
||||||
|
isLeap: selectedOption.isLeap
|
||||||
|
}) : 29;
|
||||||
|
const dayOptions = Array.from({ length: dayCount }, (_, index) => {
|
||||||
|
const day = index + 1;
|
||||||
|
return {
|
||||||
|
value: `${day}`,
|
||||||
|
label: LunarCalendar.formatLunarDate({
|
||||||
|
year: lunarDraft.value.year,
|
||||||
|
month: selectedOption?.month || 1,
|
||||||
|
day,
|
||||||
|
isLeap: selectedOption?.isLeap || false
|
||||||
|
})
|
||||||
|
.split(" ")
|
||||||
|
.slice(-1)[0] || `${day}`
|
||||||
|
};
|
||||||
|
}).filter(option => isLunarDateSelectable({
|
||||||
|
year: lunarDraft.value.year,
|
||||||
|
month: selectedOption?.month || 1,
|
||||||
|
day: Number(option.value),
|
||||||
|
isLeap: selectedOption?.isLeap || false
|
||||||
|
}));
|
||||||
|
return [
|
||||||
|
yearOptions,
|
||||||
|
monthOptions,
|
||||||
|
dayOptions
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
function openPicker(): void {
|
||||||
|
if (calendarProxy.value === "SOLAR") {
|
||||||
|
solarDraft.value = props.modelValue || today;
|
||||||
|
} else {
|
||||||
|
const lunarDate = props.modelValue ? LunarCalendar.solarToLunar(props.modelValue) : LunarCalendar.solarToLunar(today);
|
||||||
|
if (lunarDate) {
|
||||||
|
lunarDraft.value = lunarDate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
visible.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSolarConfirm(value: PickerValue): void {
|
||||||
|
const date = String(value);
|
||||||
|
if (!date) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
emit("update:modelValue", date);
|
||||||
|
visible.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleLunarPick(value: PickerValue[]): void {
|
||||||
|
applyLunarPickerValue(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleLunarConfirm(value: PickerValue[]): void {
|
||||||
|
applyLunarPickerValue(value);
|
||||||
|
const solarDate = LunarCalendar.lunarToSolar(lunarDraft.value);
|
||||||
|
if (!solarDate || solarDate > today) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
emit("update:modelValue", solarDate);
|
||||||
|
visible.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyLunarPickerValue(value: PickerValue[]): void {
|
||||||
|
const year = Number(value[0]);
|
||||||
|
const monthValue = String(value[1] || "1");
|
||||||
|
const monthOptions = LunarCalendar.getMonthOptions(year)
|
||||||
|
.filter(option => isLunarDateSelectable({
|
||||||
|
year,
|
||||||
|
month: option.month,
|
||||||
|
day: 1,
|
||||||
|
isLeap: option.isLeap
|
||||||
|
}));
|
||||||
|
const selectedMonth = monthOptions.find(option => option.value === monthValue) || monthOptions[0];
|
||||||
|
const day = Number(value[2]);
|
||||||
|
if (!year || !selectedMonth || !day) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const monthDays = LunarCalendar.getMonthDays({
|
||||||
|
year,
|
||||||
|
month: selectedMonth.month,
|
||||||
|
isLeap: selectedMonth.isLeap
|
||||||
|
});
|
||||||
|
lunarDraft.value = {
|
||||||
|
year,
|
||||||
|
month: selectedMonth.month,
|
||||||
|
day: Math.max(1, Math.min(day, monthDays)),
|
||||||
|
isLeap: selectedMonth.isLeap
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function isLunarDateSelectable(lunarDate: LunarDate): boolean {
|
||||||
|
const solarDate = LunarCalendar.lunarToSolar(lunarDate);
|
||||||
|
return !!solarDate && solarDate <= today;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearValue(): void {
|
||||||
|
emit("update:modelValue", "");
|
||||||
|
visible.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.birthdate-picker {
|
||||||
|
gap: .5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.mode {
|
||||||
|
gap: .5rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
gap: .25rem;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
span {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: var(--td-text-color-placeholder);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.theme-dark) {
|
||||||
|
.birthdate-picker {
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -5,6 +5,18 @@
|
|||||||
:customer="customer"
|
:customer="customer"
|
||||||
/>
|
/>
|
||||||
<t-cell-group v-if="customer" theme="card">
|
<t-cell-group v-if="customer" theme="card">
|
||||||
|
<t-cell title="出生日期">
|
||||||
|
<button
|
||||||
|
v-if="isLunarBirthdate"
|
||||||
|
class="birthdate-trigger"
|
||||||
|
type="button"
|
||||||
|
@click.stop="toggleBirthdateText"
|
||||||
|
>
|
||||||
|
<span v-text="birthdateText" />
|
||||||
|
</button>
|
||||||
|
<span v-else v-text="birthdateText" />
|
||||||
|
</t-cell>
|
||||||
|
<t-cell title="年龄" :note="ageText" />
|
||||||
<t-cell title="住址" :note="customer.address || '无'" />
|
<t-cell title="住址" :note="customer.address || '无'" />
|
||||||
<t-cell title="病症" :note="customer.disease || '无'" />
|
<t-cell title="病症" :note="customer.disease || '无'" />
|
||||||
<t-cell title="备注" :note="customer.remark || '无'" />
|
<t-cell title="备注" :note="customer.remark || '无'" />
|
||||||
@@ -162,6 +174,7 @@ import { useSettingStore } from "@/store/settingStore";
|
|||||||
import type { BodyAreaValue, Customer } from "@/types/Customer";
|
import type { BodyAreaValue, Customer } from "@/types/Customer";
|
||||||
import { getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
|
import { getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
|
||||||
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
||||||
|
import { LunarCalendar } from "@/utils/LunarCalendar";
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "CustomerDetail"
|
name: "CustomerDetail"
|
||||||
@@ -180,6 +193,7 @@ const scanPopupVisible = ref(false);
|
|||||||
const pendingInvitee = ref<Customer>();
|
const pendingInvitee = ref<Customer>();
|
||||||
const scanStatus = ref("点击扫码开始识别。");
|
const scanStatus = ref("点击扫码开始识别。");
|
||||||
const removing = ref(false);
|
const removing = ref(false);
|
||||||
|
const showSolarBirthdate = ref(false);
|
||||||
let latestDecodedText = "";
|
let latestDecodedText = "";
|
||||||
|
|
||||||
const inviter = computed(() => customer.value?.introducerCustomer);
|
const inviter = computed(() => customer.value?.introducerCustomer);
|
||||||
@@ -189,6 +203,10 @@ const creatorName = computed(() => {
|
|||||||
return creatorUser?.nick || creatorUser?.name || customer.value?.creatorUserId || "无";
|
return creatorUser?.nick || creatorUser?.name || customer.value?.creatorUserId || "无";
|
||||||
});
|
});
|
||||||
const createdAtText = computed(() => formatTime(customer.value?.createdAt));
|
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<BodyAreaValue>({
|
const selectedAreas = computed<BodyAreaValue>({
|
||||||
get() {
|
get() {
|
||||||
return normalizeBodyAreaValue(customer.value?.conditioningPart);
|
return normalizeBodyAreaValue(customer.value?.conditioningPart);
|
||||||
@@ -203,10 +221,12 @@ async function loadCustomer(): Promise<void> {
|
|||||||
if (!id) {
|
if (!id) {
|
||||||
customer.value = undefined;
|
customer.value = undefined;
|
||||||
invitees.value = [];
|
invitees.value = [];
|
||||||
|
showSolarBirthdate.value = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
showSolarBirthdate.value = false;
|
||||||
customer.value = await CustomerAPI.detail(id);
|
customer.value = await CustomerAPI.detail(id);
|
||||||
await loadInvitees();
|
await loadInvitees();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -297,6 +317,27 @@ function formatTime(value?: number): string {
|
|||||||
return Time.formatDateTime(date);
|
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 {
|
function isCustomerAncestor(invitee: Customer): boolean {
|
||||||
if (!customer.value?.id) {
|
if (!customer.value?.id) {
|
||||||
return false;
|
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 {
|
.scan-popup {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
|
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
|
||||||
|
|||||||
@@ -34,11 +34,18 @@
|
|||||||
borderless
|
borderless
|
||||||
/>
|
/>
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
|
<t-form-item label="出生日期">
|
||||||
|
<birthdate-picker
|
||||||
|
v-model="formModel.birthdate"
|
||||||
|
v-model:calendar="formModel.birthdateCalendar"
|
||||||
|
/>
|
||||||
|
</t-form-item>
|
||||||
<t-form-item label="年龄">
|
<t-form-item label="年龄">
|
||||||
<t-input
|
<t-input
|
||||||
v-model.trim="formModel.age"
|
v-model.trim="formModel.age"
|
||||||
type="number"
|
type="number"
|
||||||
placeholder="年龄"
|
:readonly="!!formModel.birthdate"
|
||||||
|
:placeholder="formModel.birthdate ? '根据出生日期自动计算' : '年龄'"
|
||||||
borderless
|
borderless
|
||||||
/>
|
/>
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
@@ -157,7 +164,7 @@ import CodeScanner from "@/components/CodeScanner.vue";
|
|||||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||||
import PhotoField from "@/components/PhotoField.vue";
|
import PhotoField from "@/components/PhotoField.vue";
|
||||||
import { useSettingStore } from "@/store/settingStore";
|
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 { createBodyAreaValue, getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
|
||||||
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
||||||
import { compressUploadImage } from "@/utils/imageCompression";
|
import { compressUploadImage } from "@/utils/imageCompression";
|
||||||
@@ -194,6 +201,8 @@ const formModel = reactive({
|
|||||||
photoURL: "",
|
photoURL: "",
|
||||||
telephone: "",
|
telephone: "",
|
||||||
age: "",
|
age: "",
|
||||||
|
birthdate: "",
|
||||||
|
birthdateCalendar: "SOLAR" as CustomerBirthdateCalendar,
|
||||||
address: "",
|
address: "",
|
||||||
referrer: "",
|
referrer: "",
|
||||||
disease: "",
|
disease: "",
|
||||||
@@ -209,6 +218,8 @@ function resetFormModel(): void {
|
|||||||
photoURL: "",
|
photoURL: "",
|
||||||
telephone: "",
|
telephone: "",
|
||||||
age: "",
|
age: "",
|
||||||
|
birthdate: "",
|
||||||
|
birthdateCalendar: "SOLAR",
|
||||||
address: "",
|
address: "",
|
||||||
referrer: "",
|
referrer: "",
|
||||||
disease: "",
|
disease: "",
|
||||||
@@ -258,6 +269,8 @@ async function fillForm(): Promise<void> {
|
|||||||
photoURL: getCustomerPhotoURL(customer),
|
photoURL: getCustomerPhotoURL(customer),
|
||||||
telephone: customer.telephone || "",
|
telephone: customer.telephone || "",
|
||||||
age: customer.age === undefined || customer.age === null ? "" : String(customer.age),
|
age: customer.age === undefined || customer.age === null ? "" : String(customer.age),
|
||||||
|
birthdate: customer.birthdate || "",
|
||||||
|
birthdateCalendar: customer.birthdateCalendar || "SOLAR",
|
||||||
address: customer.address || "",
|
address: customer.address || "",
|
||||||
referrer: customer.introducerCustomer?.name || "",
|
referrer: customer.introducerCustomer?.name || "",
|
||||||
disease: customer.disease || "",
|
disease: customer.disease || "",
|
||||||
@@ -406,6 +419,8 @@ async function saveCustomer(): Promise<void> {
|
|||||||
name: formModel.name,
|
name: formModel.name,
|
||||||
gender: formModel.gender || undefined,
|
gender: formModel.gender || undefined,
|
||||||
age: Number(formModel.age) || undefined,
|
age: Number(formModel.age) || undefined,
|
||||||
|
birthdate: formModel.birthdate || null,
|
||||||
|
birthdateCalendar: formModel.birthdate ? formModel.birthdateCalendar : undefined,
|
||||||
telephone: formModel.telephone,
|
telephone: formModel.telephone,
|
||||||
address: formModel.address,
|
address: formModel.address,
|
||||||
remark: formModel.note,
|
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 () => {
|
onMounted(async () => {
|
||||||
await fillForm();
|
await fillForm();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import type { Attachment, Model, User } from "timi-web";
|
import type { Attachment, Model, User } from "timi-web";
|
||||||
|
|
||||||
export type CustomerGender = "MALE" | "FEMALE";
|
export type CustomerGender = "MALE" | "FEMALE";
|
||||||
|
export type CustomerBirthdateCalendar = "SOLAR" | "LUNAR";
|
||||||
|
|
||||||
export type BodyAreaValue = {
|
export type BodyAreaValue = {
|
||||||
selectedCodeList: string[];
|
selectedCodeList: string[];
|
||||||
@@ -11,6 +12,8 @@ export type Customer = {
|
|||||||
name?: string;
|
name?: string;
|
||||||
gender?: CustomerGender;
|
gender?: CustomerGender;
|
||||||
age?: number;
|
age?: number;
|
||||||
|
birthdate?: string | null;
|
||||||
|
birthdateCalendar?: CustomerBirthdateCalendar;
|
||||||
telephone?: string;
|
telephone?: string;
|
||||||
address?: string;
|
address?: string;
|
||||||
remark?: string;
|
remark?: string;
|
||||||
|
|||||||
@@ -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<LunarDate, "year" | "month" | "isLeap">): 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user