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

feat: Add Scoreboard and Date Calc pages, update Calculator with scientific mode and new UI

Browse Source
This commit is contained in:
Joywayer
2026-02-05 16:04:09 +08:00
parent c8a67abdd2
commit 10304c4abf
15 changed files with 1390 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "日期计算器"
}

112
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.ts Normal file
View File

@@ -0,0 +1,112 @@
// pages/date-calc/date-calc.ts
Page({
data: {
currentTab: 0,
startDate: '',
startWeekday: '', // 新增：开始日期的星期
endDate: '',
days: 0, // 可以为空字符串以便清空输入框，但 input type number 会处理
resultDate: '',
resultWeekday: '',
intervalDays: 0,
intervalWeeks: 0,
intervalRemainingDays: 0
},
onLoad() {
const today = new Date();
const dateStr = this.formatDate(today);
this.setData({
startDate: dateStr,
endDate: dateStr,
resultDate: dateStr,
resultWeekday: this.getWeekday(today),
startWeekday: this.getWeekday(today)
});
},
switchTab(e: any) {
this.setData({
currentTab: parseFloat(e.currentTarget.dataset.index)
});
this.calculate(); // 切换时重新计算
},
bindDateChange(e: any) {
const field = e.currentTarget.dataset.field;
this.setData({
[field]: e.detail.value
});
// 如果修改的是开始日期，同步更新星期显示
if (field === 'startDate') {
const d = new Date(e.detail.value);
this.setData({ startWeekday: this.getWeekday(d) });
}
this.calculate();
},
bindDaysInput(e: any) {
const val = e.detail.value;
// 允许输入负号
if (val === '-' || val === '') {
this.setData({ days: val });
return;
}
this.setData({
days: parseInt(val)
});
this.calculate();
},
setDays(e: any) {
const days = parseInt(e.currentTarget.dataset.days);
this.setData({ days: days });
this.calculate();
},
calculate() {
if (this.data.currentTab === 0) {
// 日期推算
// 注意：直接使用 new Date('2023-10-01') 在 iOS 上可能不兼容，应替换为 '/'
const start = new Date(this.data.startDate.replace(/-/g, '/'));
// days 可能是字符串或数字
const dayOffset = typeof(this.data.days) === 'number' ? this.data.days : parseInt(this.data.days || '0');
const target = new Date(start.getTime() + dayOffset * 24 * 60 * 60 * 1000);
this.setData({
resultDate: this.formatDate(target),
resultWeekday: this.getWeekday(target)
});
} else {
// 日期通过 (Interval)
const start = new Date(this.data.startDate.replace(/-/g, '/'));
const end = new Date(this.data.endDate.replace(/-/g, '/'));
const diffTime = Math.abs(end.getTime() - start.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const weeks = Math.floor(diffDays / 7);
const remainingDays = diffDays % 7;
this.setData({
intervalDays: diffDays,
intervalWeeks: weeks,
intervalRemainingDays: remainingDays
});
}
},
formatDate(date: Date): string {
const y = date.getFullYear();
const m = (date.getMonth() + 1).toString().padStart(2, '0');
const d = date.getDate().toString().padStart(2, '0');
return `${y}-${m}-${d}`;
},
getWeekday(date: Date): string {
const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
return days[date.getDay()];
}
})

96
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.wxml Normal file
View File

@@ -0,0 +1,96 @@
<!--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>

276
codes/minipro/calculation/miniprogram/pages/date-calc/date-calc.wxss Normal file
View File

@@ -0,0 +1,276 @@
/* pages/date-calc/date-calc.wxss */
page {
background-color: #f0f2f5;
color: #333;
--primary-color: #5b73e8;
--primary-light: #e0e6fc;
}
.container {
padding: 30rpx;
min-height: 100vh;
box-sizing: border-box;
}
/* Tab 切换 */
.tab-header {
display: flex;
background: #ffffff;
padding: 8rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}
.tab-pill {
flex: 1;
text-align: center;
padding: 20rpx 0;
border-radius: 16rpx;
font-size: 28rpx;
color: #666;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
white-space: nowrap;
}
.tab-pill.active {
background-color: var(--primary-light);
color: var(--primary-color);
font-weight: bold;
}
.tab-icon {
font-size: 32rpx;
}
/* 卡片通用样式 */
.card {
background: #ffffff;
border-radius: 24rpx;
padding: 40rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.04);
}
.card-title {
font-size: 24rpx;
color: #999;
margin-bottom: 20rpx;
text-transform: uppercase;
letter-spacing: 1rpx;
}
/* 模式1：日期推算 */
.date-display {
display: flex;
align-items: baseline;
padding-bottom: 20rpx;
}
.date-text {
font-size: 48rpx;
font-weight: bold;
color: #333;
margin-right: 20rpx;
}
.date-week {
font-size: 28rpx;
color: #666;
}
.edit-icon {
margin-left: auto;
color: var(--primary-color);
font-size: 36rpx;
opacity: 0.8;
}
.divider {
height: 1px;
background: #f0f0f0;
margin: 30rpx 0;
}
.input-row {
display: flex;
align-items: center;
border-bottom: 2px solid var(--primary-light);
padding-bottom: 10rpx;
margin-bottom: 30rpx;
}
.days-input {
flex: 1;
font-size: 56rpx;
font-weight: bold;
color: var(--primary-color);
height: 80rpx;
}
.input-unit {
font-size: 32rpx;
color: #999;
}
.tags-row {
display: flex;
gap: 20rpx;
}
.tag {
background: #f5f7fa;
color: #666;
padding: 12rpx 24rpx;
border-radius: 30rpx;
font-size: 24rpx;
font-weight: 500;
}
.tag-red {
background: #fff0f0;
color: #ff4d4f;
}
/* 结果卡片 */
.result-card {
background: var(--primary-color); /* 渐变色更好吗？先用纯色突出 */
background: linear-gradient(135deg, #5b73e8 0%, #455ac0 100%);
color: #fff;
text-align: center;
padding: 50rpx;
}
.result-header {
font-size: 24rpx;
opacity: 0.8;
margin-bottom: 20rpx;
}
.result-date {
font-size: 64rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.result-week {
font-size: 32rpx;
opacity: 0.9;
}
/* 模式2：日期间隔 */
.date-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.row-label {
font-size: 30rpx;
color: #666;
font-weight: bold;
}
.date-pill {
background: #f5f7fa;
padding: 16rpx 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
color: #333;
font-weight: 500;
display: flex;
align-items: center;
gap: 10rpx;
}
.pill-icon {
font-size: 20rpx;
color: #999;
}
.timeline-connect {
display: flex;
align-items: center; /* 居中对齐 */
margin: 30rpx 0;
padding-left: 20rpx; /* 微调对齐 */
}
.dots {
width: 2px;
height: 40rpx;
border-left: 2px dashed #ddd; /* 使用左边框模拟竖线 */
margin: 0 auto; /* 水平居中 */
}
/* 实际上我想做竖向的时间轴，但在 input-card 里横向可能更好看，但这设计是竖向列表？
重新设计 timeline 为竖向的连接线
*/
.input-card {
position: relative;
}
/* 覆盖上面的 timeline-connect 为竖向视觉连接 */
.timeline-connect {
display: flex;
flex-direction: column; /* 竖向 */
align-items: flex-start; /* 靠左对齐，或者根据布局 */
margin: 30rpx 0;
padding-left: 0;
position: relative;
height: 60rpx; /* 高度 */
justify-content: center;
}
.dots {
/* 复用为无形占位或改用伪元素连线 */
display: none;
}
.timeline-connect::before {
content: '';
position: absolute;
left: 40rpx; /* 连接线的位置，约等于 row-label 的中心 */
top: -20rpx;
bottom: -20rpx;
width: 2rpx;
background: #e0e0e0;
z-index: 0;
}
.duration-badge {
position: relative;
z-index: 1;
background: #e6f7ff;
color: #1890ff;
font-size: 22rpx;
padding: 6rpx 20rpx;
border-radius: 20rpx;
margin-left: 20rpx; /* 避开左侧文字 */
align-self: center; /* 居中 */
}
/* 间隔结果 */
.interval-result .result-huge {
font-size: 80rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.interval-result .unit {
font-size: 32rpx;
font-weight: normal;
margin-left: 10rpx;
}
.interval-result .result-sub {
font-size: 28rpx;
opacity: 0.9;
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 20rpx;
display: inline-block;
}