feat: 训练完成后首页 streak 卡片高亮 3 秒
timer 记录保存时写 _last_train_at 时间戳,index onShow 检测 < 10s 的标记则触发 just-completed class,卡片脉冲 2 次 + 主题色 边框 + 阴影,3 秒后自动淡出。让'完成训练'的反馈在首页也可见。
This commit is contained in:
@@ -41,9 +41,35 @@ Page({
|
||||
if (this._firstShow) {
|
||||
this._firstShow = false
|
||||
this.refresh()
|
||||
this._checkFreshTrain()
|
||||
return
|
||||
}
|
||||
this.refresh()
|
||||
this._checkFreshTrain()
|
||||
},
|
||||
|
||||
/**
|
||||
* If user just returned from completing a training, briefly highlight
|
||||
* the "今日已完成" badge so the success feels tangible. The flag is
|
||||
* timestamped; older than 10s is treated as stale (e.g. user reopened
|
||||
* the app later).
|
||||
*/
|
||||
_checkFreshTrain() {
|
||||
try {
|
||||
const at = wx.getStorageSync('_last_train_at')
|
||||
if (!at) return
|
||||
const age = Date.now() - at
|
||||
if (age < 0 || age > 10 * 1000) {
|
||||
wx.removeStorageSync('_last_train_at')
|
||||
return
|
||||
}
|
||||
wx.removeStorageSync('_last_train_at')
|
||||
this.setData({ justCompleted: true })
|
||||
if (this._justCompletedTimer) clearTimeout(this._justCompletedTimer)
|
||||
this._justCompletedTimer = setTimeout(() => {
|
||||
this.setData({ justCompleted: false })
|
||||
}, 3000)
|
||||
} catch (e) {}
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 连续打卡卡片 -->
|
||||
<ui-card variant="in">
|
||||
<ui-card variant="in" class="{{justCompleted ? 'just-completed' : ''}}">
|
||||
<view class="header-card">
|
||||
<view class="streak-section">
|
||||
<image class="streak-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
|
||||
|
||||
@@ -350,3 +350,15 @@
|
||||
padding: 12rpx 0;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
/* ---- 训练完成高亮 (3 秒后淡出) ---- */
|
||||
.just-completed {
|
||||
animation: justCompletedPulse 1s ease-in-out 2;
|
||||
border: 4rpx solid var(--primary) !important;
|
||||
box-shadow: 0 4rpx 24rpx rgba(var(--primary-rgb), 0.3) !important;
|
||||
}
|
||||
|
||||
@keyframes justCompletedPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
}
|
||||
|
||||
@@ -292,6 +292,10 @@ Page({
|
||||
})
|
||||
storage.updateStreak(today)
|
||||
|
||||
// Flag the just-completed training so the index page can briefly
|
||||
// highlight the "今日已完成" badge when the user lands back there.
|
||||
try { wx.setStorageSync('_last_train_at', Date.now()) } catch (e) {}
|
||||
|
||||
wx.showToast({ title: `已记录 ${elapsed}秒`, icon: 'none', duration: 1500 })
|
||||
setTimeout(() => { wx.navigateBack() }, 1500)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user