gouki/lunar-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

feat(home): 日视图swiper轮播+老黄历方框合并+引入lunar-javascript真实宜忌
Publish Mini Program Dev Version / publish (push) Has been cancelled
Details

Browse Source 
1. 日视图改为swiper轮播，左右滑动切换日期，箭头固定在最左最右
2. 大日期方框扩大到包含农历和干支
3. 生肖（马年）移到导航栏右侧
4. 星期移到工作日提示左侧
5. 引入lunar-javascript（6tail库），用真实宜忌（最多20+项）替换手写4-5项
6. 值神/黄道详情样式调整：label大、value小、加间隔
7. 去掉点击放大提示
This commit is contained in:
gouki
2026-08-08 14:04:59 +00:00
parent ebbe994af7
commit 692f291338
5 changed files with 359 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mini/pages/home/home.wxml
+123 -110
View File
@@ -5,129 +5,142 @@
<text class="nav-toggle-text">{{viewMode === 'day' ? '月历' : '日历'}}</text>
</view>
<text class="nav-title font-chinese">老黄历</text>
<view class="nav-right"></view>
<view class="nav-right">
<text class="nav-zodiac">{{dayInfo.zodiac}}年</text>
</view>
</view>
</view>
<!-- 日视图：老黄历 -->
<scroll-view class="page-body" scroll-y wx:if="{{viewMode === 'day'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
<view class="container">
<!-- 日视图：老黄历（swiper 轮播） -->
<view class="page-body" wx:if="{{viewMode === 'day'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
<swiper
class="day-swiper"
current="{{dayIndex}}"
bindchange="onDaySwiperChange"
duration="300"
circular="{{false}}"
>
<swiper-item wx:for="{{dayList}}" wx:key="key" wx:for-item="dayItem">
<scroll-view class="day-scroll" scroll-y>
<view class="container">
<!-- 大日历卡片（点击放大） -->
<view class="almanac-card {{legalHoliday ? 'is-holiday' : (workday ? 'is-workday' : 'is-weekend')}}" bindtap="openZoom" data-type="detail">
<!-- 顶部：公历 -->
<view class="almanac-head">
<view class="almanac-head-left">
<text class="almanac-year">{{dayInfo.solarYear}}年{{dayInfo.solarMonth}}月</text>
<text class="almanac-week">{{dayInfo.weekDay}} · {{dayInfo.constellation}}</text>
</view>
<view class="head-tags">
<text class="today-tag" wx:if="{{dayInfo.isToday}}">今日</text>
<text class="lunar-tag" wx:if="{{isFirstOrFifteen}}">{{dayInfo.lunarDay === 1 ? '初一' : '十五'}}</text>
</view>
</view>
<!-- 大日历卡片 -->
<view class="almanac-card {{dayItem.legalHoliday ? 'is-holiday' : (dayItem.workday ? 'is-workday' : 'is-weekend')}}" bindtap="openZoom" data-type="detail" data-date="{{dayItem.key}}">
<!-- 顶部：公历 -->
<view class="almanac-head">
<view class="almanac-head-left">
<text class="almanac-year">{{dayItem.dayInfo.solarYear}}年{{dayItem.dayInfo.solarMonth}}月</text>
</view>
<view class="head-tags">
<text class="today-tag" wx:if="{{dayItem.dayInfo.isToday}}">今日</text>
<text class="lunar-tag" wx:if="{{dayItem.isFirstOrFifteen}}">{{dayItem.dayInfo.lunarDay === 1 ? '初一' : '十五'}}</text>
</view>
</view>
<!-- 大日期（老黄历方框） -->
<view class="almanac-day-row" catchtap="noop">
<view class="day-arrow" catchtap="prevDay">‹</view>
<view class="day-frame {{legalHoliday ? 'frame-holiday' : (workday ? 'frame-workday' : 'frame-weekend')}}">
<view class="almanac-day-num font-chinese {{legalHoliday ? 'num-holiday' : (workday ? 'num-workday' : 'num-weekend')}}">{{dayInfo.solarDay}}</view>
</view>
<view class="day-arrow" catchtap="nextDay">›</view>
</view>
<!-- 大日期（老黄历方框，包含农历和干支） -->
<view class="almanac-day-row" catchtap="noop">
<view class="day-frame {{dayItem.legalHoliday ? 'frame-holiday' : (dayItem.workday ? 'frame-workday' : 'frame-weekend')}}">
<view class="day-frame-inner">
<view class="almanac-day-num font-chinese {{dayItem.legalHoliday ? 'num-holiday' : (dayItem.workday ? 'num-workday' : 'num-weekend')}}">{{dayItem.dayInfo.solarDay}}</view>
<view class="day-frame-lunar">
<text class="day-frame-lunar-main font-chinese">{{dayItem.dayInfo.lunarMonthName}}{{dayItem.dayInfo.lunarDayName}}</text>
<text class="day-frame-lunar-sub">{{dayItem.dayInfo.lunarYearGanzhi}}年 {{dayItem.dayInfo.lunarMonthGanzhi}}月 {{dayItem.dayInfo.lunarDayGanzhi}}日</text>
</view>
</view>
</view>
</view>
<!-- 农历 -->
<view class="almanac-lunar">
<text class="almanac-lunar-main font-chinese">{{dayInfo.lunarMonthName}}{{dayInfo.lunarDayName}}</text>
<text class="almanac-lunar-sub">{{dayInfo.lunarYearGanzhi}}年 {{dayInfo.lunarMonthGanzhi}}月 {{dayInfo.lunarDayGanzhi}}日 · 属{{dayInfo.zodiac}}</text>
</view>
<!-- 节日/节气（固定高度，空着也占位） -->
<view class="almanac-fest">
<text class="badge badge-holiday" wx:if="{{dayItem.legalHoliday}}">{{dayItem.legalHoliday}}</text>
<text class="badge badge-festival" wx:if="{{dayItem.dayInfo.lunarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.lunarFestival}}</text>
<text class="badge badge-festival" wx:if="{{dayItem.dayInfo.solarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.solarFestival}}</text>
<text class="badge badge-term" wx:if="{{dayItem.dayInfo.solarTerm}}">{{dayItem.dayInfo.solarTerm}}{{dayItem.termTime ? ' ' + dayItem.termTime : ''}}</text>
</view>
<!-- 节日/节气（固定高度，空着也占位） -->
<view class="almanac-fest">
<text class="badge badge-holiday" wx:if="{{legalHoliday}}">{{legalHoliday}}</text>
<text class="badge badge-festival" wx:if="{{dayInfo.lunarFestival && !legalHoliday}}">{{dayInfo.lunarFestival}}</text>
<text class="badge badge-festival" wx:if="{{dayInfo.solarFestival && !legalHoliday}}">{{dayInfo.solarFestival}}</text>
<text class="badge badge-term" wx:if="{{dayInfo.solarTerm}}">{{dayInfo.solarTerm}}{{termTime ? ' ' + termTime : ''}}</text>
</view>
<!-- 佛历提醒（固定高度，空着也占位） -->
<view class="buddhist-tip">
<text class="buddhist-text" wx:if="{{dayItem.showBuddhist && dayItem.nextBuddhist}}" catchtap="noop">🪷 距 {{dayItem.nextBuddhist.name}} 还有 {{dayItem.nextBuddhist.daysLeft}} 天（{{dayItem.nextBuddhist.solarDate}}）</text>
</view>
<!-- 佛历提醒（固定高度，空着也占位） -->
<view class="buddhist-tip">
<text class="buddhist-text" wx:if="{{showBuddhist && nextBuddhist}}" catchtap="noop">🪷 距 {{nextBuddhist.name}} 还有 {{nextBuddhist.daysLeft}} 天（{{nextBuddhist.solarDate}}）</text>
</view>
<!-- 工作日/节假日提示 -->
<view class="day-type-tip {{legalHoliday ? 'tip-holiday' : (workday ? 'tip-workday' : 'tip-weekend')}}">
{{legalHoliday ? legalHoliday + ' · 放假' : (workday ? '工作日 · 上班' : '周末 · 休息')}}
</view>
</view>
<!-- 宜忌（点击放大） -->
<view class="card yiji-card" bindtap="openZoom" data-type="yiji">
<view class="yiji-row">
<view class="yiji-col">
<view class="yiji-title yi">宜</view>
<view class="yiji-items">
<text class="yiji-item yi" wx:for="{{almanac.recommends}}" wx:key="*this">{{item}}</text>
<!-- 星期 + 工作日/节假日提示 -->
<view class="day-type-tip {{dayItem.legalHoliday ? 'tip-holiday' : (dayItem.workday ? 'tip-workday' : 'tip-weekend')}}">
星期{{dayItem.dayInfo.weekDay}} · {{dayItem.legalHoliday ? dayItem.legalHoliday + ' · 放假' : (dayItem.workday ? '工作日 · 上班' : '周末 · 休息')}}
</view>
</view>
</view>
<view class="yiji-divider"></view>
<view class="yiji-col">
<view class="yiji-title ji">忌</view>
<view class="yiji-items">
<text class="yiji-item ji" wx:for="{{almanac.avoids}}" wx:key="*this">{{item}}</text>
<!-- 宜忌（点击放大） -->
<view class="card yiji-card" bindtap="openZoom" data-type="yiji" data-date="{{dayItem.key}}">
<view class="yiji-row">
<view class="yiji-col">
<view class="yiji-title yi">宜</view>
<view class="yiji-items">
<text class="yiji-item yi" wx:for="{{dayItem.almanac.recommends}}" wx:key="*this">{{item}}</text>
</view>
</view>
<view class="yiji-divider"></view>
<view class="yiji-col">
<view class="yiji-title ji">忌</view>
<view class="yiji-items">
<text class="yiji-item ji" wx:for="{{dayItem.almanac.avoids}}" wx:key="*this">{{item}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="zoom-hint">点击放大 🔍</view>
</view>
<!-- 黄历详情（点击放大） -->
<view class="card" bindtap="openZoom" data-type="detail">
<view class="grid grid-cols-2 gap-2">
<view class="p-2 bg-page rounded">
<text class="text-xs text-muted">值神</text>
<text class="text-base font-medium block">{{almanac.duty}}</text>
</view>
<view class="p-2 bg-page rounded">
<text class="text-xs text-muted">黄道</text>
<text class="text-base font-medium block">{{almanac.twelveStar.name}}（{{almanac.twelveStar.ecliptic}}）</text>
</view>
<view class="p-2 bg-page rounded">
<text class="text-xs text-muted">二十八宿</text>
<text class="text-base font-medium block">{{almanac.twentyEightStar.name}}</text>
</view>
<view class="p-2 bg-page rounded">
<text class="text-xs text-muted">六曜</text>
<text class="text-base font-medium block">{{almanac.sixStar}}</text>
</view>
<view class="p-2 bg-page rounded">
<text class="text-xs text-muted">冲煞</text>
<text class="text-base font-medium block">冲{{almanac.clash}} 煞{{almanac.evilDirection}}</text>
</view>
<view class="p-2 bg-page rounded">
<text class="text-xs text-muted">彭祖百忌</text>
<text class="text-base font-medium block">{{almanac.pengZu}}</text>
</view>
</view>
<view class="zoom-hint">点击放大 🔍</view>
</view>
<!-- 黄历详情（点击放大） -->
<view class="card" bindtap="openZoom" data-type="detail" data-date="{{dayItem.key}}">
<view class="detail-grid">
<view class="detail-item">
<text class="detail-label">值神</text>
<text class="detail-value">{{dayItem.almanac.duty}}</text>
</view>
<view class="detail-item">
<text class="detail-label">黄道</text>
<text class="detail-value">{{dayItem.almanac.twelveStar.name}}（{{dayItem.almanac.twelveStar.ecliptic}}）</text>
</view>
<view class="detail-item">
<text class="detail-label">二十八宿</text>
<text class="detail-value">{{dayItem.almanac.twentyEightStar.name}}</text>
</view>
<view class="detail-item">
<text class="detail-label">六曜</text>
<text class="detail-value">{{dayItem.almanac.sixStar}}</text>
</view>
<view class="detail-item">
<text class="detail-label">冲煞</text>
<text class="detail-value">冲{{dayItem.almanac.clash}} 煞{{dayItem.almanac.evilDirection}}</text>
</view>
<view class="detail-item">
<text class="detail-label">彭祖百忌</text>
<text class="detail-value">{{dayItem.almanac.pengZu}}</text>
</view>
</view>
</view>
<!-- 节日速查 -->
<view class="card" bindtap="openZoom" data-type="fest">
<view class="section-title">节日速查</view>
<view class="fest-quick">
<view class="fest-quick-item" wx:for="{{upcoming}}" wx:key="name" catchtap="goFestival" data-date="{{item.solarDate}}">
<text class="fest-name">{{item.name}}</text>
<text class="fest-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
<text class="fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : item.daysLeft + '天后'}}</text>
</view>
</view>
</view>
<!-- 节日速查 -->
<view class="card" bindtap="openZoom" data-type="fest" data-date="{{dayItem.key}}">
<view class="section-title">节日速查</view>
<view class="fest-quick">
<view class="fest-quick-item" wx:for="{{dayItem.upcoming}}" wx:key="name" catchtap="goFestival" data-date="{{item.solarDate}}">
<text class="fest-name">{{item.name}}</text>
<text class="fest-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
<text class="fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : item.daysLeft + '天后'}}</text>
</view>
</view>
</view>
<!-- 回今天 -->
<view class="back-today" wx:if="{{!dayInfo.isToday}}" bindtap="backToday">回到今天</view>
</view>
</scroll-view>
<!-- 回今天 -->
<view class="back-today" wx:if="{{!dayItem.dayInfo.isToday}}" bindtap="backToday">回到今天</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<!-- 左右箭头（固定在 swiper 最左最右） -->
<view class="day-arrow-fixed left" bindtap="prevDay">‹</view>
<view class="day-arrow-fixed right" bindtap="nextDay">›</view>
</view>
<!-- 月历视图：swiper 上下/左右滚动换月 -->
<view class="page-body month-body" wx:if="{{viewMode === 'month'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">