fix(timer): 完成页圆环覆盖弹窗 + 自定义确认 modal 替代 wx.showModal
训练完成的三个相关 bug: 1. progress-ring 圆环覆盖完成页弹窗 → @tap ring wx:if 让完成态时直接 unmount 2. 完成弹窗内按钮需要点 2 次才能响应 → completion-mask 加 catchtouchmove 拦截 touchmove 3. wx.showModal "结束训练" 系统弹窗在 stacking context 下 hit-test 不稳 根因: .timer-page.page-enter 永久保留 transform: translateY(0), 创建永久 stacking context,影响 native modal 的 WebView 部分 hit-test。 修法: - 新增自定义 stop-confirm modal (catchtouchmove + 内部 catchtap + bindtap), 与 ui-modal/settings.plan-editor-mask 同模式,行为可靠 - completion-mask 用相同模式拦截 touchmove - 顺便修 overtime-badge 暗色 (rgba(var(--success-rgb)))
This commit is contained in:
+16
-1
@@ -25,6 +25,7 @@
|
||||
wx:if="{{status !== 'completed'}}"></view>
|
||||
|
||||
<progress-ring
|
||||
wx:if="{{status !== 'completed'}}"
|
||||
duration="{{duration}}"
|
||||
remaining="{{isCompleted ? 0 : remaining}}"
|
||||
size="{{360}}"
|
||||
@@ -32,6 +33,7 @@
|
||||
status="{{status}}"
|
||||
primaryColor="{{theme.primary}}"
|
||||
primaryLightColor="{{theme.primaryLight}}"
|
||||
trackColor="{{isDark ? '#2C2C2E' : '#EEEEEE'}}"
|
||||
></progress-ring>
|
||||
|
||||
<!-- 完成庆祝粒子 -->
|
||||
@@ -114,8 +116,21 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自定义"结束训练"确认弹窗 — 替代 wx.showModal,避免系统原生 modal
|
||||
在 WebView stacking context 下 hit-test 不稳的问题 -->
|
||||
<view class="stop-confirm-mask" wx:if="{{showStopConfirm}}" catchtouchmove="onNoop">
|
||||
<view class="stop-confirm-card" catchtap="onNoop">
|
||||
<text class="stop-confirm-title">结束训练</text>
|
||||
<text class="stop-confirm-content">确定要结束本次训练吗?</text>
|
||||
<view class="stop-confirm-actions">
|
||||
<view class="stop-confirm-btn" bindtap="onStopCancel">取消</view>
|
||||
<view class="stop-confirm-btn stop-confirm-btn--primary" bindtap="onStopConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 完成训练全屏弹窗 -->
|
||||
<view class="completion-mask" wx:if="{{showCompletion}}">
|
||||
<view class="completion-mask" wx:if="{{showCompletion}}" catchtouchmove="onNoop">
|
||||
<view class="completion-card">
|
||||
<view class="completion-emoji-wrap">
|
||||
<text class="completion-emoji">{{completionLevel === 'first' ? '🎉' : completionLevel === 'record' ? '🏆' : completionLevel === 'milestone' ? '🔥' : '✨'}}</text>
|
||||
|
||||
Reference in New Issue
Block a user