222 lines
10 KiB
Plaintext
222 lines
10 KiB
Plaintext
<!--pages/date-calc/date-calc.wxml-->
|
|
<view class="container">
|
|
|
|
<!-- 帮助说明面板 -->
|
|
<view class="history-panel {{showHelp ? 'show' : ''}}" catchtouchmove="preventTouchMove" style="z-index: 200;">
|
|
<view class="history-mask" bindtap="toggleHelp"></view>
|
|
<view class="history-content help-content">
|
|
<view class="history-header">
|
|
<text class="history-title">功能说明</text>
|
|
<text class="history-clear" bindtap="toggleHelp">关闭</text>
|
|
</view>
|
|
<scroll-view scroll-y class="history-list help-list">
|
|
<view class="help-section">
|
|
<view class="help-item">
|
|
<text class="help-icon">📅</text>
|
|
<view class="help-text">
|
|
<text class="help-h1">日期推算</text>
|
|
<text class="help-p">设定一个开始日期，输入往后(+)或往前(-)推算的天数，即可计算出目标日期。底部提供常用快捷按钮。</text>
|
|
</view>
|
|
</view>
|
|
<view class="help-item">
|
|
<text class="help-icon">⏳</text>
|
|
<view class="help-text">
|
|
<text class="help-h1">间隔计算</text>
|
|
<text class="help-p">选择两个日期，计算它们之间相差多少天，并自动换算为周数和月数。</text>
|
|
</view>
|
|
</view>
|
|
<view class="help-item">
|
|
<text class="help-icon">🌙</text>
|
|
<view class="help-text">
|
|
<text class="help-h1">农历转换</text>
|
|
<text class="help-p">支持公历（阳历）与农历（阴历）互转，并显示干支纪年、生肖、节气等传统信息。</text>
|
|
</view>
|
|
</view>
|
|
<button class="share-btn-large" open-type="share">分享给好友</button>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 顶部 Tab 切换 -->
|
|
<view class="tab-header">
|
|
<view class="tab-pill {{currentTab === 0 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="{{0}}">日期推算</view>
|
|
<view class="tab-pill {{currentTab === 1 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="{{1}}">间隔计算</view>
|
|
<view class="tab-pill {{currentTab === 2 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="{{2}}">农历转换</view>
|
|
<view class="help-btn" bindtap="toggleHelp">❓</view>
|
|
</view>
|
|
|
|
<!-- ========== 模式1: 日期推算 ========== -->
|
|
<block wx:if="{{currentTab === 0}}">
|
|
<!-- 日期选择 -->
|
|
<view class="card input-card">
|
|
<view class="card-label">开始日期</view>
|
|
<picker mode="date" value="{{startDate}}" bindchange="bindDateChange" data-field="startDate">
|
|
<view class="date-picker-bar" hover-class="picker-bar-hover">
|
|
<view class="picker-left">
|
|
<text class="picker-date">{{startDate || '请选择'}}</text>
|
|
<text class="picker-weekday">{{startWeekday}}</text>
|
|
</view>
|
|
<view class="picker-arrow">✎</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 推算天数 -->
|
|
<view class="card input-card">
|
|
<view class="card-label">推算天数</view>
|
|
<view class="days-input-group">
|
|
<input class="days-input" type="number" placeholder="输入天数" placeholder-style="color:#ccc;font-size:36rpx;font-weight:400" bindinput="bindDaysInput" value="{{days}}" />
|
|
<text class="days-suffix">天</text>
|
|
</view>
|
|
<view class="quick-tags">
|
|
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="7">+1周</view>
|
|
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="30">+1月</view>
|
|
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="100">+百日</view>
|
|
<view class="tag tag-plus" hover-class="tag-hover" bindtap="setDays" data-days="365">+1年</view>
|
|
<view class="tag tag-minus" hover-class="tag-minus-hover" bindtap="setDays" data-days="-1">-1天</view>
|
|
<view class="tag tag-minus" hover-class="tag-minus-hover" bindtap="setDays" data-days="-7">-1周</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 推算结果 -->
|
|
<view class="result-card">
|
|
<view class="result-label">推算结果</view>
|
|
<view class="result-main">{{resultDate}}</view>
|
|
<view class="result-extra">{{resultWeekday}}</view>
|
|
<view class="result-tag" wx:if="{{resultLunar}}">🌙 农历 {{resultLunar}}</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- ========== 模式2: 日期间隔 ========== -->
|
|
<block wx:if="{{currentTab === 1}}">
|
|
<view class="card input-card interval-card-compact">
|
|
<!-- 起始 -->
|
|
<view class="iv-col">
|
|
<view class="iv-small-label">起始日期</view>
|
|
<picker mode="date" value="{{startDate}}" bindchange="bindDateChange" data-field="startDate">
|
|
<view class="iv-pill" hover-class="iv-pill-hover">
|
|
{{startDate}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 连接符 -->
|
|
<view class="iv-connector">
|
|
<view class="iv-arrow-icon">→</view>
|
|
</view>
|
|
|
|
<!-- 结束 -->
|
|
<view class="iv-col">
|
|
<view class="iv-small-label">结束日期</view>
|
|
<picker mode="date" value="{{endDate}}" bindchange="bindDateChange" data-field="endDate">
|
|
<view class="iv-pill" hover-class="iv-pill-hover">
|
|
{{endDate}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 间隔结果 -->
|
|
<view class="result-card">
|
|
<view class="result-label">时间跨度</view>
|
|
<view class="interval-num-row">
|
|
<text class="interval-big-num">{{intervalDays}}</text>
|
|
<text class="interval-big-unit">天</text>
|
|
</view>
|
|
<view class="result-detail-row" wx:if="{{intervalWeeks > 0 || intervalMonths > 0}}">
|
|
<text class="result-detail" wx:if="{{intervalWeeks > 0}}">≈ {{intervalWeeks}} 周{{intervalRemainingDays > 0 ? ' ' + intervalRemainingDays + ' 天' : ''}}</text>
|
|
<text class="result-detail-sep" wx:if="{{intervalWeeks > 0 && intervalMonths > 0}}">|</text>
|
|
<text class="result-detail" wx:if="{{intervalMonths > 0}}">≈ {{intervalMonths}} 个月{{intervalExtraDays > 0 ? ' ' + intervalExtraDays + ' 天' : ''}}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- ========== 模式3: 农历转换 ========== -->
|
|
<block wx:if="{{currentTab === 2}}">
|
|
|
|
<!-- 输入卡片（固定结构） -->
|
|
<view class="card input-card">
|
|
<view class="lunar-header-row">
|
|
<view class="card-label" style="margin-bottom:0">{{lunarDirection === 'toL' ? '选择公历日期' : '选择农历日期'}}</view>
|
|
<view class="dir-switch" hover-class="dir-switch-hover" bindtap="toggleLunarDirection">
|
|
<text class="dir-switch-text">切换为 {{lunarDirection === 'toL' ? '农历→公历' : '公历→农历'}}</text>
|
|
<text class="dir-switch-icon">⇄</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 公历日期选择 -->
|
|
<picker wx:if="{{lunarDirection === 'toL'}}" mode="date" value="{{lunarSolarDate}}" bindchange="onLunarSolarDateChange">
|
|
<view class="date-picker-bar" hover-class="picker-bar-hover">
|
|
<view class="picker-left">
|
|
<text class="picker-date">{{lunarSolarDate || '请选择'}}</text>
|
|
</view>
|
|
<view class="picker-arrow">✎</view>
|
|
</view>
|
|
</picker>
|
|
|
|
<!-- 农历日期选择 -->
|
|
<picker wx:if="{{lunarDirection === 'toS'}}" mode="multiSelector" range="{{lunarPickerRange}}" value="{{lunarPickerValue}}" bindchange="onLunarPickerChange" bindcolumnchange="onLunarColumnChange">
|
|
<view class="date-picker-bar" hover-class="picker-bar-hover">
|
|
<view class="picker-left">
|
|
<text class="picker-date">{{lunarPickerDisplay || '请选择'}}</text>
|
|
</view>
|
|
<view class="picker-arrow">✎</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 结果卡片 -->
|
|
<view class="result-card" wx:if="{{(lunarDirection === 'toL' && lunarResult) || (lunarDirection === 'toS' && lunarToSolarResult)}}">
|
|
|
|
<!-- 公历 -> 农历结果 -->
|
|
<block wx:if="{{lunarDirection === 'toL'}}">
|
|
<view class="result-label">对应农历</view>
|
|
<view class="lunar-hero">{{lunarResult.monthName}}{{lunarResult.dayName}}</view>
|
|
<view class="lunar-sub">{{lunarResult.ganZhi}}年 · {{lunarResult.animal}}年</view>
|
|
<view class="lunar-tags" wx:if="{{lunarFestivalText || solarTermText || solarFestivalText}}">
|
|
<view class="lunar-tag festival" wx:if="{{lunarFestivalText}}">🎊 {{lunarFestivalText}}</view>
|
|
<view class="lunar-tag term" wx:if="{{solarTermText}}">🌿 {{solarTermText}}</view>
|
|
<view class="lunar-tag solar" wx:if="{{solarFestivalText}}">🎉 {{solarFestivalText}}</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 农历 -> 公历结果 -->
|
|
<block wx:if="{{lunarDirection === 'toS'}}">
|
|
<view class="result-label">对应公历</view>
|
|
<view class="result-main">{{lunarToSolarResult}}</view>
|
|
<view class="result-extra">{{lunarToSolarWeekday}}</view>
|
|
</block>
|
|
|
|
</view>
|
|
|
|
<!-- 今日信息 -->
|
|
<view class="today-card">
|
|
<view class="today-title">📌 今日</view>
|
|
<view class="today-grid">
|
|
<view class="today-cell">
|
|
<text class="today-cell-label">公历</text>
|
|
<text class="today-cell-value">{{todaySolar}}</text>
|
|
</view>
|
|
<view class="today-cell">
|
|
<text class="today-cell-label">农历</text>
|
|
<text class="today-cell-value accent">{{todayLunar}}</text>
|
|
</view>
|
|
<view class="today-cell">
|
|
<text class="today-cell-label">干支</text>
|
|
<text class="today-cell-value">{{todayGanZhi}}</text>
|
|
</view>
|
|
<view class="today-cell">
|
|
<text class="today-cell-label">生肖</text>
|
|
<text class="today-cell-value">{{todayAnimal}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="today-term-bar" wx:if="{{todayTerm}}">
|
|
<text class="term-icon">🌿</text>
|
|
<text class="term-text">今日节气：{{todayTerm}}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
</view>
|