feat: 训练完成全屏弹窗 (大数字+countUp+超时+3按钮)

替换原来不显眼的 wx.showToast:
- 全屏遮罩 + 大圆角卡片,scale-in 弹性入场
- 大数字 180rpx countUp 从 0 滚到实际秒数(1.2s)
- 超时标签 +Xs 秒超时(OvertimePop 弹性出现,延迟 1.1s 等数字到末尾)
- 连续打卡显示 🔥
- 3 按钮:再来一次(留在当前页重置) / 查看记录(跳记录页) / 回到首页
- 装饰 emoji 圆形 1.6s 循环脉冲
- onComplete 触发时自动保存,不需要再手动点结束
This commit is contained in:
2026-07-08 14:19:40 +08:00
parent f052327276
commit 503f01f6e9
3 changed files with 323 additions and 17 deletions
+38
View File
@@ -113,4 +113,42 @@
></ui-btn>
</view>
</view>
<!-- 完成训练全屏弹窗 -->
<view class="completion-mask" wx:if="{{showCompletion}}">
<view class="completion-card">
<view class="completion-emoji-wrap">
<text class="completion-emoji">{{completionLevel === 'first' ? '🎉' : completionLevel === 'record' ? '🏆' : completionLevel === 'milestone' ? '🔥' : '✨'}}</text>
</view>
<text class="completion-title">{{completionMessage}}</text>
<view class="completion-number-wrap">
<text class="completion-number">{{completionElapsed}}</text>
<text class="completion-unit">秒</text>
</view>
<text class="completion-label">本次训练</text>
<view class="completion-overtime" wx:if="{{completionOvertime > 0}}">
<text class="overtime-plus">+{{completionOvertime}}</text>
<text class="overtime-label">秒超时</text>
</view>
<view class="completion-streak" wx:if="{{completionStreak > 0}}">
<text class="streak-flame">🔥</text>
<text class="streak-text">连续打卡 {{completionStreak}} 天</text>
</view>
<view class="completion-actions">
<view class="completion-btn completion-btn--primary" bindtap="onTrainAgain">
<text>再来一次</text>
</view>
<view class="completion-btn" bindtap="onViewRecords">
<text>查看记录</text>
</view>
</view>
<view class="completion-btn completion-btn--text" bindtap="onCloseCompletion">
<text>回到首页</text>
</view>
</view>
</view>
</view>