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) {
|
if (this._firstShow) {
|
||||||
this._firstShow = false
|
this._firstShow = false
|
||||||
this.refresh()
|
this.refresh()
|
||||||
|
this._checkFreshTrain()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.refresh()
|
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() {
|
onPullDownRefresh() {
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 连续打卡卡片 -->
|
<!-- 连续打卡卡片 -->
|
||||||
<ui-card variant="in">
|
<ui-card variant="in" class="{{justCompleted ? 'just-completed' : ''}}">
|
||||||
<view class="header-card">
|
<view class="header-card">
|
||||||
<view class="streak-section">
|
<view class="streak-section">
|
||||||
<image class="streak-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
|
<image class="streak-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
|
||||||
|
|||||||
@@ -350,3 +350,15 @@
|
|||||||
padding: 12rpx 0;
|
padding: 12rpx 0;
|
||||||
margin-top: 8rpx;
|
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)
|
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 })
|
wx.showToast({ title: `已记录 ${elapsed}秒`, icon: 'none', duration: 1500 })
|
||||||
setTimeout(() => { wx.navigateBack() }, 1500)
|
setTimeout(() => { wx.navigateBack() }, 1500)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user