97 lines
3.5 KiB
Plaintext
97 lines
3.5 KiB
Plaintext
<!--pages/date-calc/date-calc.wxml-->
|
|
<view class="container">
|
|
|
|
<!-- 顶部 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>
|
|
|
|
<!-- 内容区 -->
|
|
<view class="content-wrapper">
|
|
|
|
<!-- 模式1: 日期推算 -->
|
|
<block wx:if="{{currentTab === 0}}">
|
|
<view class="card input-card">
|
|
<view class="card-title">开始日期</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>
|
|
</picker>
|
|
|
|
<view class="divider"></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>
|
|
</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>
|
|
</view>
|
|
|
|
<view class="timeline-connect">
|
|
<view class="dots"></view>
|
|
<view class="duration-badge">相隔</view>
|
|
<view class="dots"></view>
|
|
</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>
|
|
</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>
|
|
</block>
|
|
</view>
|
|
|
|
</view>
|