uniapp 公历 / 农历切换选择器

uniapp 公历 / 农历切换选择器的核心是用 multiSelector 实现三列联动，并通过切换数据源来切换公历 / 农历模式。

实现思路

1. 模式切换：顶部 “公历 / 农历” 按钮切换，通过 mode 控制数据源。
2. 三列联动：年 → 月 → 日，切换年 / 月时自动更新下一列的可选值。
3. 农历特殊处理：月份显示为 “正月、冬月、腊月” 等中文名称，日期显示为 “初一、初二…”，并支持闰月。
4. 样式还原：顶部按钮、选中高亮、三列滚动选择器。

关键说明

1. 依赖安装

   npm install lunar-javascript --save
   

2. 联动逻辑：

   • 切换年份时，自动更新月份和日期列表。
   • 切换月份时，自动更新日期列表，处理农历闰月和公历大小月。

3. 返回结果：

   • 点击 “确定” 后，会通过 onDateSelected 回调将选择结果返回给上一页，包含公历 / 农历模式、年 / 月 / 日及显示文本。

4. 样式还原：

   • 顶部 “取消 / 确定” 按钮、模式切换高亮、三列滚动选择器，和截图完全一致。

5. 页面结构

   • 顶部介绍区：包含文案和头像卡片
   • 表单区：姓名输入、性别单选、生日选择（点击唤起选择器）
   • 提交按钮：触发报告生成逻辑
   • 弹窗选择器：公历 / 农历切换、三列联动选择

6. 核心交互

   • 点击生日输入框 → 弹出日期选择器
   • 选择器内切换公历 / 农历 → 数据源自动更新
   • 年 / 月滚动 → 自动联动更新下一列可选值
   • 确认选择 → 回填生日文本到表单

核心逻辑说明

手动定义农历映射表

• 在 data 中定义 lunarMonthMap/lunarDayMap，替代库的工具方法，彻底摆脱版本依赖；
• 月份 / 日期的解析通过 “反向映射” 实现，逻辑简单且稳定。

闰月处理优化

• 闰月判断改用 Lunar 实例的 getLeapMonth() 方法（基础方法，所有版本支持）；
• 闰月标记仍用 “负数”，解析时通过 Math.abs() 处理，逻辑不变。

额外兼容保障

• 仅导入 Solar/Lunar 两个核心类，不导入任何工具类，避免版本差异导致的方法缺失；
• 所有逻辑基于实例方法实现，而非静态工具方法，兼容性拉满。