Files
wx_pbzc/pages/index/index.wxml
T

135 lines
4.3 KiB
Plaintext

<view class="container page-enter" style="{{themeStyle}}">
<!-- 顶部问候 -->
<view class="greeting-row">
<view class="greeting-text">
<image class="greeting-icon" src="{{todayDone ? icons.successFill : icons.emojiFill}}" mode="aspectFit"></image>
<text class="greeting-title">{{todayDone ? '太棒了!' : '准备好了吗?'}}</text>
</view>
<text class="greeting-sub">{{todayDone ? '继续保持这个势头' : '今天的平板支撑等着你'}}</text>
</view>
<!-- 连续打卡卡片 -->
<ui-card variant="in">
<view class="header-card">
<view class="streak-section">
<image class="streak-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
<text class="streak-num">{{streakCount}}</text>
<text class="streak-label">连续打卡</text>
</view>
<view class="divider"></view>
<view class="plan-info">
<view class="plan-badge">
<image class="plan-badge-icon" src="{{icons.formFill}}" mode="aspectFit"></image>
<text class="plan-badge-text">{{planName}}</text>
</view>
<view class="progress-bar-wrap">
<view class="progress-bar">
<view class="progress-fill" style="width: {{planProgress}}%;">
<view class="progress-glow"></view>
</view>
</view>
<text class="progress-label">第 {{planDay}} / {{planTotal}} 天</text>
</view>
</view>
</view>
</ui-card>
<!-- 今日目标卡片 -->
<ui-card variant="in">
<view class="target-section">
<view class="target-header">
<image class="section-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
<text class="section-title">今日目标</text>
</view>
<view class="target-display">
<view class="target-ring">
<text class="target-time">{{todayTargetText}}</text>
</view>
<text class="target-unit">平板支撑</text>
</view>
<view class="today-status">
<block wx:if="{{todayDone}}">
<view class="done-badge">
<image class="done-icon" src="{{icons.successFill}}" mode="aspectFit"></image>
<text class="done-text">今日已完成 {{todayDuration}} 秒</text>
</view>
</block>
<block wx:else>
<image class="pending-icon" src="{{icons.time}}" mode="aspectFit"></image>
<text class="pending-text">还未开始训练</text>
</block>
</view>
</view>
</ui-card>
<!-- 操作按钮区 -->
<view class="action-buttons">
<ui-btn
variant="primary"
size="xl"
block
text="{{todayDone ? '再次训练' : '开始训练'}}"
icon-src="{{icons.playFill}}"
bindtap="onStartTrain"
></ui-btn>
<ui-btn
variant="ghost"
size="md"
block
text="自由训练 · 自定义时长"
icon-src="{{icons.timeFill}}"
bindtap="onFreeTrain"
></ui-btn>
</view>
<!-- 小提示 -->
<ui-card variant="soft" padded="{{false}}">
<view class="tip-card">
<image class="tip-icon" src="{{icons.lightFill}}" mode="aspectFit"></image>
<text class="tip-text">保持身体成一条直线,核心收紧,均匀呼吸</text>
</view>
</ui-card>
<!-- 时间选择弹窗 -->
<ui-modal
visible="{{showPicker}}"
position="bottom"
bind:close="onClosePicker"
>
<text class="picker-title">选择训练时长</text>
<view class="preset-grid">
<view
class="preset-item {{customDuration === item ? 'selected' : ''}}"
wx:for="{{presets}}"
wx:key="*this"
data-value="{{item}}"
bindtap="onSelectPreset"
>
<text class="preset-num">{{item}}</text>
<text class="preset-unit">秒</text>
</view>
</view>
<view class="custom-input-row">
<text class="custom-label">自定义:</text>
<input
class="custom-input"
type="number"
placeholder="输入秒数"
value="{{customInput}}"
bindinput="onCustomInput"
/>
<text class="custom-label">秒</text>
</view>
<ui-btn
variant="primary"
size="lg"
block
text="开始自由训练"
bindtap="onConfirmFree"
></ui-btn>
<text class="picker-cancel" bindtap="onClosePicker">取消</text>
</ui-modal>
</view>