daoqi/youlegames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Date Calculator UI to Morandi theme and fix logic; fix Index page interaction

Browse Source
This commit is contained in:
Joywayer
2026-02-07 20:25:50 +08:00
parent a21716e772
commit 19c762b3fa
11 changed files with 1636 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.wxml
View File

@@ -3,94 +3,181 @@
<!-- 顶部 Tab 切换 -->
<view class="tab-header">
<view class="tab-pill {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-index="{{0}}">
<text class="tab-icon">📅</text> <text>日期推算</text>
</view>
<view class="tab-pill {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-index="{{1}}">
<text class="tab-icon">⏳</text> <text>间隔计算</text>
</view>
<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>
<!-- 内容区 -->
<view class="content-wrapper">
<!-- 模式1: 日期推算 -->
<block wx:if="{{currentTab === 0}}">
<view class="card input-card">
<view class="card-title">开始日期</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="date-display">
<text class="date-text">{{startDate || '请选择'}}</text>
<text class="date-week">{{startWeekday}}</text>
<view class="edit-icon">✎</view>
<view class="iv-pill" hover-class="iv-pill-hover">
{{startDate}}
</view>
</picker>
<view class="divider"></view>
</view>
<!-- 连接符 -->
<view class="iv-connector">
<view class="iv-arrow-icon">→</view>
</view>
<view class="card-title">推算天数</view>
<view class="input-row">
<input class="days-input" type="number" placeholder="0" bindinput="bindDaysInput" value="{{days}}" />
<text class="input-unit">天后</text>
</view>
<!-- 快捷标签 -->
<view class="tags-row">
<view class="tag" bindtap="setDays" data-days="7">+1周</view>
<view class="tag" bindtap="setDays" data-days="30">+1月</view>
<view class="tag" bindtap="setDays" data-days="100">+百日</view>
<view class="tag tag-red" bindtap="setDays" data-days="-1">-1天</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>
<view class="card result-card">
<view class="result-header">计算结果</view>
<view class="result-date">{{resultDate}}</view>
<view class="result-week">{{resultWeekday}}</view>
</view>
</block>
<!-- 模式2: 日期间隔 -->
<block wx:if="{{currentTab === 1}}">
<view class="card input-card">
<!-- 开始日期 -->
<view class="date-row">
<view class="row-label">开始</view>
<picker mode="date" value="{{startDate}}" bindchange="bindDateChange" data-field="startDate">
<view class="date-pill">
{{startDate}} <text class="pill-icon">▼</text>
</view>
</picker>
<!-- 公历日期选择 -->
<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>
<view class="timeline-connect">
<view class="dots"></view>
<view class="duration-badge">相隔</view>
<view class="dots"></view>
<!-- 农历日期选择 -->
<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="date-row">
<view class="row-label">结束</view>
<picker mode="date" value="{{endDate}}" bindchange="bindDateChange" data-field="endDate">
<view class="date-pill">
{{endDate}} <text class="pill-icon">▼</text>
</view>
</picker>
<!-- 结果卡片 -->
<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="card result-card interval-result">
<view class="result-header">时间跨度</view>
<view class="result-huge">
<text class="num">{{intervalDays}}</text>
<text class="unit">天</text>
</view>
<view class="result-sub" wx:if="{{intervalWeeks > 0}}">
约合 {{intervalWeeks}} 周 {{intervalRemainingDays > 0 ? '+ ' + intervalRemainingDays + ' 天' : ''}}
</view>
<view class="today-term-bar" wx:if="{{todayTerm}}">
<text class="term-icon">🌿</text>
<text class="term-text">今日节气：{{todayTerm}}</text>
</view>
</block>
</view>
</view>
</block>
</view>