重构首页与tabBar:老黄历大日历+月历切换,新增百科页
Publish Mini Program Dev Version / publish (push) Successful in 3m16s

tabBar(5个,全部带图标):
- 老黄历(首页) / 许愿 / 八字 / 百科(新) / 我的(原设置)
- 移除日历tab,月历并入首页左上角切换
- 移除运势tab,改从'我的'页进入

首页重构:
- custom 导航栏,标题'老黄历'
- 老式万年历大日历卡片:大日期+农历+干支+宜忌
- 左右箭头切换日期,'回到今天'
- 左上角'月历/日历'切换按钮,月历视图复用原日历网格
- 月历点选日期自动切回日视图

新增百科页:
- 二十四节气/农历节日/公历节日/干支生肖/黄历术语 分类
- 搜索 + 展开详情

我的页(原设置):
- 新增功能入口:每日运势/占卜/二十四节气/月历视图
This commit is contained in:
gouki
2026-08-07 08:55:17 +00:00
parent ce7d5ecdc7
commit 5d40019ea5
23 changed files with 777 additions and 139 deletions
+131 -92
View File
@@ -1,95 +1,134 @@
<view class="container">
<!-- 顶部日期卡片 -->
<view class="card date-card">
<view class="flex justify-between items-center">
<view>
<text class="text-3xl font-bold">{{dayInfo.solarDay}}</text>
<text class="text-lg text-muted ml-2">{{dayInfo.solarMonth}}月{{dayInfo.solarYear}}年</text>
</view>
<view class="text-right">
<text class="text-base">{{dayInfo.weekDay}}</text>
<text class="text-sm text-muted block">{{dayInfo.constellation}}</text>
</view>
<image class="settings-entry" src="/images/settings.png" mode="aspectFit" bindtap="navTo" data-url="/pages/settings/settings"></image>
</view>
<view class="mt-2 flex items-center gap-2">
<text class="badge badge-festival" wx:if="{{dayInfo.lunarFestival}}">{{dayInfo.lunarFestival}}</text>
<text class="badge badge-festival" wx:if="{{dayInfo.solarFestival}}">{{dayInfo.solarFestival}}</text>
<text class="badge badge-outline" wx:if="{{dayInfo.solarTerm}}">{{dayInfo.solarTerm}}</text>
</view>
</view>
<!-- 农历信息 -->
<view class="card">
<view class="flex justify-between items-center">
<view>
<text class="text-2xl font-bold font-chinese">{{dayInfo.lunarMonthName}}{{dayInfo.lunarDayName}}</text>
<text class="text-sm text-muted block mt-1">{{dayInfo.lunarYearGanzhi}}年 {{dayInfo.lunarMonthGanzhi}}月 {{dayInfo.lunarDayGanzhi}}日</text>
</view>
<view class="text-right">
<text class="text-lg font-medium">{{dayInfo.zodiac}}年</text>
<text class="text-sm text-muted block">{{dayInfo.moonPhase}}</text>
</view>
</view>
</view>
<!-- 宜忌 -->
<view class="card">
<view class="flex gap-2 mb-2">
<view class="flex-1">
<text class="text-lucky font-bold text-lg">宜</text>
<view class="flex flex-wrap gap-1 mt-1">
<text class="badge badge-lucky" wx:for="{{almanac.recommends}}" wx:key="*this">{{item}}</text>
</view>
</view>
<view class="flex-1">
<text class="text-unlucky font-bold text-lg">忌</text>
<view class="flex flex-wrap gap-1 mt-1">
<text class="badge badge-unlucky" wx:for="{{almanac.avoids}}" wx:key="*this">{{item}}</text>
</view>
</view>
</view>
</view>
<!-- 黄历详情 -->
<view class="card">
<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>
</view>
<!-- 快捷入口 -->
<view class="grid grid-cols-4 gap-2 mt-2">
<view class="quick-entry" bindtap="navTo" data-url="/pages/calendar/calendar">
<image src="/images/calendar.png" class="quick-icon" mode="aspectFit"/>
<text class="text-sm">日历</text>
</view>
<view class="quick-entry" bindtap="navTo" data-url="/pages/bazi/bazi">
<image src="/images/bazi.png" class="quick-icon" mode="aspectFit"/>
<text class="text-sm">八字</text>
</view>
<view class="quick-entry" bindtap="navTo" data-url="/pages/fortune/fortune">
<image src="/images/fortune.png" class="quick-icon" mode="aspectFit"/>
<text class="text-sm">运势</text>
</view>
<view class="quick-entry" bindtap="navTo" data-url="/pages/divination/divination">
<image src="/images/divination.png" class="quick-icon" mode="aspectFit"/>
<text class="text-sm">占卜</text>
<!-- 自定义导航栏 -->
<view class="custom-nav" style="padding-top: {{statusBarHeight}}px;">
<view class="nav-inner" style="height: {{navBarHeight}}px;">
<view class="nav-toggle" bindtap="toggleView">
<text class="nav-toggle-text">{{viewMode === 'day' ? '月历' : '日历'}}</text>
</view>
<text class="nav-title font-chinese">老黄历</text>
<view class="nav-right"></view>
</view>
</view>
<!-- 日视图:老黄历 -->
<scroll-view class="page-body" scroll-y wx:if="{{viewMode === 'day'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
<view class="container">
<!-- 大日历卡片 -->
<view class="almanac-card">
<!-- 顶部:公历 -->
<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="almanac-head-right" wx:if="{{dayInfo.isToday}}">
<text class="today-tag">今日</text>
</view>
</view>
<!-- 大日期 -->
<view class="almanac-day-row">
<view class="day-arrow" bindtap="prevDay"></view>
<view class="almanac-day-num font-chinese">{{dayInfo.solarDay}}</view>
<view class="day-arrow" bindtap="nextDay"></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" wx:if="{{dayInfo.lunarFestival || dayInfo.solarFestival || dayInfo.solarTerm}}">
<text class="badge badge-festival" wx:if="{{dayInfo.lunarFestival}}">{{dayInfo.lunarFestival}}</text>
<text class="badge badge-festival" wx:if="{{dayInfo.solarFestival}}">{{dayInfo.solarFestival}}</text>
<text class="badge badge-outline" wx:if="{{dayInfo.solarTerm}}">{{dayInfo.solarTerm}}</text>
</view>
<!-- 宜忌 -->
<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>
</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>
</view>
</view>
<!-- 回今天 -->
<view class="back-today" wx:if="{{!dayInfo.isToday}}" bindtap="backToday">回到今天</view>
</view>
<!-- 黄历详情 -->
<view class="card">
<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="btn-primary mt-2 detail-btn" bindtap="goDetail">查看详情</view>
</view>
</view>
</scroll-view>
<!-- 月历视图 -->
<scroll-view class="page-body" scroll-y wx:if="{{viewMode === 'month'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
<view class="container">
<!-- 年月切换 -->
<view class="card flex justify-between items-center">
<view class="btn-ghost" bindtap="prevMonth"></view>
<view class="text-xl font-bold">{{year}}年{{month}}月</view>
<view class="btn-ghost" bindtap="nextMonth"></view>
</view>
<!-- 星期头 -->
<view class="grid grid-cols-7 gap-1 mb-1">
<view class="text-center text-sm text-muted" wx:for="{{weekHeaders}}" wx:key="*this">{{item}}</view>
</view>
<!-- 日历网格 -->
<view class="grid grid-cols-7 gap-1">
<view
class="day-cell {{item.isToday ? 'today' : ''}} {{item.solarMonth !== month ? 'other-month' : ''}}"
wx:for="{{calendarDays}}"
wx:key="solarDate"
bindtap="selectDay"
data-date="{{item.solarDate}}"
>
<text class="day-number">{{item.solarDay}}</text>
<text class="day-lunar {{item.lunarFestival || item.solarFestival ? 'festival' : ''}}">
{{item.lunarFestival || item.solarFestival || item.lunarDayName}}
</text>
<view class="day-dot" wx:if="{{item.isTermDay}}"></view>
</view>
</view>
</view>
</scroll-view>