lc
f1ad3eeb95
- config.js 新增 minRecordSeconds: 20 阈值配置，改配置即可调整门槛 - timer.js: finishTraining/_onCircuitComplete 低时长不播完成语音; _saveAndShowCompletion 兜底判断,任何入口都不会把短时训练落库; 新增 _showNotRecorded: 不保存记录、不更新连胜,复用完成弹窗展示实际秒数 - timer.wxml/wxss: 完成弹窗新增"未计入记录"提示行(门槛说明), 未记录时隐藏"查看记录/分享"按钮,只留"再来一次+回到首页" - 修复状态残留: 未记录后点"再来一次",下次正常完成不会误显示"未计入记录"
219 lines
9.3 KiB
Plaintext
219 lines
9.3 KiB
Plaintext
<view class="container timer-page page-enter" style="{{themeStyle}}">
|
|
|
|
<!-- 全屏彩带完成庆祝 -->
|
|
<view class="confetti" wx:if="{{isCompleted}}">
|
|
<view
|
|
wx:for="{{confettiPieces}}"
|
|
wx:key="i"
|
|
class="confetti-piece confetti-piece--{{celebrationLevel}}"
|
|
style="left: {{item.left}}%; background: {{item.color}}; animation-delay: {{item.delay}}s; transform: rotate({{item.rotate}}deg); width: {{item.size}}rpx; height: {{item.size * 2}}rpx;"
|
|
></view>
|
|
</view>
|
|
|
|
<!-- 成就横幅 (record / milestone / first) -->
|
|
<view class="achievement-banner" wx:if="{{isCompleted && celebrationLevel !== 'normal'}}">
|
|
<text class="achievement-text">{{celebrationMessage}}</text>
|
|
</view>
|
|
|
|
<!-- 呼吸引导环 + 进度条。循环训练的组进度不再占一块独立面板,
|
|
而是由 progress-ring 在圆环外圈画一圈分段弧(见组件的 sets/currentSet/resting 属性),
|
|
保证单组/自由/循环三模式共用同一套页面骨架,切换零跳动。 -->
|
|
<view class="ring-wrapper">
|
|
<view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
|
|
wx:if="{{status !== 'completed'}}"></view>
|
|
<view class="breathe-ring breathe-ring-2 {{status === 'running' ? 'fast' : ''}}"
|
|
wx:if="{{status !== 'completed'}}"></view>
|
|
<view class="breathe-ring breathe-ring-3 {{status === 'running' ? 'fast' : ''}}"
|
|
wx:if="{{status !== 'completed'}}"></view>
|
|
<!-- 呼吸光环:进度环外侧一圈可见的描边辉光,随呼吸收放(idle 慢/running 快) -->
|
|
<view class="breath-aura {{status === 'running' ? 'fast' : ''}}"
|
|
wx:if="{{status !== 'completed'}}"></view>
|
|
|
|
<progress-ring
|
|
wx:if="{{status !== 'completed'}}"
|
|
duration="{{duration}}"
|
|
remaining="{{isCompleted ? 0 : remaining}}"
|
|
elapsed="{{elapsed}}"
|
|
size="{{420}}"
|
|
ringWidth="{{22}}"
|
|
status="{{status}}"
|
|
primaryColor="{{theme.primary}}"
|
|
primaryLightColor="{{theme.primaryLight}}"
|
|
trackColor="{{isCircuitMode ? '#EEEEEE' : (elapsed >= duration ? '#00B578' : '#EEEEEE')}}"
|
|
ticks="{{ringTicks}}"
|
|
subText="{{ringSubText}}"
|
|
sets="{{totalSets}}"
|
|
currentSet="{{currentSet}}"
|
|
resting="{{isResting}}"
|
|
></progress-ring>
|
|
|
|
<!-- 完成庆祝粒子 -->
|
|
<view class="celebrate-burst" wx:if="{{isCompleted}}">
|
|
<image class="spark s1" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
|
|
<image class="spark s2" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
|
|
<image class="spark s3" src="{{icons.crownFill}}" mode="aspectFit"></image>
|
|
<image class="spark s4" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
|
|
<image class="spark s5" src="{{icons.sparkleFill}}" mode="aspectFit"></image>
|
|
<image class="spark s6" src="{{icons.likeFill}}" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 信息气泡:状态 + 目标摘要 + 运行提示 三行合一(三模式公用)。
|
|
环下方原 statusText(撑住/休息中/已暂停)并入气泡顶部,圆环下只留一张卡。 -->
|
|
<view class="info-bubble" wx:if="{{status !== 'completed'}}">
|
|
<view class="info-line info-line--status info-line--{{status}} {{isResting ? 'info-line--rest' : ''}}">
|
|
<view class="info-status-dot"></view>
|
|
<text class="info-status-text">{{statusText}}</text>
|
|
</view>
|
|
<view class="info-divider"></view>
|
|
<view class="info-line info-line--goal">
|
|
<image class="info-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
|
|
<text class="info-text">{{goalLine}}</text>
|
|
</view>
|
|
<view class="info-divider" wx:if="{{runningTip}}"></view>
|
|
<view class="info-line info-line--tip info-line--{{tipType}}" wx:if="{{runningTip}}">
|
|
<image class="info-icon" src="{{tipIcon}}" mode="aspectFit"></image>
|
|
<text class="info-text">{{runningTip}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 控制按钮 -->
|
|
<view class="controls">
|
|
<ui-btn
|
|
wx:if="{{!isRunning && !isPaused}}"
|
|
variant="primary"
|
|
size="xl"
|
|
block
|
|
text="开始"
|
|
icon-src="{{icons.playWhite}}"
|
|
bindtap="onStart"
|
|
></ui-btn>
|
|
|
|
<view class="ctrl-row" wx:if="{{isRunning || isPaused}}">
|
|
<ui-btn
|
|
wx:if="{{!isPaused}}"
|
|
variant="ghost"
|
|
size="xl"
|
|
text="暂停"
|
|
icon-src="{{icons.notificationForbidFill}}"
|
|
custom-style="margin-right: 28rpx;"
|
|
bindtap="onPause"
|
|
></ui-btn>
|
|
<ui-btn
|
|
wx:if="{{isPaused}}"
|
|
variant="primary"
|
|
size="xl"
|
|
text="继续"
|
|
icon-src="{{icons.playWhite}}"
|
|
custom-style="margin-right: 28rpx;"
|
|
bindtap="onStart"
|
|
></ui-btn>
|
|
<ui-btn
|
|
variant="outline"
|
|
size="xl"
|
|
text="结束"
|
|
icon-src="{{icons.stop}}"
|
|
bindtap="onStop"
|
|
></ui-btn>
|
|
</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>
|
|
|
|
<!-- 完成训练全屏弹窗 -->
|
|
<wxs module="fmt">
|
|
// 秒数 -> 分秒展示: 45->"45"/"秒", 83->"1分23"/"秒", 120->"2"/"分钟"
|
|
// 与 utils/util.js 的 formatDuration 口径一致(整分钟走分钟单位)
|
|
module.exports = {
|
|
numPart: function (s) {
|
|
s = Math.floor(s || 0)
|
|
if (s < 60) return '' + s
|
|
var m = Math.floor(s / 60)
|
|
var sec = s % 60
|
|
return sec === 0 ? '' + m : m + '分' + sec
|
|
},
|
|
unitPart: function (s) {
|
|
s = Math.floor(s || 0)
|
|
if (s < 60) return '秒'
|
|
return s % 60 === 0 ? '分钟' : '秒'
|
|
}
|
|
}
|
|
</wxs>
|
|
<view class="completion-mask" wx:if="{{showCompletion}}" catchtouchmove="onNoop">
|
|
<view class="completion-card">
|
|
<view class="completion-emoji-wrap">
|
|
<image class="completion-icon" src="{{completionLevel === 'first' ? icons.partyWhite : completionLevel === 'record' ? icons.trophyWhite : completionLevel === 'milestone' ? icons.hotWhite : icons.sparkleWhite}}" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="completion-title">{{completionMessage}}</text>
|
|
|
|
<view class="completion-number-wrap">
|
|
<text class="completion-number {{completionElapsed >= 60 ? 'completion-number--long' : ''}}">{{fmt.numPart(completionElapsed)}}</text>
|
|
<text class="completion-unit">{{fmt.unitPart(completionElapsed)}}</text>
|
|
</view>
|
|
|
|
<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}}">
|
|
<image class="streak-flame" src="{{icons.hotFill}}" mode="aspectFit"></image>
|
|
<text class="streak-text">连续打卡 {{completionStreak}} 天</text>
|
|
</view>
|
|
|
|
<!-- 未达最低记录时长:明确提示本次未计入记录,并说明门槛 -->
|
|
<view class="completion-not-recorded" wx:if="{{completionNotRecorded}}">
|
|
<view class="completion-not-recorded-main">
|
|
<image class="completion-not-recorded-icon" src="{{icons.infoFill}}" mode="aspectFit"></image>
|
|
<text class="completion-not-recorded-title">本次训练未计入记录</text>
|
|
</view>
|
|
<text class="completion-not-recorded-sub">撑满 {{minRecordSeconds}} 秒以上才会记录并计入连续打卡</text>
|
|
</view>
|
|
|
|
<!-- 科学提示：价值行 + 弱化风险行（config.scienceTips 按时长选段） -->
|
|
<view class="completion-tip" wx:if="{{completionTipValue}}">
|
|
<text class="completion-tip-value">{{completionTipValue}}</text>
|
|
<view class="completion-tip-risk" wx:if="{{completionTipRisk}}">
|
|
<text class="completion-tip-risk-tag">小贴士</text>
|
|
<text class="completion-tip-risk-text">{{completionTipRisk}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="completion-actions">
|
|
<view class="completion-btn completion-btn--primary" bindtap="onTrainAgain">
|
|
<text>再来一次</text>
|
|
</view>
|
|
<!-- 未记录时没有成绩可看/可晒,隐藏查看记录与分享入口 -->
|
|
<view class="completion-btn" wx:if="{{!completionNotRecorded}}" bindtap="onViewRecords">
|
|
<text>查看记录</text>
|
|
</view>
|
|
<!-- openType="share" 会触发 Page.onShareAppMessage(已实现),
|
|
没有这个属性 + onShareAppMessage 时分享按钮就是灰色的。
|
|
ui-btn 透传 openType 到内部原生 button。 -->
|
|
<ui-btn
|
|
wx:if="{{!completionNotRecorded}}"
|
|
variant="ghost"
|
|
size="md"
|
|
customStyle="flex:1; height:88rpx;"
|
|
text="分享"
|
|
openType="share"
|
|
></ui-btn>
|
|
</view>
|
|
<view class="completion-btn completion-btn--text" bindtap="onCloseCompletion">
|
|
<text>回到首页</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|