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

6
codes/minipro/calculation/miniprogram/pages/scoreboard/scoreboard.json Normal file
View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "比赛计分板",
"navigationBarBackgroundColor": "#1a1b1f",
"navigationBarTextStyle": "white"
}

186
codes/minipro/calculation/miniprogram/pages/scoreboard/scoreboard.ts Normal file
View File

@@ -0,0 +1,186 @@
// pages/scoreboard/scoreboard.ts
Page({
data: {
// 队伍数据
homeName: '主队',
guestName: '客队',
homeScore: 0,
guestScore: 0,
// 动画状态
homeScoreAnim: false,
guestScoreAnim: false,
// 计时器数据
period: 1,
timeLeft: 12 * 60, // 默认12分钟 (秒)
timeStr: '12:00',
isTimerRunning: false,
timerId: null as number | null,
// 配置
quarterLength: 12 // 节长（分钟）
},
onLoad() {
this.updateTimeStr();
},
onUnload() {
this.stopTimer();
},
// === 分数控制 ===
addScore(e: any) {
const { team, val } = e.currentTarget.dataset;
const value = parseInt(val);
if (team === 'home') {
let newScore = this.data.homeScore + value;
if (newScore < 0) newScore = 0;
this.setData({
homeScore: newScore,
homeScoreAnim: true // 触发动画
});
// 动画自动复位
setTimeout(() => this.setData({ homeScoreAnim: false }), 300);
} else {
let newScore = this.data.guestScore + value;
if (newScore < 0) newScore = 0;
this.setData({
guestScore: newScore,
guestScoreAnim: true
});
setTimeout(() => this.setData({ guestScoreAnim: false }), 300);
}
// 震动反馈 (提升手感)
if (value > 0) {
wx.vibrateShort({ type: 'light' });
}
},
onTeamNameChange(e: any) {
const { team } = e.currentTarget.dataset;
const name = e.detail.value;
if (team === 'home') {
this.setData({ homeName: name });
} else {
this.setData({ guestName: name });
}
},
exchangeTeams() {
// 交换分数和名字
this.setData({
homeName: this.data.guestName,
guestName: this.data.homeName,
homeScore: this.data.guestScore,
guestScore: this.data.homeScore
});
wx.showToast({ title: '场地已交换', icon: 'none' });
},
resetGame() {
wx.showModal({
title: '重置比赛',
content: '确定要清空比分并重置时间吗？',
success: (res) => {
if (res.confirm) {
this.stopTimer();
this.setData({
homeScore: 0,
guestScore: 0,
period: 1,
timeLeft: this.data.quarterLength * 60,
isTimerRunning: false
});
this.updateTimeStr();
}
}
});
},
// === 计时器逻辑 ===
toggleTimer() {
if (this.data.isTimerRunning) {
this.stopTimer();
} else {
this.startTimer();
}
// 触感反馈
wx.vibrateShort({ type: 'medium' });
},
startTimer() {
if (this.data.timeLeft <= 0) return;
this.setData({ isTimerRunning: true });
this.data.timerId = setInterval(() => {
if (this.data.timeLeft > 0) {
this.data.timeLeft--;
this.updateTimeStr();
} else {
this.stopTimer();
wx.vibrateLong(); // 时间到震动提示
wx.showToast({ title: '本节结束', icon: 'none' });
}
}, 1000);
},
stopTimer() {
if (this.data.timerId) {
clearInterval(this.data.timerId);
this.data.timerId = null;
}
this.setData({ isTimerRunning: false });
},
resetTimer() {
// 如果正在运行，先暂停
if (this.data.isTimerRunning) {
this.stopTimer();
}
// 弹出选项：重置当前节还是自定义
wx.showActionSheet({
itemList: ['重置回 12:00', '重置回 10:00', '重置回 20:00'],
success: (res) => {
let minutes = 12;
if (res.tapIndex === 1) minutes = 10;
if (res.tapIndex === 2) minutes = 20;
this.setData({
timeLeft: minutes * 60,
quarterLength: minutes
});
this.updateTimeStr();
}
});
},
changePeriod() {
const nextPeriod = this.data.period >= 4 ? 1 : this.data.period + 1;
// 自动重置时间
this.stopTimer();
this.setData({
period: nextPeriod,
timeLeft: this.data.quarterLength * 60
});
this.updateTimeStr();
wx.showToast({ title: `第 ${nextPeriod} 节`, icon: 'none' });
},
updateTimeStr() {
const m = Math.floor(this.data.timeLeft / 60);
const s = this.data.timeLeft % 60;
const str = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
this.setData({ timeStr: str });
}
})

69
codes/minipro/calculation/miniprogram/pages/scoreboard/scoreboard.wxml Normal file
View File

@@ -0,0 +1,69 @@
<!--pages/scoreboard/scoreboard.wxml-->
<view class="container">
<!-- 顶部控制区：时间与节数 -->
<view class="timer-section">
<view class="period-badge" bindtap="changePeriod">
<text>第 {{period}} 节</text>
<text class="tip-icon">▼</text>
</view>
<view class="timer-display {{isTimerRunning ? 'running' : ''}}" bindtap="toggleTimer">
{{timeStr}}
<view class="timer-status">{{isTimerRunning ? '进行中' : '已暂停'}}</view>
</view>
<view class="timer-controls">
<view class="icon-btn" catchtap="resetTimer">↺</view>
</view>
</view>
<!-- 比分核心区 -->
<view class="scoreboard-card">
<!-- 主队 (红) -->
<view class="team-panel team-home">
<input class="team-name" value="{{homeName}}" bindblur="onTeamNameChange" data-team="home" placeholder="主队"/>
<view class="score-display {{homeScoreAnim ? 'bounce-anim' : ''}}" bindtap="addScore" data-team="home" data-val="{{1}}">
{{homeScore}}
</view>
<view class="action-buttons">
<view class="score-btn btn-red" bindtap="addScore" data-team="home" data-val="{{1}}">+1</view>
<view class="score-btn btn-red" bindtap="addScore" data-team="home" data-val="{{2}}">+2</view>
<view class="score-btn btn-red" bindtap="addScore" data-team="home" data-val="{{3}}">+3</view>
</view>
<view class="minus-btn" bindtap="addScore" data-team="home" data-val="-1">分数修正 (-1)</view>
</view>
<!-- VS 分割线 -->
<view class="vs-divider">
<view class="line"></view>
<view class="vs-text">VS</view>
<view class="line"></view>
<view class="exchange-btn" bindtap="exchangeTeams">
<text class="exchange-icon">⇄</text>
<text>交换</text>
</view>
</view>
<!-- 客队 (蓝) -->
<view class="team-panel team-guest">
<input class="team-name" value="{{guestName}}" bindblur="onTeamNameChange" data-team="guest" placeholder="客队"/>
<view class="score-display {{guestScoreAnim ? 'bounce-anim' : ''}}" bindtap="addScore" data-team="guest" data-val="{{1}}">
{{guestScore}}
</view>
<view class="action-buttons">
<view class="score-btn btn-blue" bindtap="addScore" data-team="guest" data-val="{{1}}">+1</view>
<view class="score-btn btn-blue" bindtap="addScore" data-team="guest" data-val="{{2}}">+2</view>
<view class="score-btn btn-blue" bindtap="addScore" data-team="guest" data-val="{{3}}">+3</view>
</view>
<view class="minus-btn" bindtap="addScore" data-team="guest" data-val="-1">分数修正 (-1)</view>
</view>
</view>
<!-- 底部全局功能 -->
<view class="footer-tools">
<view class="tool-btn reset-game" bindtap="resetGame">重置比赛</view>
<view class="tool-settings">
<text class="hint">点击比分可直接+1</text>
</view>
</view>
</view>

273
codes/minipro/calculation/miniprogram/pages/scoreboard/scoreboard.wxss Normal file
View File

@@ -0,0 +1,273 @@
/* pages/scoreboard/scoreboard.wxss */
page {
background-color: #1a1b1f; /* 深色背景 */
color: #fff;
height: 100%;
overflow: hidden; /* 禁止整页滚动，保持应用感 */
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
/* 顶部计时区 */
.timer-section {
flex-shrink: 0; /* 防止被压缩 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx 0; /* 减小内边距 */
background: #25262b;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.2);
position: relative;
z-index: 10;
}
.period-badge {
background: rgba(255, 255, 255, 0.1);
padding: 6rpx 20rpx;
border-radius: 30rpx;
font-size: 24rpx;
color: #aaa;
margin-bottom: 10rpx;
display: flex;
align-items: center;
}
.tip-icon { font-size: 16rpx; margin-left: 8rpx; }
.timer-display {
font-family: 'Courier New', Courier, monospace;
font-size: 72rpx; /* 稍微缩小字体 */
font-weight: bold;
letter-spacing: 4rpx;
color: #fff;
line-height: 1;
position: relative;
text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.3);
transition: color 0.3s;
padding: 10rpx 0;
}
.timer-display.running {
color: #00e676;
text-shadow: 0 0 16rpx rgba(0, 230, 118, 0.4);
}
.timer-status {
position: absolute;
bottom: -24rpx; /* 调整位置 */
left: 50%;
transform: translateX(-50%);
font-size: 18rpx;
color: #666;
white-space: nowrap;
}
.timer-controls {
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
.icon-btn {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #aaa;
}
/* 计分核心区 */
.scoreboard-card {
flex: 1;
display: flex;
padding: 20rpx;
gap: 16rpx;
align-items: stretch; /* 拉伸填充高度 */
justify-content: center;
overflow: hidden; /* 内部溢出隐藏 */
}
.team-panel {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background: #25262b;
border-radius: 20rpx;
padding: 20rpx 10rpx;
/* height: 90%; 删除固定高度 */
height: auto;
justify-content: space-between; /* 上下分布对齐 */
border: 1px solid rgba(255,255,255,0.05);
position: relative;
/* overflow: hidden; 删除溢出隐藏，避免裁剪内容 */
}
/* 队伍顶部的装饰条 */
.team-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.team-home::before { background: #ff4d4f; }
.team-guest::before { background: #1890ff; }
.team-name {
text-align: center;
font-size: 32rpx;
color: #ddd;
font-weight: bold;
margin-top: 10rpx;
flex-shrink: 0;
}
.score-display {
font-size: 120rpx; /* 适配小屏幕，稍微缩小 */
font-weight: 900;
line-height: 1;
margin: 20rpx 0;
position: relative;
z-index: 1; /* 确保在按钮上方（如果重叠） */
flex-grow: 1; /* 占据剩余空间 */
display: flex;
align-items: center; justify-content: center;
transition: transform 0.1s ease-in-out;
}
/* 弹跳动画 */
.bounce-anim {
animation: bounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.team-home .score-display { color: #ff4d4f; }
.team-guest .score-display { color: #1890ff; }
.action-buttons {
display: flex;
flex-direction: column;
gap: 16rpx;
width: 85%;
flex-shrink: 0;
margin-bottom: 10rpx;
}
.score-btn {
width: 100%;
padding: 18rpx 0; /* 减小高度 */
text-align: center;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: bold;
transition: opacity 0.2s;
}
.score-btn:active {
opacity: 0.7;
transform: scale(0.98);
}
.btn-red { background: rgba(255, 77, 79, 0.15); color: #ff4d4f; border: 1px solid rgba(255, 77, 79, 0.3); }
.btn-blue { background: rgba(24, 144, 255, 0.15); color: #1890ff; border: 1px solid rgba(24, 144, 255, 0.3); }
.minus-btn {
margin-top: 10rpx;
font-size: 22rpx;
color: #888;
padding: 10rpx 24rpx;
border-radius: 30rpx;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
flex-shrink: 0;
}
/* 中间分割与VS */
.vs-divider {
width: 40rpx; /* 变窄 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.line {
width: 2rpx;
background: rgba(255,255,255,0.1);
flex: 1;
}
.vs-text {
font-size: 28rpx;
font-weight: bold;
color: #555;
margin: 10rpx 0;
font-style: italic;
}
.exchange-btn {
display: flex;
flex-direction: column;
align-items: center;
margin: 20rpx 0;
}
.exchange-icon {
font-size: 36rpx;
color: #aaa;
margin-bottom: 2rpx;
}
.exchange-btn text:last-child {
font-size: 18rpx;
color: #666;
}
/* 底部功能 */
.footer-tools {
flex-shrink: 0;
padding: 20rpx 30rpx; /* 减小内边距 */
display: flex;
justify-content: space-between;
align-items: center;
background: #1a1b1f;
border-top: 1px solid rgba(255,255,255,0.05); /* 增加分割线防止混淆 */
margin-bottom: constant(safe-area-inset-bottom); /* 适配全面屏底部 */
margin-bottom: env(safe-area-inset-bottom);
}
.tool-btn {
background: rgba(255,255,255,0.08);
padding: 14rpx 36rpx;
border-radius: 40rpx;
font-size: 26rpx;
color: #ccc;
}
.hint {
font-size: 22rpx;
color: #444;
}