lc
b52db87ddf
- 领奖台数据不足 3 名时显示虚拟空位(虚线轮廓+虚位以待) - 领奖台勋章与昵称对齐改为等高盒结构性修复(移除 margin 盲推) - 全 app 成就勋章图标尺寸统一为 30rpx(前三名/列表/设置页/记录页一致) - 勋章 SVG 按包围盒精确居中(utils/icons.js) - 设置页/记录页勋章展示配套调整
244 lines
10 KiB
Plaintext
244 lines
10 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>
|
|
|
|
<!-- 循环训练进度面板:组点阵 + 第 X/Y 组 + 阶段徽章 + 累计秒数。
|
|
层次分工:这里管「第几组」(宏观),中间的进度环管「本组还剩几秒」(微观)。 -->
|
|
<view
|
|
class="circuit-bar {{isResting ? 'is-rest' : ''}} {{status === 'paused' ? 'is-paused' : ''}}"
|
|
wx:if="{{isCircuitMode && status !== 'completed'}}"
|
|
>
|
|
<!-- 组进度点阵:已完成 / 进行中 / 下一组 三态 -->
|
|
<view class="circuit-dots" wx:if="{{circuitShowDots}}">
|
|
<view
|
|
wx:for="{{circuitDots}}"
|
|
wx:key="*this"
|
|
class="circuit-dot {{item <= dotsDone ? 'is-done' : ''}} {{item === dotsActive ? 'is-active' : ''}} {{item === dotsNext ? 'is-next' : ''}}"
|
|
></view>
|
|
</view>
|
|
<!-- 组数过多(>15)时退化为线性进度条,避免点阵挤成头发丝 -->
|
|
<view class="circuit-track" wx:else>
|
|
<view class="circuit-track-fill" style="width: {{dotsDone * 100 / totalSets}}%"></view>
|
|
</view>
|
|
|
|
<view class="circuit-meta">
|
|
<view class="circuit-count">
|
|
<text class="circuit-count-num">{{status === 'idle' ? totalSets : currentSet}}</text>
|
|
<text class="circuit-count-total" wx:if="{{status !== 'idle'}}">/{{totalSets}}</text>
|
|
<text class="circuit-count-unit">组</text>
|
|
</view>
|
|
<view class="circuit-phase circuit-phase--{{status === 'paused' ? 'pause' : (status === 'idle' ? 'idle' : (isResting ? 'rest' : 'work'))}}">
|
|
<view class="circuit-phase-dot"></view>
|
|
<text class="circuit-phase-text">{{status === 'paused' ? '已暂停' : (status === 'idle' ? '准备开始' : (isResting ? '休息中' : '撑住'))}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="circuit-sub">
|
|
<block wx:if="{{status === 'idle'}}">每组 {{circuitHold}} 秒{{circuitRest > 0 ? ' · 休息 ' + circuitRest + ' 秒' : ''}}</block>
|
|
<block wx:else>已撑 {{workTotal}} 秒 · 目标 {{circuitTotalWork}} 秒</block>
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 呼吸引导环 + 进度条 -->
|
|
<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>
|
|
|
|
<progress-ring
|
|
wx:if="{{status !== 'completed'}}"
|
|
duration="{{duration}}"
|
|
remaining="{{isCompleted ? 0 : remaining}}"
|
|
elapsed="{{elapsed}}"
|
|
size="{{360}}"
|
|
ringWidth="{{22}}"
|
|
status="{{status}}"
|
|
primaryColor="{{theme.primary}}"
|
|
primaryLightColor="{{theme.primaryLight}}"
|
|
trackColor="{{isCircuitMode ? '#EEEEEE' : (elapsed >= duration ? '#00B578' : '#EEEEEE')}}"
|
|
></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>
|
|
|
|
<!-- 状态提示 -->
|
|
<view class="hint-section">
|
|
<view class="hint-row" wx:if="{{status === 'idle'}}">
|
|
<image class="hint-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text">
|
|
<block wx:if="{{isCircuitMode}}">循环训练 · 共需撑 {{circuitTotalWork}} 秒</block>
|
|
<block wx:elif="{{isFreeMode}}">自由训练 · 目标 {{duration}} 秒</block>
|
|
<block wx:else>今日目标 {{duration}} 秒 · 第 {{planDay}} 天</block>
|
|
</text>
|
|
</view>
|
|
<view class="hint-row" wx:elif="{{status === 'running' && goalReached}}">
|
|
<image class="hint-icon running-pulse" src="{{icons.hotFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text running">目标达成，继续挑战!</text>
|
|
</view>
|
|
<view class="hint-row" wx:elif="{{status === 'running'}}">
|
|
<image class="hint-icon running-pulse" src="{{icons.likeFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text running">{{isCircuitMode ? phaseTip : hintTip}}</text>
|
|
</view>
|
|
<view class="hint-row" wx:elif="{{status === 'paused'}}">
|
|
<image class="hint-icon" src="{{icons.notificationForbidFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text paused">已暂停</text>
|
|
</view>
|
|
<view class="hint-row completed-hint" wx:elif="{{status === 'completed'}}">
|
|
<image class="hint-icon completed-bounce" src="{{icons.roundCheckFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text completed">目标完成! 继续坚持!</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>
|
|
|
|
<!-- 科学提示：价值行 + 弱化风险行（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" bindtap="onViewRecords">
|
|
<text>查看记录</text>
|
|
</view>
|
|
<!-- openType="share" 会触发 Page.onShareAppMessage(已实现),
|
|
没有这个属性 + onShareAppMessage 时分享按钮就是灰色的。
|
|
ui-btn 透传 openType 到内部原生 button。 -->
|
|
<ui-btn
|
|
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>
|